关闭

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

标签: Sencha Touch2Ext.List高度自适应
715人阅读 评论(0) 收藏 举报
分类:

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


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:115042次
    • 积分:1889
    • 等级:
    • 排名:千里之外
    • 原创:64篇
    • 转载:70篇
    • 译文:1篇
    • 评论:16条
    最新评论