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';}},//返回tooltipgetTip: 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',{});});

，每一个成功者都有一个开始。勇于开始，才能找到成功的路。