Sencha touch中Ext.List的使用及高度自适应

最近在做 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

关注公众号，分享干货，讨论技术