代码来自:Ext.js5资源包
view
/**
* This example shows how to achieve "freeze pane" locking functionality similar to Excel.
*这里例子展示怎么冻结列。看了一下与arry grid的例子里的store和model没有任何变化,所以高大上的冻结功能只需要几个属性就搞定了。Ext.js真心强大。
* Columns may be locked or unlocked by dragging them across into the opposite side, or
* by using the column's header menu.
*使用头菜单可以显示隐藏列还有冻结
* The "Price" column is not lockable, and may not be dragged into the locked side, or
* locked using the header menu.
*价格这一列是不可以被拖动的,也不能在头菜单中冻结
* It is not possible to lock all columns using the user interface. The unlocked side must
* always contain at least one column.
*不能能冻结所有的列,至少得有一个列不是冻结的
* There is also an initially hidden "Tall Header" that shows wrapping header text.'
*/
Ext.define('KitchenSink.view.grid.LockingGrid', {
extend: 'Ext.grid.Panel',
Ext.grid.feature.RowBody(为表格的每一行增加一个包含标记的body部分
requires: [
'Ext.grid.RowNumberer'
],
xtype: 'locking-grid',
store: 'Companies',
//这里是引用的store,和上一节有所不同,我觉得可能这和在什么位置引用有关系,
//在initComponent里引用也许需要new一个
columnLines: true,
height: 350,
width: 600,
title: 'Locking Grid',
initComponent: function () {
this.columns = [{
xtype: 'rownumberer'
}, {
text : 'Company Name',
locked : true,
width : 230,
sortable : false,
dataIndex: 'name'
}, {
text : 'Price',
lockable: false,
width : 80,
sortable : true,
formatter: 'usMoney',
dataIndex: 'price'
}, {
text : 'Tall<br>Header',//原来折行是这么折的
hidden : true,
width : 70,
sortable : false,
renderer : function(val) {
return Math.round(val * 3.14 * 100) / 10;
},
dataIndex: 'change'
}, {
text : 'Change',
width : 90,
sortable : true,
//渲染器,总之改变表格数据样式就使用这个方法
renderer : function(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
},
dataIndex: 'change'
}, {
text : '% Change',
width : 105,
sortable : true,
renderer : function(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
},
dataIndex: 'pctChange'
}, {
text : 'Last Updated',
width : 135,
sortable : true,
formatter: 'date("m/d/Y")',
dataIndex: 'lastChange'
}];
this.callParent();
}
});
因为看过arrya grid的代码,这一段代码看起来简单多了,所以就是应该多看
store
Ext.define('KitchenSink.store.Companies', {
extend: 'Ext.data.ArrayStore',
alias: 'store.companies',
//看这里,跟上一个(4)比,(4)里的store可没有给仓库命别名,因此之前的引用方式是另一种引用方式。这就是两者的区别
model: 'KitchenSink.model.Company',
//在仓库里引用模型
data: [
[0, '3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Manufacturing'],
[1, 'Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', 'Manufacturing'],
[2, 'Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', 'Manufacturing'],
[3, 'American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am', 'Finance'],
[4, 'American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am', 'Services'],
[5, 'AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am', 'Services'],
[6, 'Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am', 'Manufacturing'],
[7, 'Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am', 'Services'],
[8, 'Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am', 'Finance'],
[9, 'E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am', 'Manufacturing'],
[10, 'Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am', 'Manufacturing'],
[11, 'General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am', 'Manufacturing'],
[12, 'General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am', 'Automotive'],
[13, 'Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am', 'Computer'],
[14, 'Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am', 'Manufacturing'],
[15, 'Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am', 'Computer'],
[16, 'International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am', 'Computer'],
[17, 'Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am', 'Medical'],
[18, 'JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am', 'Finance'],
[19, 'McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am', 'Food'],
[20, 'Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am', 'Medical'],
[21, 'Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am', 'Computer'],
[22, 'Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am', 'Medical'],
[23, 'The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am', 'Food'],
[24, 'The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am', 'Retail'],
[25, 'The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am', 'Manufacturing'],
[26, 'United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am', 'Computer'],
[27, 'Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am', 'Services'],
[28, 'Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am', 'Retail'],
[29, 'Walt Disney Company (The) (Holding Company)', 29.89, 0.24, 0.81, '9/1 12:00am', 'Services']
]
}, function(cls) {
var data = cls.prototype.config.data;
for(var i = 0; i < data.length; i++){
data[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. ');
}
});
model
Ext.define('KitchenSink.model.Company', {
extend: 'KitchenSink.model.Base',
fields: [
{name: 'name'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'},
// Trend begins with the cerrent price. Changes get pushed onto the end
{
name: 'trend',
convert: function(value, record) {
// Record creation call with no trend there: start with current price
if (value === null) {
return [record.get('price')];
}
return Ext.isArray(value) ? value : [ value ];
}
},
// Rating dependent upon performance 0 = best, 2 = worst
{
name: 'rating',
type: 'int',
convert: function(value, record) {
var pct = record.get('pctChange');
if (pct < 0)
return 2;
if (pct < 1)
return 1;
return 0;
}
}
],
// Override to keep the last 10 prices in the trend field
set: function(fieldName, value) {
if (fieldName === 'price') {
this.callParent([{
price: value,
trend: this.addToTrend(fieldName.price)
}]);
}
else {
if (typeof fieldName !== 'string' && 'price' in fieldName) {
fieldName.trend = this.addToTrend(fieldName.price);
}
this.callParent(arguments);
}
},
// Override to keep the last 10 prices in the trend field
addToTrend: function(value) {
var trend = this.data.trend.concat(value);
if (trend.length > 10) {
Ext.Array.splice(trend, 0, trend.length - 10);
}
return trend;
}
});