gridpanel中的列的级联变化

列的级联变化，就是某一列的变化，会引起其他列的变化，这是一个常用到的功能，但在extjs中，如果你对celledit不了解，估计找不到解决方案。

效果图如下：

点击数量变化，小计会根据单价*数量变化。具体代码如下：

 1         Ext.Loader.setConfig({
 2         enabled:true,
 3         });
 4 
 5         Ext.require([      
 6         'Ext.data.*',
 7         'Ext.grid.*',
 8         'Ext.selection.* ',
 9         'Ext.util.*',
10         'Ext.Ajax.*'
11         ]);
12 
13         Ext.onReady(function () {
14             
15 
16             Ext.define("GoodList",{
17             extend:"Ext.data.Model",
18             fields:[{
19                            name:"name",type:"string"
20                      },{
21                          name:"info",type:"string"
22                    },{
23                       name:"price",type:"float"
24                    },{
25                       name:"amount",type:"float"
26                    },{
27                      name:"total",type:"float"
28                    }]
29             });
30 
31             var userstore=Ext.create("Ext.data.Store",{
32             model:"GoodList",
33              data:[{ name:"摩托罗拉 原装耳机", info:"MOTO原装商务型黑色",price:28.8,amount:1,total:28.8}]
34             });
35 
36             var grid=Ext.create("Ext.grid.Panel",{
37             store:userstore,
38             columnLines:true,
39             width:580,
40             title:"gridpanel中列的级联变化", 
41             renderTo:Ext.getBody(),
42             viewConfig:{stripeRows:true},    
43             columns:[Ext.create("Ext.grid.RowNumberer"),
44             {
45               text:"商品",
46               dataIndex:"name",
47               width:120
48             },{
49                text:"商品信息",
50                dataIndex:"info",
51                width:120
52             },{
53                text:"单价",
54                dataIndex:"price",
55                width:60
56             },{
57                text:"数量",
58                dataIndex:"amount",
59                width:60,
60                editor:{
61                               xtype:"numberfield"
62                         }
63             },{
64                  text:"小计",
65                 dataIndex:"total",
66                 width:60
67             }],
68             plugins:Ext.create("Ext.grid.plugin.CellEditing",{
69             clicksToEdit:1,
70             listeners:{
71              edit:function(edit,e){
72                   var price=e.record.get("price");
73                   var amount=e.record.get("amount");
74                   if(e.field=="amount")
75                   {
76                       e.record.set("total",price*amount);
77                   }
78                    e.record.commit();
79                 }
80              }           
81             })
82             });
83 
84 
85         });

View Code

主要是cellediting插件中的edit事件，在4.1的api中有详细的参数说明，为了大家方便，我在这里也截图一份说明如下，希望对你有所帮助

转载于:https://www.cnblogs.com/mayantao/p/3332962.html