view
/**
* This example demonstrates using a custom paging display.
* 这里例子主要展示咋个分页
*/
Ext.define('KitchenSink.view.grid.ProgressBarPager', {
extend: 'Ext.grid.Panel',
requires: [
'Ext.data.*',//.*的意思是打开data路径下的所有文件
'Ext.grid.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ux.ProgressBarPager',
'KitchenSink.model.Company'
],
xtype: 'progress-bar-pager',
height: 320,
frame: true,
title: 'Progress Bar Pager',
initComponent: function() {
this.width = 650;
var store = new Ext.data.Store({
model: KitchenSink.model.Company,
remoteSort: true,//设置为 true 则将所有的排序操作推迟到服务器. 如果设置为 false, 则在客户端本地排序.
pageSize: 10,//使用分页的两步 1、在store里加pageSize 2、在view里加pagingtoolbar
proxy: {
type: 'memory',
enablePaging: true,
data: KitchenSink.data.DataSets.company,
reader: {
type: 'array'
}
}
});
//将配置的所有属性都复制到指定的对象,这里完全不懂为啥要这么做20151218
Ext.apply(this, {
store: store,
columns: [{
text: 'Company',
sortable: true,
dataIndex: 'name',
flex: 1
},{
text: 'Price',
sortable: true,
formatter: 'usMoney',
dataIndex: 'price',
width: 75
},{
text: 'Change',
sortable: true,
renderer: this.changeRenderer,
dataIndex: 'change',
width: 80
},{
text: '% Change',
sortable: true,
renderer: this.pctChangeRenderer,
dataIndex: 'pctChange',
width: 100
},{
text: 'Last Updated',
sortable: true,
dataIndex: 'lastChange',
width: 115,
formatter: 'date("m/d/Y")'
}],
//使用分页
bbar: {
xtype: 'pagingtoolbar',
pageSize: 10,//一页显示多少条数据,比较容易认为是分页数
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()
}
});
this.callParent();
},
afterRender: function(){
this.callParent(arguments);
this.getStore().load();
},
changeRenderer: 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;
},
pctChangeRenderer: 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;
}
});
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;
}
});