Sencha Touch：如何在hbox面板中创建列表

我有一个导航视图，其中包含一个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' 
    } 
});

来源

2013-02-07 ninjasense

而不是所有这些作品分开在不同的文件中，我把它们在Ext.application的启动功能，这似乎工作，虽然不知道为什么。

来源

2013-02-12 19:06:09 ninjasense

使用：

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

删除子项上的高度配置。还要删除包含面板上的全屏配置。

来源

2013-02-07 21:51:55

Sencha Touch：如何在hbox面板中创建列表

回答

相关问题