Сетка ExtJS4 не будет обновлять удаленную базу данных - PullRequest
5 голосов
/ 28 мая 2011

По какой-то причине эта конфигурация сетки ExtJS4 не будет обновляться.Когда вы щелкаете ячейку и изменяете значение, оно попадает в URL-адрес создания, а не URL-адрес обновления, как определено в прокси-сервере и наблюдается в Firebug в FF4.Как ни странно, событие datachanged срабатывает после загрузки хранилища при запуске страницы, но не после того, как данные действительно изменились.Кроме того, сетка отправляет все строки в URL-адрес создания.

Может кто-нибудь сказать мне, что я делаю неправильно?

Ext.onReady(function() {

    Ext.BLANK_IMAGE_URL = '/images/extjs4/s.gif';
    Ext.tip.QuickTipManager.init();
    //Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

    Ext.define('VendorError', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'UnexpSrvID', type: 'int'},
            {name: 'VendorID', type: 'int'},
            {name: 'VendorName', type: 'string'},
            {name: 'VndActID', type: 'int'},
            {name: 'VndActNb', type: 'string'},
            {name: 'InvoiceID', type: 'int'},
            {name: 'VInvNb', type: 'string'},
            {name: 'VInvRcptDt', type: 'date', dateFormat: 'Y-m-d' },
            {name: 'InvDate', type: 'date', dateFormat: 'Y-m-d' },
            {name: 'CodeSpecifier', type: 'string'},
            {name: 'Recurrence', type: 'string'},
            {name: 'ClientID', type: 'int'},
            {name: 'ClientName', type: 'string'},
            {name: 'LocID', type: 'int'},
            {name: 'LocName', type: 'string'},
            {name: 'RecentLocStatus', type: 'string'},
            {name: 'RecentLocStatusDate', type: 'date', dateFormat: 'Y-m-d' },
            {name: 'UnexpCost', type: 'float'},
            {name: 'ConfirmedAmt', type: 'float'},
            {name: 'StaffID', type: 'int'},
            {name: 'NetworkID', type: 'string'},
            {name: 'UnexpStatCode', type: 'string'}
        ],
        proxy: {
            type: 'ajax',
            simpleSortMode: true,
            api: {
                read: '/internal/viewVERext_json.asp',
                create: '/internal/viewVERext_create.asp',
                update: '/internal/viewVERext_update.asp',
                destroy: '/internal/viewVERext_destroy.asp'
            },
            reader: {
                type: 'json',
                totalProperty: 'total',
                successProperty: 'success',
                messageProperty: 'message',
                root: 'data'
            },
            writer: {
                type: 'json',
                writeAllFields: false,
                allowSingle: false,
                root: 'data'
            },
            listeners: {
                exception: function(proxy, response, operation){
                    Ext.MessageBox.show({
                        title: 'REMOTE EXCEPTION',
                        msg: operation.getError(),
                        icon: Ext.MessageBox.ERROR,
                        buttons: Ext.Msg.OK
                    });
                }
            }
        }
    });

    var store = Ext.create('Ext.data.Store', {
        model: 'VendorError',
        autoLoad: true,
        autoSync: true,
        pageSize: 20,
        remoteSort: true,
        listeners: {
        //  write: function(proxy, operation){
        //      if (operation.action == 'destroy') {
        //          main.child('#form').setActiveRecord(null);
        //      }
        //      Ext.example.msg(operation.action, operation.resultSet.message);
        //  }
            datachanged: function() {
                var report = "";
                store.each( 
                    function(rec) { 
                        report = report + rec.dirty + '/';
                    } 
                )
                alert(report);
            }
        }
    });

    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        //stateful: true,
        //stateId: 'stateGrid',
        columns: [
            {   text     : 'Vendor',
                dataIndex: 'VendorName',
                flex     : 1
            },
            {   text     : 'Account',
                dataIndex: 'VndActNb'
            },
            {   text     : 'Invoice',
                dataIndex: 'VInvNb'
            },
            {   text     : 'Invoiced',
                dataIndex: 'InvDate', 
                xtype    : 'datecolumn',
                align    : 'center'
            },
            {   text     : 'Receipted',
                dataIndex: 'VInvRcptDt', 
                xtype    : 'datecolumn',
                align    : 'center'
            },
            {   text     : 'Description',
                dataIndex: 'CodeSpecifier'
            },
            {   text     : 'Client',
                dataIndex: 'ClientName'
            },
            {   text     : 'Location',
                dataIndex: 'LocName'
            },
            {   text     : 'LStatus',
                dataIndex: 'RecentLocStatus',
                align    : 'center'
            },
            {   text     : 'Credit',
                dataIndex: 'UnexpCost',
                tdCls    : 'colyellow',
                renderer : Ext.util.Format.usMoney,
                align    : 'right',
                field    : { xtype:'textfield', allowBlank:false }
            },
            {   text     : 'Confirmed',
                dataIndex: 'ConfirmedAmt',
                tdCls    : 'colyellow',
                renderer : Ext.util.Format.usMoney,
                align    : 'right',
                field    : { xtype:'textfield', allowBlank:false }
            },
            {   text     : 'Recurrence',
                dataIndex: 'Recurrence',
                tdCls    : 'colyellow',
                align    : 'center',
                field    : {
                    xtype    : 'combobox',
                    typeAhead: true,
                    triggerAction: 'all',
                    selectOnTab: true,
                    store: [
                        ['once','once'],['1st','1st'],['2nd+','2nd+']
                    ],
                    lazyRender: true
                }
            },
            {   text     : 'CStatus',
                dataIndex: 'UnexpStatCode',
                tdCls    : 'colyellow',
                align    : 'center',
                field    : {
                    xtype    : 'combobox',
                    typeAhead: true,
                    triggerAction: 'all',
                    selectOnTab: true,
                    store: [
                        <%=cstat_grid%>
                    ],
                    lazyRender: true
                }
            },
            {   text     : 'Owner',
                dataIndex: 'NetworkID',
                tdCls    : 'colyellow',
                field    : {
                    xtype    : 'combobox',
                    typeAhead: true,
                    triggerAction: 'all',
                    selectOnTab: true,
                    store: [
                        <%=staff_grid%>
                    ],
                    lazyRender: true
                }
            }
        ],
        layout: 'fit',
        height: 500,
        renderTo: 'theGrid',
        selType: 'cellmodel',
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
        ],
        dockedItems: [
            {   xtype: 'pagingtoolbar',
                store: store,
                dock: 'bottom',
                displayInfo: true
            },
            {   xtype: 'toolbar',
                dock: 'top',
                items: [
                    { xtype:'button', 
                      text: 'IsDirty()', 
                      handler: function() { 
                        var report = "";
                        store.each( 
                            function(rec) { 
                                report = report + rec.dirty + '/';
                            } 
                        )
                        alert(report);
                        }
                    }
                ]
            }
        ],
        viewConfig: {
            stripeRows: true
        }
    });

    Ext.EventManager.onWindowResize(grid.doLayout, grid);
});

