sencha touch 坑爹的Panel，数据不显示了...
一位同学问我一个问题：
sencha touch中xtype创建dataview死活不显示！！
版本2.3.1，MVC模式，sencha touch创建目录
程序很简单，主界面一个tabPanel,两个分页“FoodMain”“UserMain”
想在第一个分页显示一个DataView，结果死活不显示，
Main.js如下：
1 //file: app/view/Main.js 2 Ext.define('myapp.view.Main', { 3 extend: 'Ext.tab.Panel', 4 xtype: 'main', 5 requires: [ 6 'myapp.view.Foodmain', 7 'myapp.view.Usermain' 8 ], 9 config: { 10 tabBarPosition: 'bottom', 11 12 items: [ 13 { 14 xtype: 'foodmain', 15 title: '主页', 16 iconCls: 'home' 17 }, 18 { 19 xtype: 'usermain', 20 title: '用户', 21 iconCls: 'user' 22 } 23 ] 24 } 25 });
Foodmain.js如下：
1 // file: app/view/Foodmain.js 2 Ext.define('myapp.view.Foodmain', { 3 extend: 'Ext.Panel', 4 xtype: 'foodmain', 5 id: 'idfoodmain', 6 config: { 7 items: [{ 8 xtype: 'dataview', 9 width: 300, 10 store: { 11 fields: ['name', 'age'], 12 data: [ 13 {name: 'Jamie', age: 100}, 14 {name: 'Rob', age: 21}, 15 {name: 'Tommy', age: 24}, 16 {name: 'Jacky', age: 24}, 17 {name: 'Ed', age: 26} 18 ] 19 }, 20 21 itemTpl: '<div>{name} is {age} years old</div>' 22 }] 23 } 24 });
第一分页死活不显示这个dataview，其他控件一律正常。如果再创建个panel,在panel里还是不显示，反正就是死活没有
如图
----------------------------------------------
如果改成直接在Main.js，如下则第三页能正确显示，
1 // file: app/view/Main.js 2 Ext.define('myapp.view.Main', { 3 extend: 'Ext.tab.Panel', 4 xtype: 'main', 5 requires: [ 6 'myapp.view.Foodmain', 7 'myapp.view.Usermain' 8 ], 9 config: { 10 tabBarPosition: 'bottom', 11 12 items: [ 13 { 14 xtype: 'foodmain', 15 title: '主页', 16 iconCls: 'home' 17 }, 18 { 19 xtype: 'usermain', 20 title: '用户', 21 iconCls: 'user' 22 }, 23 // 直接加入Main.js中则第三页能正常显示 24 { 25 xtype: 'dataview', 26 title: 'Test', 27 iconCls: 'user', 28 width:300, 29 store: { 30 fields: ['name', 'age'], 31 data: [ 32 {name: 'Jamie', age: 100}, 33 {name: 'Rob', age: 21}, 34 {name: 'Tommy', age: 24}, 35 {name: 'Jacky', age: 24}, 36 {name: 'Ed', age: 26} 37 ] 38 }, 39 itemTpl: '<div>{name} is {age} years old</div>' 40 } 41 ] 42 } 43 });
第一页仍然没有，第三页能正确显示！
----------------------------------以上是问题，我是分割线----------------------------------
解决方案就是：
给dataview设置一个高度
Panel布局在ext之中是比较坑爹的，在Panel中再套用视图控件一定要注意控件的高宽等属性，并且这种布局也比较耗费内存会降低性能，不推荐使用。
所以用的时候能不用尽量不用，最后的代码应该是：
1 // file: app/view/Foodmain.js 2 Ext.define('myapp.view.Foodmain', { 3 extend: 'Ext.Container', 4 xtype: 'foodmain', 5 id: 'idfoodmain', 6 config: { 7 items: [{ 8 xtype: 'dataview', 9 height:'100%', 10 store: { 11 fields: ['name', 'age'], 12 data: [ 13 {name: 'Jamie', age: 100}, 14 {name: 'Rob', age: 21}, 15 {name: 'Tommy', age: 24}, 16 {name: 'Jacky', age: 24}, 17 {name: 'Ed', age: 26} 18 ] 19 }, 20 itemTpl: '<div>{name} is {age} years old</div>' 21 }] 22 } 23 });
