EXTJS 4.2 资料 控件之Grid 添加行，编辑行，删除行

   //SiteVariableConfigValue类，创立一个模型类
    Ext.define("SiteVariableConfigValue", {
        extend: "Ext.data.Model",
        fields: [
          { name: 'SVCValueId', type: 'int', sortable: true },
          { name: 'SVCId', type: 'string', sortable: true },
          { name: 'KeyInItem', type: 'string', sortable: true },
          { name: 'ValueInItem', type: 'string', sortable: true }
        ]
    });

    var storeSiteVariableConfigValue = Ext.create('Ext.data.Store', {
        model: 'SiteVariableConfigValue',//这个地方CarAccessoriesType不是一个对象，而是一个类
        pageSize: limit,  //页容量20条数据
        //是否在服务端排序 （true的话，在客户端就不能排序）
        remoteSort: false,
        remoteFilter: true,
        method: 'POST',
        proxy: {//代理
            type: 'ajax',
            url: '/UI/HttpHandlerData/InformationManagement/InformationManagement.ashx?operation=SearchInfoCollection1',
            extraParams: {
                start: start,
                limit: limit
            },
            reader: {   //这里的reader为数据存储组织的地方，下面的配置是为json格式的数据，例如：[{"total":50,"rows":[{"a":"3","b":"4"}]}]//读取器
                type: 'json', //返回数据类型为json格式
                root: 'Table',  //根节点
                totalProperty: 'result' //数据总条数
            }
        },
        sorters: [{
            //排序字段。
            property: 'SVCValueId',
            //排序类型，默认为 ASC 
            direction: 'desc'
        }],
        autoLoad: true  //即时加载数据
    });

    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToMoveEditor: 1,
        autoCancel: false
    });

    var gridSiteVariableConfigValue = Ext.create('Ext.grid.Panel', {
        store: storeSiteVariableConfigValue,
        autoWidth: true,
        aotuHeight: true,
        animCollapse: false,
        enableColumnMove: false,
        enableHdMenu: false,
        loadMask: true,
        loadMask: {
            msg: '正在载入数据,请稍候...'
        },
        viewConfig: {
            forceFit: true,
            stripeRows: true
        },
        forceFit: true, //列表宽度自适应
        stripeRows: true,//斑马线
        autoSizeColumns: true, //根据每一列内容的宽度自适应列的大小 
        trackMouseOver: true, //鼠标移动时高亮显示
        selModel: { selType: 'checkboxmodel' },   //选择框
        scroll: true,
        layout: 'column',    // Specifies that the items will now be arranged in columns
        columnWidth: 0.60,
        plugins: [rowEditing],
        columns: [
                    { header: '序号', xtype: 'rownumberer', align: 'left', width: 50 },
                    {
                        header: '键', dataIndex: 'KeyInItem', width: 200, editor: {
                            // xtype: 'textfield'
                        }
                    },
                    {
                        header: '值', dataIndex: 'ValueInItem', width: 200, editor: {
                            // xtype: 'textfield'
                        }
                    },

        ],
        bbar: [{
            xtype: 'pagingtoolbar',
            store: storeSiteVariableConfigValue,
            displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
            emptyMsg: "没有数据",
            beforePageText: "当前页",
            afterPageText: "共{0}页",
            displayInfo: true
        }],
        tbar: [{
            text: '添加',
            icon: '/Resources/Images/16x16_easyui/edit_add.png',
            handler: function () {
                rowEditing.cancelEdit();
                var r = Ext.create('SiteVariableConfigValue', {
                    KeyInItem: '这里是键',
                    ValueInItem: '这里是值'
                });

                gridSiteVariableConfigValue.getStore().insert(0, r);
                rowEditing.startEdit(0, 0);
            }
        }, {
            text: '删除',
            icon: '/Resources/Images/16x16_easyui/edit_remove.png',
            handler: function () {
                Ext.MessageBox.confirm('Confirm', '确定删除该记录?', function (btn) {
                    if (btn != 'yes') {
                        return;
                    }
                    var sm = gridSiteVariableConfigValue.getSelectionModel();
                    rowEditing.cancelEdit();
                    var store = gridSiteVariableConfigValue.getStore();
                    store.remove(sm.getSelection());
                    if (store.getCount() > 0) {
                        sm.select(0);
                    }
                });
            },
            disabled: true
        }]
    });