ExtJs4_BindingGridToForm示例浅谈;

最新推荐文章于 2017-03-10 16:21:10 发布

cenyebao

最新推荐文章于 2017-03-10 16:21:10 发布

阅读量2.4k

点赞数

分类专栏： 23JS_ExtJs 文章标签： extjs function float performance flex layout

本文链接：https://blog.csdn.net/cenyebao/article/details/7302402

版权

23JS_ExtJs 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

/**
* ExtJs4
* =》BindingGridToForm示例
* 亮点：grid与form的交互；
*/
Ext.require([
 "Ext.data.*",
 "Ext.form.*",
 "Ext.grid.Panel",
 "Ext.layout.container.Column"
]);
Ext.onReady(function() {

 Ext.QuickTips.init();
 var bd = Ext.getBody();

 // store data(static)
 var storedata = [
 ['大唐牛肉无限公司', 1100.00, -0.01, -0.013, '2012-02-27'],
 ['大唐武器无限公司', 1200.00, 0.02, 0.033, '2012-02-28'],
 ['大唐资源无限公司', 1300.00, -0.03, -0.043, '2012-02-29'],
 ['大唐人才无限公司', 1400.00, 0.04, 0.053, '2012-03-27'],
 ['大唐环境维护无限公司', 1500.00, 0.05, 0.023, '2012-03-26'],
 ['大唐矿产无限公司', 1600.00, -0.06, -0.063, '2012-03-25'],
 ['大唐精矿无限公司', 1700.00, 0.07, 0.073, '2012-03-24'],
 ['大唐铁矿无限公司', 1800.00, 0.08, 0.083, '2012-03-23'],
 ['大唐铝土矿无限公司', 1900.00, 0.09, 0.093, '2012-03-22'],
 ['大唐煤资源无限公司', 2000.00, -0.022, -0.031, '2013-02-21'],
 ['大唐天然气无限公司', 1110.00, 0.023, 0.032, '2012-03-20'],
 ['大唐太阳能无限公司', 1220.00, -0.024, -0.033, '2012-03-19'],
 ['大唐激光武器无限公司', 1330.00, 0.025, 0.034, '2012-03-18'],
 ['大唐汽车无限公司', 1450.00, 0.026, 0.053, '2012-03-17'],
 ['大唐卡车配件无限公司', 1660.00, 0.027, 0.036, '2012-03-16']
 ];

 // store
 var dstore = Ext.create('Ext.data.ArrayStore', {
 fields: [{
 name: "company"
 }, {
 name: "price", type: "float"
 }, {
 name: "change", type: "float"
 }, {
 name: "pctChange", type: "float"
 }, {
 name: "lastChange", type: "date", dateFormat: "Y-m-d"
 },
 // Rating field dependent upon performance 0=best(A), 2=worst(C);
 {
 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;
 }
 }],
 data: storedata
 });

 // 自定义行内容渲染：
 function change(val) {
 if(val > 0) {
 return ''+ val +'';
 } else if(val < 0) {
 return ''+ val +'';
 }

 return val;
 }
 function pctChange(v) {
 if(v!=0) {
 return Ext.String.format('{1}%', v>0?"green":"red", v);
 } else {
 return v;
 }
 }
 function rating(v) {
 if(v==0) return "A";
 if(v==1) return "B";
 if(v==2) return "C";
 }

 bd.createChild({tag: 'h2', html: 'Using a Grid with a Form'});

 // form-grid
 var gridForm = Ext.create('Ext.form.Panel', {
 id: "compony-form",
 renderTo: bd,

 title: "TheCompanyData",
 frame: true,
 width: 750,
 bodyPadding: 5,
 layout: 'column', // 列布局；

 fieldDefaults: {
 labelAlign: "left",
 msgTarget: "side"
 },

 items: [{ // grid
 columnWidth: 0.60,
 xtype: "gridpanel",
 store: dstore,
 title: "公司概况",

 columns: [{
 id: 'company',
 text: "公司名称",
 dataIndex: "company",
 sortable: true,
 flex: 1 // grid宽度减去固定列宽以后占一份；
 }, {
 text: "公司资产",
 dataIndex: "price",
 width: 70,
 sortable: true
 }, {
 text: "资产增值量",
 dataIndex: "change",
 width: 75,
 sortable: true,
 renderer: change
 }, {
 text: "资产增值百分比",
 dataIndex: "pctChange",
 width: 90,
 sortable: true,
 renderer: pctChange
 }, {
 text: "更新时间",
 dataIndex: "lastChange",
 width: 85,
 sortable: true,
 align: "center",
 renderer: Ext.util.Format.dateRenderer('Y-m-d')
 }, {
 text: "等级",
 dataIndex: "rating",
 width: 30,
 sortable: true,
 align: "center",
 renderer: rating
 }],
 // 监听grid事件：
 listeners: {
 selectionchange: function(model, records) {
 if(records[0]) { // 加载进form表单中；
 this.up('form').getForm().loadRecord(records[0]);
 }
 }
 }
 }, { // form
 columnWidth: 0.4,
 margin: '0 0 0 10',
 xtype: "fieldset",
 title: '公司详细信息',
 defaults: {
 width: 240,
 labelWidth: 90,
 labelAlign: "right"
 },
 defaultType: "textfield",
 items: [{
 fieldLabel: "公司名称",
 name: "company"
 }, {
 fieldLabel: "公司资产",
 name: "price"
 }, {
 fieldLabel: "资产增值量",
 name: "change"
 }, {
 fieldLabel: "资产增值百分比",
 name: "pctChange"
 }, {
 fieldLabel: "更新时间",
 name: "lastChange",
 xtype: "datefield",
 format: "Y-m-d"
 }, {
 fieldLabel: "等级",
 xtype: "radiogroup",
 columns: 3,
 defaults: {
 name: "rating"
 },
 items: [{
 inputValue: "0",
 boxLabel: "A"
 }, {
 inputValue: "1",
 boxLabel: "B"
 }, {
 inputValue: "2",
 boxLabel: "C"
 }]
 }]
 }]
 });

 // 给grid默认选择第一行：
 gridForm.child('gridpanel').getSelectionModel().select(0);
});