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


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/molashaonian/article/details/51548236

sencha touch list 批量选择扩展

修改后的代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...
  • qiao0078
  • qiao0078
  • 2016-01-20 13:19:11
  • 827

Sencha Touch 自定义List的三种实现方案

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

Ext.js5表单—购物车付款表(表单绑值copy)( listConfig)(43)

view/** * This shows an example of a common shopping cart checkout form. It demonstrates uses * of...
  • TUD2014
  • TUD2014
  • 2015-12-21 14:56:30
  • 997

Ext.dataview.List

xtype:list 也可以使用Ext.List 自定义风格的DataViiew,允许使用分组、索引、图标和Disclosure。 Ext.create('Ext.List', {    fu...
  • pengxianchen
  • pengxianchen
  • 2012-07-24 13:23:36
  • 1123

sencha touch 里Ext.list的简单使用

var list = new Ext.List({           id: 'myList',           floating: true,//设置此属性后才可以使用 heigh...
  • csyuyaoxiadn
  • csyuyaoxiadn
  • 2013-10-15 17:12:09
  • 1122

sencha touch 两个selectfield之间如何设置间距

如图lz遇到了这样的一个问题: Sencha Touch 交流 QQ 群 224711028 欢迎您的加入。   如何在两个selectfield之间设置间距, 试验之后发...
  • xiaoguang44
  • xiaoguang44
  • 2012-06-06 22:50:14
  • 1726

sencha touch list css(样式) 详解

1 /* 2 *自定义列表页面 3 */ 4 Ext.define('app.view.util.MyList', { 5 alternateClassName: 'myList', ...
  • dyllove98
  • dyllove98
  • 2013-06-18 21:06:11
  • 2341

<em>sencha</em> <em>touch</em> <em>list</em> demo

举报人: 被举报人: h310111901 举报的资源分: 3 *类型: *详细原因: 取  消 提  交 <em>sencha</em> <em>touch</em> <em>list</em> demo 3积分 立即下载 ...
  • 2018年04月17日 00:00

Sencha touch中Ext.List如何高度自适应的解决方法

在使用Sencha Touch2.0的List控件时我们都知道必须指定List的Height,否则将不会显示,而我们在使用List的时候往往是将其放在页面的一个版块,而不会是简单的         ...
  • harlow321
  • harlow321
  • 2014-03-20 13:43:32
  • 1638

sencha touch学习笔记一:web工程下的示例

网上不少教程说引用Sencha Touch的两个文件就可以用sencha编程了,可是我试了一下,结果不理想。 新建一个web工程,在新建的HTML文件中引用sencha touch解压包中的senc...
  • u011439289
  • u011439289
  • 2014-11-30 15:56:05
  • 1240
收藏助手
不良信息举报
您举报文章:Sencha touch中Ext.List的使用及高度自适应
举报原因:
原因补充:

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