2013-02-07 48 views
0

我有一個導航視圖,其中包含一個tabview,我想在其中添加一個hbox面板,它可以並排列出並列出另一個面板。但是,當我嘗試將該列表添加到面板時,沒有顯示任何內容。我想知道它是如何可能做到這一點 enter image description here 導航視圖Sencha Touch:如何在hbox面板中創建列表

Ext.define('MyApp.view.Navigation', { 
    extend: 'Ext.navigation.View', 
    id: 'NavView', 
    xtype: 'navigationcard', 
    onBackButtonTap: function() { 
     //if on forms screen and button is visible remove add form button 
     var self = Ext.getCmp('NavView'); 
     var naviBtn = Ext.getCmp('addNewFormBtn'); 
     if (naviBtn != null) { 
      naviBtn.hide(); 
     } 
     self.pop(); 
    }, 
    config: { 
     title: 'Schedule', 
     iconCls: 'settings', 
     navigationBar: { 
      items: [{ 
       xtype: 'button', 
       text: 'Add New Form', 
       align: 'right', 
       id: 'addNewFormBtn', 
       hidden: true, 
       handler: function() { 

      } 
      }] 
     }, 
     //we only give it one item by default, which will be the only item in the 'stack' when it loads 
     items: [ 
        { 
         xtype: 'mainview' 
        } 
     ] 
    } 
}); 

Tab平板

Ext.define('MyApp.view.Main', { 
    extend: 'Ext.TabPanel', 
    xtype: ['mainview', 'widget.mainview'], 
    config: { 
     title:'MyApp', 
     fullscreen: true, 
     tabBarPosition: 'bottom', 
     defaults: { 
      styleHtmlContent: true 
     }, 
     items: [ 
      contain , 
      { xtype: 'settingscard' } 
     ] 
    } 

}); 

面板與橫向盒和列表

var testData = []; 
for (var i = 0; i < 40; i++) 
{ testData.push({ txt: "test" }); } 

var storesdasd = Ext.create('Ext.data.Store', { 
    data: testData 
}); 

var contain = Ext.create('Ext.Panel', { 
    fullscreen: true, 
    layout: 'hbox', 
    title: 'Schedules', 
    iconCls: 'time', 
    items: [{ 
     xtype: 'list', 
     itemTpl: '{txt}', 
     store: storesdasd, 
     flex: 1, 
     height: 'auto' 
    } 

    , { 
     html: 'message preview', 
     style: 'background-color: #759E60;', 
     flex: 2, 
     height: '100' 
    }], 
    config: { 
     title: 'Schedules', 
     iconCls: 'time' 
    } 
}); 

回答

1

而不是所有這些作品分開在不同的文件中,我把它們在Ext.application的啓動功能,這似乎工作,雖然不知道爲什麼。

0

使用:

layout: { 
    type: 'hbox', 
    align: 'stretch' 
} 

刪除子項上的高度配置。還要刪除包含面板上的全屏配置。