Extjs mvc 将记录添加到网格面板

Posted 2023-02-26

【中文标题】Extjs mvc 将记录添加到网格面板

【英文标题】：Extjs mvc add record to grid panel

【发布时间】：2013-02-13 10:13:06

【问题描述】：

起初我认为这是一个简单的问题，但无论如何我都无法解决。

我有一个 extjs 网格面板，它的存储和模型。从控制器中，我可以插入新记录来存储，当我使用 firebug 和调试时，我可以列出存储中的所有新记录（panel.store.data.items），但是在 gridview 中我无法使其可见。

你能告诉我我在哪里缺少什么吗？为什么记录没有在网格中列出？

这是我的模特

Ext.define('BOM.model.PaketModel', 
    extend: 'Ext.data.Model',
    fields: [
         name: 'seriNo', type: 'string' ,
         name: 'tutar', type: 'string' ,
    ]
);

这是商店

Ext.define('BOM.store.PaketStore', 
    extend: 'Ext.data.Store',
    model: 'BOM.model.PaketModel',
    proxy: 
        type: 'memory',
        reader: 
            type: 'json',
            root: 'data',
        ,
        writer: 
            type: 'json',
            root: 'data',
        ,
    ,

);

这是我添加新行的方法

addNew: function () 
        this.getPaketWindow().returnRowEdit().cancelEdit();
        this.getPaketWindow().getStore().insert(0, new BOM.model.PaketModel());
        this.getPaketWindow().returnRowEdit().startEdit(0, 0);
    

更新视图

Ext.define('BOM.view.PaketCreate', 
    extend: 'Ext.grid.Panel',
    alias: 'widget.paketcreate',
    bodyPadding: 5,
    layout: 'fit',

    header:false,

    initComponent: function () 

        this.columns = [
               text: 'Seri No',        flex: 2,    sortable: true,     dataIndex: 'seriNo',        field: xtype: 'textfield' , 
               text: 'Tutar',          flex: 2,    sortable: true,     dataIndex: 'tutar',         field: xtype: 'textfield' 
        ];
        this.dockedItems = [
            xtype: 'toolbar',
            items: [
                text: 'Ekle',
                id:'addNewCheck',
                iconCls: 'icon-add',

            ,'-',
                id: 'deleteCheck',
                text: 'Sil',
                iconCls: 'icon-delete',
                disabled: true,
           ]
        ];
        this.store = 'BOM.store.PaketStore';
        rowEditing = Ext.create('Ext.grid.plugin.RowEditing', 
            clicksToMoveEditor: 1,
            autoCancel: false
        );
        this.plugins = rowEditing,
        this.callParent(arguments);
    ,
    returnRowEdit: function () 
        console.log("row editing...");
        return rowEditing;
    
);
var rowEditing;

【问题讨论】：

可以添加view 代码吗？

我更新了查看代码

我发现了问题，但我没有解释。 this.getPaketWindow() 返回视图，我可以使用 this.getPaketWindow().getStore() 访问存储。然而 this.getPaketWindow().getView().getStore().insert(0, new ...) 刚刚工作。为什么我们需要getView() 为什么有两个不同的store？

【参考方案1】：

试试：

this.store =  Ext.create('BOM.store.PaketStore');

代替：

this.store = 'BOM.store.PaketStore';

http://jsfiddle.net/qzMb7/1/

【讨论】：

我试过了，还是一样，store里有数据，grid里没有。如果我手动添加数据（例如，数据：[...]）它会显示，但插入它不会。

【参考方案2】：

当我像这样添加“.getView()”时它可以工作

this.getPaketWindow().getView().getStore().insert(0, new BOM.model.PaketModel())

但是，我还是不明白。当我手动添加记录时，两者都到达同一个商店，我可以在 store.data 中看到它们，但只有当我包含 .getView() 部分时它才可见