有关EXTJS中editgrid相关

       EXTJS 中editgrid是可编辑的一个很好用的grid表格吧。

       在初始化editgrid绑定数据时，他能够设置你要显示的数据，要显示几列，列最前边是否要有checkbox，以及它的样式，点击下能够进入编辑状态，在编辑那一列还能够监听事件作你要作的操做。

                

//初始化EditGrid
    this.InitEditGrid = function () {
        var sm = new Ext.grid.CheckboxSelectionModel({});

        var column = new Ext.grid.ColumnModel([
        //  { header: 'FID', dataIndex: 'FID'},
            sm,
            { header: '姓名', dataIndex: 'FName', width: 100, css: "text-align:left;", editor: new Ext.form.TextField() },
            { header: '数量', dataIndex: 'FNum', width: 100, css: "text-align:left;", editor: new Ext.form.TextField() },
            { header: '单价', dataIndex: 'FPrice', width: 100, css: "text-align:left;", editor: new Ext.form.TextField() },
            { header: '金额', dataIndex: 'FMount', width: 100, css: "text-align:left;", renderer: function (v) {
                return "<font color=red> ￥</font>" + v
            }
            }
        ]);

        tp = new Ext.data.Record.create([
            { name: "FID", type: "string", mapping: "FID" },
            { name: "FName", type: "string", mapping: "FName" },
            { name: "FNum", type: "decimal", mapping: "FNum" },
            { name: "FPrice", type: "decimal", mapping: "FPrice" },
            { name: "FMount", type: "decimal", mapping: "FMount" }
        ])

        var reader = new Ext.data.JsonReader({}, tp);

        gridStore = new Ext.data.Store({
            reader: reader,
            pruneModifiedRecords: true
        })

        //初始化store
        gridStore.loadData([]);

        //定义表格
        gridEdit = new Ext.grid.EditorGridPanel({
            width: 800,
            height: 300,
            cm: column,
            store: gridStore,
            clicksToEdit: 1,
            columnLines: true,
            sm: sm,
            listeners:
            {
                afterEdit: function (a) {
                    var num = 0;
                    var price = 0;

                    if (a.field == "FNum") {
                        num = a.value;

                        price = gridStore.getRange()[a.row].data.FPrice;
                        if (price == "" || price == undefined) {
                            gridStore.getRange()[a.row].data.FMount = "";
                        }
                        else {
                            gridStore.getRange()[a.row].data.FMount = parseFloat(num) * parseFloat(price);
                            gridEdit.getView().refresh();
                        }

                    }
                    else if (a.field == "FPrice") {
                        price = a.value;

                        num = gridStore.getRange()[a.row].data.FNum;
                        if (num == "" || num == undefined) {
                            gridStore.getRange()[a.row].data.FMount = "";
                        }
                        else {
                            gridStore.getRange()[a.row].data.FMount = parseFloat(num) * parseFloat(price);
                            gridEdit.getView().refresh();
                        }
                    }

                }
            }

        });
        //渲染
        gridEdit.render("editGrid");
    }

他还能够包含数据库中没有的数据，例如代码中的FNum，FPrice ，FMount都不是数据库中的哦，他们是能够在本地直接添加，并且他是在afteredit事件以后发生的计算。