Sencha Touch+Phonegap 开发学习笔记之List相关

最近开始学习sencha touch+phonegap开发，在这里记录下学习历程。

（之前一直没记录的意识，所以直接从List开始，以后有空再补上）

开始使用List遇到三个问题：

1.list内容始终不显示。

2.list内容显示不完全。

3.list内容还是不显示。

是的，这是三个问题。先上源码

(注释部分是调试之后的代码)

Ext.define('gas.view.Project.ProjectInfo', {
extend: 'Ext.Container',
id:'Project_ProjectInfo',
requires: [
'Ext.TitleBar',
'Ext.List',
'gas.store.ProjectStore',
],
config: {
//layout:'card',
items: [{
xtype: 'titlebar',
docked: 'top',
title: 'List',
items: [
{
xtype:"button",
id:"btnProjectInfoLeft",
width:"60px",
height:"40px",
align: 'left',
ui: 'sencha',
html:'<img src=images/alarm.png />',

},
{
xtype:"button",
id:"btnProjectInfoRight",
width:"60px",
height:"40px",
style: "background: url(images/sound.png) no-repeat center center;",
align: 'right',

}
]
},{
xtype:"list",
id:"ProjectInfoList",
loadingText:"加载中",
fullscreed:true,
//flex:1,
//height : 100,
store: {
fields: ['name'],
data: [
{name: 'Cowper'},
{name: 'Everett'},
{name: 'University'},
{name: 'Forest'}
]
},
//store:Ext.create("gas.store.ProjectStore"),
itemTpl: [
'<div style="height:60px">',
'<div style="float:left; width:300px;"><div>编号：{[xindex]} </div><div><span>项目名称：{name}</span></div></div>',
'</div>'
].join(''),
}
]
}
});

是的，表面上来看没什么大问题但list一直不出现，不论是引用Store还是新建Store（这里一会有区别），于是到网上一顿搜寻，还凭着拿不出手的英语去了国外论坛看了看，最后终于发现了原因，原来List渲染需要gaodu!!!!! 在属性里加 height:1000; list终于出现了啊。

不过由于高度一般是不固定的这里用height不太好，这个一开始我想给它高度大一些就好，结果后来数据多的时候发现了第二个问题：List内容显示不完全，底部有一部分显示不了，这坑爹的肯定不行啊，后来才发现还是这个高度问题：若浏览器高度低于height，那么list会显示不完全。于是回来解决这个bug。

既然固定的不行，那找个自适应的，有个属性flex，设置好以后完美解决（flex:1 记住不要忘了设置Layout属性，不然显然没用）

接下来最后一个问题，List还是不显示。开始试验时是新建store，好了之后是引用store，结果又不显示了。。。最坑爹的是若用store的load是可以拿到数据的。经过一顿调试，原来是因为store里未加

autoLoad: true, //自动加载数据

加上此属性后，List终于又出现了。

总结一下list不显示原因 ：1.未设置高度

2.store未设置自动加载。