Ответы [ 2 ]

2 голосов
/ 01 июня 2011

Оказывается, проблема в том, что записи, добавленные в сетку, определяются как «не новые» по значению поля уникального идентификатора. Добрый плакат на форумах Сенчи указал мне на это.

По умолчанию это поле в модели должно иметь имя 'id'. Таким образом, вы должны либо предоставить модели поле 'id', которого не было в моей вышеупомянутой модели, либо переопределить столбец по умолчанию, используя свойство idProperty Ext.data.Model . Я просто переименовал столбец UnexpSrvId в id. И, о чудо, мы отправляем обновления для update () вместо create ().

Это не очевидно из документации по API, так как многие вещи, к сожалению, находятся в этой мощной структуре.

0 голосов
/ 28 мая 2011

Поскольку ваша сетка использует миксины CellEdit, вы можете добавить слушателя к grid, который зафиксирует изменения в вашей записи после редактирования.Поэтому в вашей сетке добавьте опцию конфигурации слушателей, определенную следующим образом ...

listeners: {
    edit : function(e) {
        e.record.commit();
    }
}

РЕДАКТИРОВАТЬ: я думаю, что вы используете неправильный синтаксис на прокси-сервере ... вы можете определить только читатель и писатель(судя по всему) ...

Статья Эда Спенсера о прокси

ExtJS 4 API Запись о прокси

...