gridpanel中的列的级联变化

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

效果图如下：

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

        Ext.Loader.setConfig({
        enabled:true,
        });

        Ext.require([      
        'Ext.data.*',
        'Ext.grid.*',
        'Ext.selection.* ',
        'Ext.util.*',
        'Ext.Ajax.*'
        ]);

        Ext.onReady(function () {
            

            Ext.define("GoodList",{
            extend:"Ext.data.Model",
            fields:[{
                           name:"name",type:"string"
                     },{
                         name:"info",type:"string"
                   },{
                      name:"price",type:"float"
                   },{
                      name:"amount",type:"float"
                   },{
                     name:"total",type:"float"
                   }]
            });

            var userstore=Ext.create("Ext.data.Store",{
            model:"GoodList",
             data:[{ name:"摩托罗拉 原装耳机", info:"MOTO原装商务型黑色",price:28.8,amount:1,total:28.8}]
            });

            var grid=Ext.create("Ext.grid.Panel",{
            store:userstore,
            columnLines:true,
            580,
            title:"gridpanel中列的级联变化", 
            renderTo:Ext.getBody(),
            viewConfig:{stripeRows:true},    
            columns:[Ext.create("Ext.grid.RowNumberer"),
            {
              text:"商品",
              dataIndex:"name",
              120
            },{
               text:"商品信息",
               dataIndex:"info",
               120
            },{
               text:"单价",
               dataIndex:"price",
               60
            },{
               text:"数量",
               dataIndex:"amount",
               60,
               editor:{
                              xtype:"numberfield"
                        }
            },{
                 text:"小计",
                dataIndex:"total",
                60
            }],
            plugins:Ext.create("Ext.grid.plugin.CellEditing",{
            clicksToEdit:1,
            listeners:{
             edit:function(edit,e){
                  var price=e.record.get("price");
                  var amount=e.record.get("amount");
                  if(e.field=="amount")
                  {
                      e.record.set("total",price*amount);
                  }
                   e.record.commit();
                }
             }           
            })
            });


        });

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