在 ExtJS 中从 GridPanel 获取模型

Posted 2023-02-26

【中文标题】在 ExtJS 中从 GridPanel 获取模型

【英文标题】：Getting Model from GridPanel in ExtJS

【发布时间】：2012-02-14 17:30:19

【问题描述】：

我有一个允许对列进行内联编辑的网格面板。此列使用组合框作为编辑器，“更改”事件和“选择”事件都没有给我一些有用的东西来回溯编辑的值以从网格面板中获取更改的行。

我相信 Ext 会浮动编辑器的组合框，所以我不能做一些简单的事情，比如

combo.up()

返回网格。

这是视图中的网格面板：

    xtype: 'gridpanel',
    title: 'Important Projects',
    id: 'importantProjectsGrid',
    dockedItems: [],
    flex: 1,
    columns: [
         header: 'Quote Name', dataIndex: 'QuoteName', flex: 4 ,
         header: 'Quote Status', dataIndex: 'QuoteStatusID', flex: 6, editor: 
            xtype: 'combobox',
            editable: false,
            action: 'QuoteStatus',
            selectOnTab: true,
            store: 'statuses',
            queryMode: 'local',
            displayField: 'Description',
            valueField: 'Description'
         
    ],
    store: 'myimpprojects',
    selModel: 
        selType: 'cellmodel'
    ,
    plugins: [Ext.create('Ext.grid.plugin.CellEditing', 
        clicksToEdit: 1
    )]

这是与此相关的控制器代码：

init: function () 
    this.control(
        '[action=QuoteStatus]': 
            change: function (combo, new_value, old_value, opts) 
                // I need to go back up from this combobox
                // to get the row that this value was edited in
                // to grab an ID value from that row's data
                // in order to make an ajax request
            
        
    );
,

感谢您的帮助！

【参考方案1】：

您可以监控商店的update事件。

init: function () 
    this.getMyimpprojectsStore().on('update', function(store, record) 
        // do something with record
    );
    // ...
,

【参考方案2】：

尝试将监听器放在 CellEditing 插件上。 beforeedit、edit 和 validateedit 的事件接收包含对网格、记录、字段、行和列索引等的引用的对象。您应该能够检查事件处理程序中的组合框并从那里处理您的信息。

文档页面的快速链接：Ext.grid.plugin.CellEditing

【讨论】：

感谢您的回答，这正是我正在寻找的内容

【参考方案3】：

我确信更新插件将通过底层存储的 api 自动处理更新，并在代理 autoSync 为 true 时自动将数据发布到服务器。

配置代理示例：

Ext.define('MyApp.store.YourStore', 
extend: 'Ext.data.Store',

model: 'MyApp.model.YourGridModel',
autoSync: true, //Commits the changes realtime to the server
proxy: 
    type: 'ajax',
    batchActions : true, //Commits the changes everytime a value is changed if true o otherwise store the changes and batch update them in 1 single post
    api: 
        read: 'path/to/select',
        create: 'path/to/create',
        update: 'path/to/update',
        destroy: 'path/to/delete'
    ,
    reader: 
        type: 'json',
        root: 'results',
        successProperty: 'success'
    ,
    writer: 
        type: 'json',
        writeAllFields: true
    ,
    listeners: 
        exception: function(proxy, response, operation)

            Ext.MessageBox.show(
                title: 'REMOTE EXCEPTION',
                msg: operation.getError(),
                icon: Ext.MessageBox.ERROR,
                buttons: Ext.Msg.OK
            );
        
    
,
listeners: 
    write: function(proxy, operation)

        var response = Ext.JSON.decode(operation.response.responseText);

        if(response.success == true)
                
            //TODO: Proxy - Messageboxes might be a little anoying we might instead use the status bar in teh grid or something so show status of the operation
            Ext.MessageBox.show(
                title: this.xFileLibraryTitle,
                msg: response.message,
                icon: (response.success == true)? Ext.MessageBox.INFO : Ext.MessageBox.ERROR,
                buttons: Ext.Msg.OK
            );
        
    

);

我会专门寻找两个配置：“autoSync”和“batchActions”

希望这可以帮助您进一步解决您的问题！

【讨论】：

感谢您的回答，但我不使用代理来更新/删除数据。我手动使用 ajax 请求。再次感谢

没关系，虽然我认为使用代理会获得更多价值...但是您可能正在运行一些特殊情况，您希望完全控制每一步，那么就可以了！干杯！