Ext JS Kitchen Sink [Learning by doing](2)ArrayGrid

一、数据

Ext.define('Company', {
	 extend: 'Ext.data.Model',
	 fields: [
		 {name: 'company', type: 'string'},
		 {name: 'price', type: 'string'},
		 {name: 'change', type: 'string'},
		 {name: 'pctChange', type: 'string'},
		 {name: 'lastChange', type: 'string'}
	 ]
 });
 var Companies = Ext.create('Ext.data.Store', {
	 model: 'Company',
	 //报错，不能找到buffered属性；通过添加storeid解决
	 storeId:'Companies',
	 data:[
		 {company: '3m Co', price: '71.72', change: '0.02', 
			pctChange: '0.03%', lastChange: '09/01/2015' },
		 {company: 'Alcoa Inc', price: '29.01', change: '0.42', 
			pctChange: '1.47%', lastChange: '09/01/2015' },
		 {company: 'Altria Group Inc', price: '83.81', change: '0.28', 
			pctChange: '0.34%', lastChange: '09/01/2015' },
		 {company: 'American Express Company', price: '52.55', change: '0.01', 
			pctChange: '0.02%', lastChange: '09/01/2015' },
		 {company: 'American International Group, Inc', price: '64.13', change: '0.31', 
			pctChange: '0.49%', lastChange: '09/01/2015' },
		 {company: 'AT&T Inc.', price: '31.61', change: '-0.48', 
			pctChange: '-1.54%', lastChange: '09/01/2015' },
		 {company: 'Boeing Co.', price: '75.43', change: '0.53', 
			pctChange: '0.71%', lastChange: '09/01/2015' },
		 {company: 'Caterpillar Inc.', price: '67.27', change: '0.92', 
			pctChange: '1.39%', lastChange: '09/01/2015' }
	]
 });

二、ArrayGrid

Ext.onReady(function(){
	//初始化智能提示
	Ext.QuickTips.init();
	var cp = Ext.create('Ext.state.CookieProvider', {
		expires: new Date(new Date().getTime()+(1000*60*60*24*30))//30D
	});
	Ext.state.Manager.setProvider(cp);
	
	Ext.define('ArrayGrid', {
		extend: 'Ext.grid.Panel',
		store: 'Companies',
		/*
			保存当前状态，保证刷新或者跨页面加载后页面状态一致
			必须实例化Ext.state.Provider，
			选择CookieProvider或者LocalStorageProvider
		*/
		stateful: true,
		stateId: 'stateGrid',
		collapsible: true,
		height: 350,
		title: 'Array Grid',
		viewConfig: {
			stripeRows: true,
			enableTextSelection: true
		},

		initComponent: function () {
			this.width = 650;
			this.columns = [
				{
					text     : 'Company',
					flex     : 1,
					sortable : false,
					dataIndex: 'company'
				},
				{
					text     : 'Price',
					width    : 75,
					sortable : true,
					//改变渲染到单元格的值和样式
					renderer : 'usMoney',
					dataIndex: 'price'
				},
				{
					text     : 'Change',
					width    : 80,
					sortable : true,
					renderer : function(val) {
						if (val > 0) {
							return '<span style="color:' + '#73b51e' + ';">' + val + '</span>';
						} else if (val < 0) {
							return '<span style="color:' + '#cf4c35' + ';">' + val + '</span>';
						}
						return val;
					},
					dataIndex: 'change'
				},
				{
					text     : '% Change',
					width    : 100,
					sortable : true,
					renderer : function(val) {
						if (val > 0) {
							return '<span style="color:' + '#73b51e' + '">' + val + '%</span>';
						} else if (val < 0) {
							return '<span style="color:' + '#cf4c35' + ';">' + val + '%</span>';
						}
						return val;
					},
					dataIndex: 'pctChange'
				},
				{
					text     : 'Last Updated',
					width    : 115,
					sortable : true,
					renderer : Ext.util.Format.dateRenderer('m/d/Y'),
					dataIndex: 'lastChange'
				},
				{
					menuDisabled: true,
					sortable: false,
					xtype: 'actioncolumn',
					width: 50,
					items: [{
						//指定CSS图片
						iconCls: 'sell-col',
						//智能提示
						tooltip: 'Sell stock',
						//图标的点击事件处理函数
						handler: function(grid, rowIndex, colIndex) {
							var rec = grid.getStore().getAt(rowIndex);
							Ext.Msg.alert('Sell', 'Sell ' + rec.get('company'));
						}
					}, {
						/*
							获取需要应用到图标的CSS类名
							参数：详见Ext.grid.column.Action配置项items
						*/
						getClass: function(v, meta, rec) {
							if (rec.get('change') < 0) {
								return 'alert-col';
							} else {
								return 'buy-col';
							}
						},
						//返回tooltip
						getTip: function(v, meta, rec) {
							if (rec.get('change') < 0) {
								return 'Hold stock';
							} else {
								return 'Buy stock';
							}
						},
						//图标的点击事件处理函数
						handler: function(grid, rowIndex, colIndex) {
							var rec = grid.getStore().getAt(rowIndex),
								action = (rec.get('change') < 0 ? 'Hold' : 'Buy');

							Ext.Msg.alert(action, action + ' ' + rec.get('company'));
						}
					}]
				}
			];

			this.callParent();
		},
		renderTo: "ArrayGrid"
	});
	Ext.create('ArrayGrid',{});
});