2012-10-12 27 views
0

我想有一個垂直顯示兩個列表的面板。 以下代碼:Sencha Touch 2垂直添加兩個列表?

Ext.define('CD.abc.Profile', { 
extend: 'Ext.Panel', 
layout: 'fit', 
fullscreen: true, 
config: { 
    layout:  'vbox', 
    items:  [ 
     { 
      xtype: 'mylist1' 
     }, 
     { 
      xtype: 'mylist2' 
     } 
    ] 
} 

});

但是該項目不顯示,頁面顯示爲空白。我可以找到dom結構中的元素,但它們在視圖中保持不可見。 任何人都可以幫助我解決這個問題嗎?

+0

嘗試添加'彎曲:1'既列表CONFIGS –

+0

HI @amrit_neo,爲什麼不能ü添加嵌入到這些兩個面板,並添加那些項目列表。 – heyjii

回答

0

通過柔性財產1

柔性:1

1

試試這個。它爲我工作。

 Ext.define('CD.abc.Profile', { 
     extend: 'Ext.Panel', 
     config: { 
      layout:'vbox', 
      items:  [ 
       { 
        xtype: 'mylist1', // x-type of your list1 view 
        flex:1 
       }, 
       { 
        xtype: 'mylist2', // x-type of your list2 view 
        flex:1 
       } 
      ] 
     } 
     }); 
0

試試這個工作對我說:

Ext.define('Sencha.view.Blog', { 
extend: 'Ext.Panel', 
xtype:'blogpage', 

config:{ 
    layout:'fit', 
    width:'100%', 
    height:'100%', 
    title: 'Blog', 
    iconCls: 'star', 
    style:'background-color: red;', 

    items:[ 
      { 
       xtype:'list', 
       id:'thelist', 
       style:'background-color: blue;', 
       height:'100%', width:'20%',left:0, 
         store: { 
      fields: ['name', 'number'], 
      sorters: 'name', 
      data: [ 
       {name: 'Shawshank Redemption', number: 5}, 
       {name: 'SuperBad', number: 3}, 
       {name: 'God Father', number: 5}, 
       {name: 'Forest Gump', number: 4.5}, 
       {name: 'A Beautiful Mind', number: 5}, 
      ] 
     }, 

     itemTpl: '{name}' 
      }, 
      { 
       xtype:'list', 
       id:'thelist1', 
       style:'background-color: blue;', 
       height:'100%', width:'20%',right:0, 
         store: { 
      fields: ['name', 'number'], 
      sorters: 'name', 
      data: [ 
       {name: 'Shawshank Redemption', number: 5}, 
       {name: 'SuperBad', number: 3}, 
       {name: 'God Father', number: 5}, 
       {name: 'Forest Gump', number: 4.5}, 
       {name: 'A Beautiful Mind', number: 5}, 
      ] 
      }, 
      itemTpl: '{name}' 
      } 
     ] 
}});