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

4次阅读

一、数据

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',{});});

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

正文完   
相关文章:
随机文章
shopee海运重量和填写规范:是否可以改重量?如何填写产品重量?

shopee海运重量和填写规范:是否可以改重量?如何填写产品重量?

在进行跨境电商业务时,海运是一种比较常见的运输方式。而针对shopee平台的海运重量和填写规范,在选择海运运输...
m2c模式的平台有哪些?M2C模式的运营需要什么条件?

m2c模式的平台有哪些?M2C模式的运营需要什么条件?

随着互联网的发展,越来越多的企业开始采用M2C模式来拓展业务。M2C模式是一种以制造商和消费者为核心的经营模式...
亚马逊在新加坡试行Easy Ship:了解新服务

亚马逊在新加坡试行Easy Ship:了解新服务

亚马逊在新加坡试行Easy Ship:了解新服务 亚马逊是全球最大的在线零售商之一,其业务范围涵盖了电子产品、...
速卖通的收款是否需要使用对公账号?收款规则是什么样的?

速卖通的收款是否需要使用对公账号?收款规则是什么样的?

随着国际贸易的不断发展,越来越多的商家开始将目光投向了跨境电商平台。其中,速卖通作为全球最大的跨境电商平台之一...
2022年新淘宝怎么做老顾客营销?有什么好处?

2022年新淘宝怎么做老顾客营销?有什么好处?

成交之后可以赠送合理金额的店铺抵用券,在适当的时候给予提醒,这样可以有效的促 成二次交易。 一个店铺要发展壮大...