view
/**
* This Form demonstrates the fact that by virtue of inheriting from the Ext.Container
* class, an Ext.form.Panel can contain any Ext.Component.
* 这个表单演示了因为继承了Ext.Container类, Ext.form.Panel可以包含其他组件
* This includes all the
* subclasses of Ext.Panel, including the GridPanel.
*这包裹所有Ext.Panel上层类,包裹GridPanel
* The Grid demonstrates the use of creation of derived fields in a Record created using a
* custom `convert` function, and the use of column renderers.
*
* The Form demonstrates the use of radio buttons grouped by name being set by the value
* of the derived rating field.
*/
Ext.define('KitchenSink.view.form.FormGrid', {
extend: 'Ext.form.Panel',
xtype: 'form-grid',
frame: true,
title: 'Company data',
bodyPadding: 5,
layout: 'column',
// In this example, configuration is applied at initComponent time
// because it depends on themeInfo object that is generated for the
// FormGrid instance.
initComponent: function() {
Ext.apply(this, {
width: 880,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%',
msgTarget: 'side'
},
items: [{
columnWidth: 0.65,
xtype: 'gridpanel',
store: new Ext.data.Store({
model: KitchenSink.model.Company,
proxy: {
type: 'memory',
reader: {
type: 'array'
}
},
data: KitchenSink.data.DataSets.company
}),
height: 400,
columns: [{
text: 'Company',
flex: 1,
sortable: true,
dataIndex: 'name'
}, {
text: 'Price',
width: 75,
sortable: true,
dataIndex: 'price'
}, {
text: 'Change',
width: 80,
sortable: true,
renderer: this.changeRenderer,
dataIndex: 'change'
}, {
text: '% Change',
width: 100,
sortable: true,
renderer: this.pctChangeRenderer,
dataIndex: 'pctChange'
}, {
text: 'Last Updated',
width: 115,
sortable: true,
formatter: 'date("m/d/Y")',
dataIndex: 'lastChange'
}, {
text: 'Rating',
width: 60,
sortable: true,
renderer: this.renderRating,
dataIndex: 'rating'
}],
listeners: {
scope: this,
selectionchange: this.onSelectionChange
}
}, {
columnWidth: 0.35,
margin: '0 0 0 10',
xtype: 'fieldset',
title:'Company details',
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'name'
},{
fieldLabel: 'Price',
name: 'price'
},{
fieldLabel: '% Change',
name: 'pctChange'
},{
xtype: 'datefield',
fieldLabel: 'Last Updated',
name: 'lastChange'
}, {
xtype: 'radiogroup',
fieldLabel: 'Rating',
columns: 3,
defaults: {
name: 'rating' //Each radio has the same name so the browser will make sure only one is checked at once
},
items: [{
inputValue: '0',
boxLabel: 'A'
}, {
inputValue: '1',
boxLabel: 'B'
}, {
inputValue: '2',
boxLabel: 'C'
}]
}]
}]
});
this.callParent();
},
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;
},
renderRating: function(val){
switch (val) {
case 0:
return 'A';
case 1:
return 'B';
case 2:
return 'C';
}
},
onSelectionChange: function(model, records) {
var rec = records[0];
if (rec) {
this.getForm().loadRecord(rec);
}
}
});
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;
}
});