sencha-touch2.0 mvc中使用grid注意

Sencha Touch 交流 QQ 群 224711028 欢迎您的加入。

mitchellsimoens / Ext.ux.touch.grid 地址：https://github.com/mitchellsimoens/Ext.ux.touch.grid

使用时注意事项：1.将Ext.ux.touch.grid这个文件夹复制到你的应用的根目录下：

2.在view中不可直接将extend属性修改为：Ext.ux.touch.grid.View，这样虽然能显示，但是grid的features将无法使用。

3.可以在panel中引用xtype：‘touchgridpanel’，如此便可使用grid并附加属性配置项

代码如下：

Ext.define('MVCTest.view.ListWrap', {
    extend: 'Ext.Panel',
    //alias : 'widget.customers',
	xtype  : 'mvctest-listwrap',
    config:{
        fullscreen:true,
        layout : 'fit',
        items:[
            {
				xtype:'touchgridpanel',
				store      : 'GridStore',
			   features   : [
                    {
                        ftype    : 'Ext.ux.touch.grid.feature.HeaderMenu',
                        launchFn : 'initialize'
                    },
                    {
                        ftype    : 'Ext.ux.touch.grid.feature.Sorter',
                        launchFn : 'initialize'
                    }
                ],
					
					columns   : [
					{
						header    : 'Company',
						dataIndex : 'company',
						style     : 'padding-left: 1em;',
						width     : '40%',
						sortable  : true,
						filter    : { type : 'string' }
					},
					{
						header    : 'Price',
						dataIndex : 'price',
						style     : 'text-align: center;',
						width     : '15%',
						sortable  : true,
						filter    : { type : 'numeric' }
					},
					{
						header    : 'Change',
						dataIndex : 'change',
						cls       : 'centered-cell',
						width     : '15%',
						renderer  : function(value, values) {
							var color = (value > 0) ? '009933' : 'FF0000';
							return '<span style="color: #' + color + ';">' + value + '</span>';
						}
					},
					{
						header    : '% Change',
						dataIndex : 'pct',
						cls       : 'centered-cell',
						width     : '15%',
						sortable  : true,
						renderer  : function(value, values) {
							var color = (value > 0) ? '009933' : 'FF0000';
							return '<span style="color: #' + color + ';">' + value + '</span>';
						}
					},
					{
						header    : 'Last Updated',
						dataIndex : 'updated',
						hidden    : false,
						style     : 'text-align: right; padding-right: 1em;',
						width     : '15%'
					}
				]
				
				
				
				
            }
        ]
    }
});

4.有的属性如果添加了，也无法使用，可在app.js上在requires中引用