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

原创 2016年05月31日 19:33:48

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


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

使用sencha touch控件制作list界面

显示效果: html页面上的js引用: Pandora --> index.js中代...

sencha touch list demo

【翻译】探究Ext JS 5和Sencha Touch的布局系统

布局系统是Sencha框架中最强大和最有特色的一个部分。布局要处理应用程序中每一个组件的尺寸和位置。在Ext JS和Sencha Touch直接有许多相似之处,尤其是现在Ext JS 5开始支持平板更...

sencha touch 的Ext.menu组件学习

Sencha menu学习 http://cdn.sencha.io/touch/sencha-touch-2.3.1/examples/kitchensink/index.html#demo/me...

Sencha Touch Ext.Carousel 切换 Bug

没有什么比测试和工作的应用程序感到沮丧,只有打开它有一天,发现它... 不工作。这是Sencha Touch开发人员最近会有的经验,因为最新的Chrome更新(Chrome 43)在Sencha T...

【翻译】为Ext JS和Sencha Touch开发人员准备的应用程序监测(App Inspector)

作为一个免费的Chrome扩展,Sencha应用程序监测有助于你通过以下方式去调试应用程序: 组件监测:快速、轻松地导航组件树,在DOM中高亮显示组件,且可以查看他们的属性。 存储...

解析Sencha Touch中Ext常用函数

Sencha Touch中Ext常用函数是本文要介绍的内容,主要是来学习Sencha Touch中EXT的函数的使用方法,ext常用函数分类:sencha touch 在框架中,Ext的常用静态方法...

【翻译】在Ext JS和Sencha Touch中创建自定义布局

布局系统是Sencha框架中最强大和最独特的一部分。布局会处理应用程序中每个组件的大小和位置,因而,不需要手动去管理那些碎片。Ext JS与Sencha Touch的布局类有许多相似之处,最近在 Iv...

Sencha Touch 自定义List的三种实现方案(威老)

在sencha touch的list里嵌入自己想要的控件,有多种选择方案。 其中一种是直接在itemTpl相应的地方加上html标签(如)创建html控件。效果如下: 蛋疼了吧。。。风...

Sencha Touch 2.0 组件:Carousels、List、TabPanel 之用法简介

Carousels 组件 Carousels,翻译过来“传送带”的意思,顾名思义,仿佛屏幕背后就有一传送带,用户发出向左或向右的指令,即可命令传送带“移动”。移动设备上的屏幕就是当前显示的内容。在中...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)