最近在做 Sencha 的一个项目，需要用到 Ext.List 来列出所需商品及相关信息，平时我们使用 Ext.List 都是使用 fullscreen：true 来设置 List 全屏显示，
但是现在需求是 Panel 中嵌套 一个 List 效果如下图所示：
显然这时候是不能用 fullscreen：true 的，所以我们要给它设置显示的高度，通过 setHeight() 的方法，
如果没有设置高度是不会显示的，这里要注意一下。
代码实现如下：
<span style="font-size:14px;">Ext.define('GoodInfo',{
extend: 'Ext.data.Model',
config: {
fields: ['title', 'fu_title', 'price', 'img_url']
}
});</span>
<span style="font-size:14px;">
var goodStore = Ext.create('Ext.data.Store',{
model: 'GoodInfo',
autoLoad: true,
proxy: {
type: 'ajax',
url: './json/goods.json',
reader: {
type: 'json',
rootProperty: 'goods'
}
}
});</span>
<span style="font-size:14px;">
var goodTemplate = new Ext.XTemplate(
'<tpl for=".">',
'<div class="Book-item">',
'<div class="Book_img"><img src="{img_url}"/></div>',
'<div class="Book_info">',
'<h2>{title}</h2><br><h3>{fu_title}</h3><br><h2>{price}</h2>',
'<p>{description:ellipsis(40)}</p>',
'</div>',
'</div>',
'</tpl>'
);</span>
<span style="font-size:14px;">//这个是固定高度的 List 实现
var myList = Ext.create('Ext.List',{
height: 200, //这个高度设置很重要，没有高度是不会显示的
store: goodStore,
itemTpl: goodTemplate
}); </span>
<span style="font-size:14px;">//这个是高度自适应的 List 实现
Ext.define('MyList', {
extend: 'Ext.List',
xtype: 'commentList',
cls: 'myList',
config: {
itemHeight: 120,
scrollable: {
disabled: true
},
store: goodStore,
itemTpl: goodTemplate
},
refresh: function() {
var count = this.getStore().getCount();
if(count){
this.setHeight(this.getItemHeight()* count);
}
this.callParent(arguments);
}
}); </span>
<span style="font-size:14px;">
Ext.define('Ext.ux.HomePanel', {
extend : 'Ext.form.Panel', // 继承 Ext.form.Panel 实现面板可以滚动，Ext.Panel 默认不可以
xtype : ['homepanel'],
requires: ['MyList'],
config : {
layout: {
type: 'vbox'
},
items : [
<span style="white-space:pre"> </span>{
<span style="white-space:pre"> </span>xtype: 'commentList' //把 List 添加到 Panel 上
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>]
<span style="white-space:pre"> </span>}
});
</span>
相关文章分享：
http://www.ithao123.cn/content-8144041.html
http://blog.sina.com.cn/s/blog_43b191a901017lmv.html
http://www.cnblogs.com/kenshincui/archive/2011/01/02/1924035.html