Extjs mvc add record to grid panel

Question

first I thought it is a simple problem however I could not solve it anyway.

I have a extjs gridpanel, its store and model. From controller, I can insert new records to store, when I use firebug and debug, I can list all the new records in the store (panel.store.data.items) however in the gridview I cannot make it visible.

Could you please tell me where and what I am missing? Why the records are not listed in the grid?

This is my model

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

This is store

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',
        },
    },

});

This is the method I add new rows

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

UPDATE VIEW

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;

I found the problem but I have no explanation. this.getPaketWindow() returns the view and I could access the store with this.getPaketWindow().getStore(). However this.getPaketWindow().getView().getStore().insert(0, new ...) just worked. Why do we need getView() why there are two different stores? — tkcn

CD.. CD.. · Accepted Answer · 2013-02-13T10:37:31

Try:

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

instead of:

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

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

Extjs mvc add record to grid panel

2 Answers