Question

在网格面板中使用cellediting和组合框更新记录后，我正在尝试更新我的商店和数据库。 ajax代理中的更新operation.action正确触发，只是存储和网格没有同步，而firebug中的post标签显示我的json看起来像这样：'data []'。如何获取商店记录以创建json并更新记录？感谢您提前查看...

Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', '/extjs4/examples/ux');
Ext.require([
    'Ext.layout.container.Fit',
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.panel.*',
    'Ext.selection.CellModel',
    'Ext.state.*',
    'Ext.form.*',
    'Ext.ux.CheckColumn']);

Ext.define('Ext.app.HirePlanGrid', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.hirePlangrid',
    hireplanstoreId: 'hireplanstore',
    hiremonthstoreId: 'hiremonthstore'

    ,
    renderMonth: function (value, p, record) {
        var fkStore = Ext.getStore(this.up('hirePlangrid').hiremonthstoreId);
        var rec = fkStore.findRecord("MONTH_ID", value);
        //return rec.get("ABBREVIATED_MONTH");
    }

    ,
    initComponent: function () {
        var rIdx = '';
        var cIdx = '';

        this.editing = Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1,
            listeners: {
                'beforeedit': function (e) {
                    var me = this;
                    var allowed = !! me.isEditAllowed;
                    if (!me.isEditAllowed) Ext.Msg.confirm('confirm', 'Are you sure?', function (btn) {
                        if (btn !== 'yes') return;
                        me.isEditAllowed = true;
                        me.startEditByPosition({
                            row: e.rowIdx,
                            column: e.colIdx
                        });
                    });
                    rIdx = e.rowIdx;
                    cIdx = e.colIdx;
                    // alert('rIdx= ' + rIdx + ' cIdx = ' + cIdx);
                    return allowed;
                },
                    'edit': function (e) {
                    this.isEditAllowed = true;
                }
            }
        });

        var objMonthStore = Ext.getStore(this.hiremonthstoreId);
        objMonthStore.load();
        var objStore = Ext.getStore(this.hireplanstoreId);
        objStore.setProxy({
            type: 'ajax',
            url: 'hireplan.cfc?method=getEmployees'
        });

        objStore.load();

        var onDeleteClick = function (field, value, options) {
            // var objPanel = this.down('gridpanel');
            var selection = Ext.getCmp('grid').getSelectionModel().getSelection();
            // alert(selection);
            //var selection = getView().getSelectionModel().getSelection()[r];
            if (value) {
                //alert(value);
                objStore.remove(value);
                objStore.sync();
            }
        };
        var onUpdateClick = function (field, value, options) {
            alert('field= ' + field + ' value= ' + value + 'options= ' + options);
            objStore.update(this.hireplanstoreId, value, 'update', options);
            onSync();

        };
        var onSync = function () {
            objStore.sync();
        };

        Ext.apply(this, {
            layout: 'fit',
            width: 800,
            //height: 1500,
            items: [{
                xtype: 'grid',
                id: 'gridgrid',
                //height: 300,
                store: objStore,
                selModel: {
                    selType: 'cellmodel'
                },
                selType: 'rowmodel',
                plugins: [this.editing],
                // plugins: [cellEditing],
                columnLines: true,
                viewConfig: {
                    stripeRows: true
                },
                //loadMask: true,
                disableSelection: true,
                columns: [{
                    header: 'rowid',
                    hidden: true,
                    dataIndex: 'ROWID'
                }, {
                    header: 'Indicator',
                    id: 'chkcolumn',
                    xtype: 'checkcolumn',
                    dataIndex: 'CHK_COL',
                    editor: {
                        xtype: 'checkbox',
                        cls: 'x-grid-checkheader-editor'
                    },
                    listeners: {
                        checkchange: function (column, recordIndex, checked) {
                            alert('checked rindex= ' + recordIndex);
                            onDeleteClick(column, recordIndex, checked);
                            //or send a request                    
                        }
                    }
                }, {
                    id: 'employeeid',
                    header: 'employeeid',
                    width: 80,
                    hidden: false,
                    sortable: true,
                    dataIndex: 'EMPLOYEEID',
                    flex: 1
                }, {
                    id: 'NATIONALIDNUMBER',
                    header: 'NATIONALIDNUMBER',
                    width: 80,
                    sortable: true,
                    dataIndex: 'NATIONALIDNUMBER',
                    flex: 1
                }, {
                    id: 'MARITALSTATUS',
                    header: 'MARITALSTATUS',
                    width: 80,
                    sortable: true,
                    dataIndex: 'MARITALSTATUS',
                    flex: 1
                }, {
                    id: 'PotentialforInsourcingKV',
                    header: 'Potential for Insourcing',
                    width: 30,
                    sortable: true,
                    dataIndex: 'POTENTIAL_FOR_INSOURCING',
                    flex: 1,
                    editor: {
                        id: 'thiscombo',
                        xtype: 'combobox',
                        typeAhead: true,
                        triggerAction: 'all',
                        selectOnTab: true,
                        store: [
                            ['1', 'Yes'],
                            ['0', 'No']
                        ],
                        lazyRender: true,
                        listClass: 'x-combo-list-small',
                        listeners: {
                            scope: this,
                                'select': function () {
                                var selval = Ext.getCmp('thiscombo').getValue();
                                var row = rIdx;
                                //alert(selval + ' ' +  rIdx); 
                                onUpdateClick('thiscombo', rIdx, selval);
                            }
                        }
                    }
                }, {
                    id: 'ABBREVIATED_MONTH',
                    header: 'ABBREVIATED_MONTH',
                    width: 80,
                    sortable: true,
                    dataIndex: 'ABBREVIATED_MONTH',
                    flex: 1,
                    renderer: this.renderMonth,
                    field: {
                        xtype: 'combobox',
                        store: Ext.getStore(this.hiremonthstoreId),
                        typeAhead: true,
                        lazyRender: true,
                        queryMode: 'local',
                        displayField: 'ABBREVIATED_MONTH',
                        valueField: 'MONTH_ID',
                        listClass: 'x-combo-list-small'

                    }
                }, {
                    id: 'SALARIEDFLAG',
                    header: 'SALARIEDFLAG',
                    width: 80,
                    sortable: true,
                    dataIndex: 'SALARIEDFLAG',
                    flex: 1
                }],

                features: [{
                    ftype: 'rowbody'
                }]
            }]
        });
        this.callParent(arguments);
    }, //initComponent
    onSelectChange: function (selModel, selections) {
        this.down('#delete').setDisabled(selections.length === 0);
    },
    viewConfig: {},
});
// JavaScript Document
// JavaScript Document
hireplanstore = Ext.create("Ext.data.Store", {
    model: 'HiringPlan',
    //autoLoad: true,
    //autoSync: true,
    buffered: true,
    storeId: 'hireplanstore',
    remoteFilter: true

    ,
    proxy: {
        type: 'ajax',
        simpleSortMode: true,
        api: {
            read: 'hireplan.cfc?method=GetEmployees',
            update: 'hireplan.cfc?method=upEmployees',
            destroy: 'hireplan.cfc?method=delEmployees'
        },
        reader: {
            type: 'json',
            messageProperty: 'message',
            successProperty: 'success',
            root: 'data'
        },
        writer: {
            type: 'json',
            writeAllFields: false,
            root: 'data'
        },
        listeners: {
            exception: function (proxy, response, operation) {
                Ext.MessageBox.show({
                    title: 'ERROR from store',
                    msg: operation.getError(),
                    icon: Ext.MessageBox.ERROR,
                    buttons: Ext.Msg.OK
                });
            }
        }
    }


});
//hireplanstore.pageSize = 10000;       
Ext.define('HiringPlan', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'ROWID',
        type: 'string'
    }, {
        name: 'EMPLOYEEID',
        type: 'string'
    }, {
        name: 'NATIONALIDNUMBER',
        type: 'string'
    }, {
        name: 'MARITALSTATUS',
        type: 'string'
    }, {
        name: 'GENDER',
        type: 'string'
    }, {
        name: 'POTENTIAL_FOR_INSOURCING',
        type: 'integer'
    }, {
        name: 'ABBREVIATED_MONTH',
        type: 'string'
    }, {
        name: 'SALARIEDFLAG',
        type: 'string'
    }, {
        name: 'CHK_COL',
        type: 'bool'
    }]

});

Answer 1

为了正确更新你的ajax或rest调用必须返回一个包含更新记录的数组，即使它是一个记录，你必须将它返回到一个数组中，一个示例json响应（对于其余的代理）应该是这样的：

[{'id': 1, 'name': 'test', 'foo': 'bar'}]

extjs4 ajax api商店更新

1 个答案: