view
Ext.define('KitchenSink.view.grid.FramingButtons', {
extend: 'Ext.grid.Panel',
xtype: 'framing-buttons',
store: 'Companies',
columns: [
{text: "Company", flex: 1, sortable: true, dataIndex: 'name'},
{text: "Price", width: 120, sortable: true, formatter: 'usMoney', dataIndex: 'price'},
{text: "Change", width: 120, sortable: true, dataIndex: 'change'},
{text: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
{text: "Last Updated", width: 120, sortable: true, formatter: 'date("m/d/Y")', dataIndex: 'lastChange'}
],
columnLines: true,
selModel: {
type: 'checkboxmodel',
listeners: {
selectionchange: 'onSelectionChange'
}
},
// This view acts as the default listener scope for listeners declared within it.
//这个视图被设置为默认的监听域（ defaultListenerScope）
// For example the selectionModel's selectionchange listener resolves to this.
defaultListenerScope: true,
// This view acts as a reference holder for all components below it which have a reference config
//这个视图是所有具有引用配置组件的引用持有者（referenceHolder）
// For example the onSelectionChange listener accesses a button using its reference
referenceHolder: true,
//getReferences() 返回一个持有视图后裔键控的对象。这个对象在元素被上级容器添加或者删除是没有效的。
//setDisabled 启用或者禁用当前组件。参数是布尔值。
//
onSelectionChange: function(sm, selections) {
this.getReferences().removeButton.setDisabled(selections.length === 0);
},
// inline buttons
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
//ui (字符串) 设置组件样式. 可以是一个字符串或者字符串数组 默认值为:"default"
ui: 'footer',
//pack(字符串) 控制子组件如何被打包在一起，有效值为：start (默认，放在左边) center end(右边)
layout: {
pack: 'center'
},
items: [{
minWidth: 80,
text: 'Save'
},{
minWidth: 80,
text: 'Cancel'
}]
}, {
xtype: 'toolbar',
items: [{
text: 'Add Something',
tooltip: 'Add a new row',//提示语
iconCls: 'add'
}, '-', {
text: 'Options',
tooltip: 'Set options',
iconCls: 'option'
},'-',{
reference: 'removeButton', // 这是为了onSelectionChange中可以得到子组件的引用
text: 'Remove Something',
tooltip: 'Remove the selected item',
iconCls:'remove',
disabled: true
}]
}],
height: 300,
frame: true,
title: 'Support for standard Panel features such as framing, buttons and toolbars',
iconCls: 'icon-grid',
initComponent: function() {
this.width = 750;
this.callParent();
}
});getReferences()的用法
假如有三个组件有引用配置，并且值分别是”foo”,”bar”,”baz”，这三个组件可能存在于容易的某些层中。
onClick: function () {
var refs = this.getReferences();
// using "refs" we can access any descendant by its "reference"
//descendant 后代
refs.foo.getValue() + refs.bar.getValue() + refs.baz.getValue();
}如果这个组件被分配了引用（reference），这个引用并没有被包含在返回的对象中。因为引用只是被理解为属于具有referenceHolder配置的祖先容器。
返回：一个包含每一个子引用的对象。如果容器没有一个后代有reference配置那么返回值是null。
store
Ext.define('KitchenSink.store.Companies', {
extend: 'Ext.data.ArrayStore',
alias: 'store.companies',
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;
}
});
扫一扫
5013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
