有關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事件以後發生的計算。