ext4.1 editgrid的增删改


    Ext.define('model', {
        extend: 'Ext.data.Model',
        fields: [
        //第一个字段需要指定mapping,其他字段,可以省略掉。其实好像不用也可以
        {
        name: 'iden',
        mapping: 'iden'
}, 'fdno', 'shangpbm', 'shangpmc', 'guigxh', 'danw', 'shul', 'danj', 'jinge', 'beiz']
    });

    //创建数据源
    var store = Ext.create('Ext.data.Store', {
        model: 'model',
        proxy: {
            //异步获取数据,这里的URL可以改为任何动态页面,只要返回JSON数据即可
            type: 'ajax',
            url: 'BLL/H_suipkjBLL.aspx?action=list',
            reader: {
                type: 'json',
                root: 'items' //没有root我的json死活出不来
                //totalProperty  : 'total'
            }
        },
        listeners: {
            update: function (store, record) {
                var currPage = store.currentPage;
                var jsondate = record.get("iden") + "|" + record.get("fdno") + "|" + record.get("shangpbm") + "|"
                + record.get("danw") + "|" + record.get("shul") + "|" + record.get("danj")
                + "|" + record.get("beiz");
                //还不是很会用json传输,暂时凑合下
                Ext.Ajax.request({
                    url: 'BLL/H_suipkjBLL.aspx?action=update',
                    params: { parajson: jsondate },
                    success: function (response) {
                        //store.removeAll();
                        store.load();
                    }
                });
            },
            remove: function (store, record) {
                var currPage = store.currentPage;
                //alert(record.get("ID"))
                Ext.Ajax.request({
                    url: 'BLL/H_suipkjBLL.aspx?action=delete',
                    params: {
                        iden: record.get("iden")
                    },
                    success: function (response) {
                        //store.removeAll();
                        store.load();
                    }
                });
            }
        },
        autoLoad: true
        //autoSync : true
    });
    //创建Grid
    Ext.define('grid', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.writergrid',
        store: store,
        requires: ['Ext.grid.plugin.CellEditing', 'Ext.form.field.Text', 'Ext.toolbar.TextItem'],

        initComponent: function () {

            this.editing = Ext.create('Ext.grid.plugin.CellEditing');

            Ext.apply(this, {
                iconCls: 'icon-grid',
                frame: true,
                plugins: [this.editing],
                dockedItems: [{
                    xtype: 'toolbar',
                    items: [{
                        icon: 'Scripts/img/add.gif',
                        text: '加行',
                        scope: this,
                        handler: this.onAddClick
                    }, {
                        icon: 'Scripts/img/delete.gif',
                        text: '减行',
                        disabled: true,
                        itemId: 'delete',
                        scope: this,
                        handler: this.onDeleteClick
                    }]
                }],
                columns: [{
                    text: '编号',
                     40,
                    sortable: true,
                    dataIndex: 'iden'
                }, {
                    header: 'fdno',
                     80,
                    sortable: true,
                    dataIndex: 'fdno'
                }, {
                    header: '商品编号',
                     80,
                    sortable: true,
                    dataIndex: 'shangpbm',
                    field: {
                        type: 'textfield'
                    }
                }, {
                    header: '商品名称',
                    //flex: 2,
                     280,
                    sortable: true,
                    dataIndex: 'shangpmc'
                }, {
                    header: '规格',
                     80,
                    sortable: true,
                    dataIndex: 'guigxh'
                }, {
                    header: '单位',
                     40,
                    sortable: true,
                    dataIndex: 'danw',
                    field: {
                        type: 'textfield'
                    }
                },
                    {
                        header: '数量',
                         40,
                        sortable: true,
                        dataIndex: 'shul',
                        field: {
                            xtype: 'numberfield',
                            allowBlank: false,
                            minValue: 0,
                            maxValue: 100000
                        }
                    },
                    {
                        header: '单价',
                         80,
                        sortable: true,
                        dataIndex: 'danj',
                        field: {
                            xtype: 'numberfield',
                            allowBlank: false,
                            minValue: 0,
                            maxValue: 100000
                        }
                    }, {
                        header: '金额',
                         100,
                        sortable: true,
                        dataIndex: 'jinge'
                    }, {
                        header: '备注',
                         100,
                        sortable: true,
                        dataIndex: 'beiz',
                        field: {
                            type: 'textfield'
                        }
                    }]
            });
            this.callParent();
            this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
            //this.on('edit', this.onEdit, this);
        },
        onSelectChange: function (selModel, selections) {
            this.down('#delete').setDisabled(selections.length === 0);
        },
        //        onEdit: function () {
        //            var record = this.getSelectionModel().getSelection()[0];
        //            var shangpbm = record.get('shangpbm');
        //            var shul = record.get('shul');
        //            var danj = record.get('danj');
        //                Ext.Ajax.request
        //                ({
        //                   params: { parashangpbm: shangpbm }, //发送的参数
        //                   url: "BLL/H_suipkjBLL.aspx?action=gridlink", //请求的地址
        //                   success: function (response, option) {
        //                       var rlnoteinfo = response.responseText;
        //                       var aryinfo = new Array();
        //                       aryinfo = rlnoteinfo.split("|");
        ////                     record.set('shangpmc', aryinfo[0]);
        ////                     record.set('guigxh', aryinfo[1]);
        //                        }
        //                 });
        //            }
        //alert(colname);
        //        onSync : function() {//同步到store
        //            this.store.sync();
        //        },
        onDeleteClick: function () {
            var selection = this.getView().getSelectionModel().getSelection()[0];
            if (selection) {
                this.store.remove(selection);
            }
        },
        onAddClick: function () {
            var rec = new model({
                iden: '',
                fdno: '',
                shangpbm: '',
                shangpmc: '',
                guigxh: '',
                danw: '',
                shul: '',
                danj: '',
                jinge: '',
                beiz: ''
            }),
            edit = this.editing;
            edit.cancelEdit();
            this.store.insert(0, rec);
            edit.startEditByPosition({
                row: 0,
                column: 1
            });
        }
    });


/* 改变表格偶数行的背景颜色 */
.x-grid3-row-alt{background-color:#fff0d0;}

 
            update: function (store, record) {
                var currPage = store.currentPage;
                var cg = record.getChanges();//获取修改过的行
//如果shangpbm修改过就有值,否则是undefined
                if (cg.shangpbm == undefined )
                    return;

}

  

原文地址:https://www.cnblogs.com/shadowtale/p/2580108.html