add row to Ext.grid.GridPanel

Question

i am using Extjs with a framework called bryntum and I have a problem which is when i can't add any row to the gridpanel I tried many solutions but no one works my code is like this:

1. the model:

   Ext.define('Sch.examples.externaldragdrop.model.UnplannedTask', {
       extend : 'Sch.model.Event',
   
       fields : [
           { name : 'Duration', type : 'float' },
       ]
   }); 
   

2. the store which read from a json file the first time :

   Ext.define('Sch.examples.externaldragdrop.store.UnplannedTaskStore', {
       extend      : 'Ext.data.Store',
       model       : 'Sch.examples.externaldragdrop.model.UnplannedTask',
       requires    : [
           'Sch.examples.externaldragdrop.model.UnplannedTask'
       ],
   
       autoLoad    : true,
   
       proxy       : {
           url     : 'data/requests.json',
           type    : 'ajax',
           reader  : { type : 'json' },
           writer : {type : 'json'}
       }
   });
   

3. the gridpanel:

   Ext.define('Sch.examples.externaldragdrop.view.UnplannedTaskGrid', {
       extend : 'Ext.grid.GridPanel',
       alias  : 'widget.unplannedtaskgrid',
   
       requires : [
           'Sch.examples.externaldragdrop.store.UnplannedTaskStore',
           'Sch.examples.externaldragdrop.view.UnplannedTaskDragZone'
       ],
       cls      : 'taskgrid',
       title    : 'Unplanned Tasks',
   
       initComponent : function () {
           Ext.apply(this, {
               viewConfig : { columnLines : false },
   
               store   : new    Sch.examples.externaldragdrop.store.UnplannedTaskStore(),
               columns : [
                   {header : 'Task', sortable : true, flex : 1, dataIndex : 'Name'},
                   {header : 'Duration', sortable : true, width : 100, dataIndex : 'Duration'},
                   {header : 'TestField', sortable : true, width : 100, dataIndex : 'TestField'},
               ]
           });
   
           this.callParent(arguments);
       },
   
        afterRender : function () {
           this.callParent(arguments);
   
           // Setup the drag zone
           new Sch.examples.externaldragdrop.view.UnplannedTaskDragZone(this.getEl(), {
               grid : this
           });
       },
   
       onDestroy: function() {
           this.store.destroy();
           this.callParent();
       }
   });
   

and finally my app code where I want to add a new row to the panel:

var panelgrid = Ext.create('Sch.examples.externaldragdrop.view.UnplannedTaskGrid'),
        unplanned = panelgrid.getStore(),
task = Ext.create('Sch.examples.externaldragdrop.model.UnplannedTask',
                    {"Id" : "t1", "Name" : "Fix bug", "Duration" : 4}
                    ),
                 task2 = Ext.create('Sch.examples.externaldragdrop.model.UnplannedTask',
                    {"Id" : "t5", "Name" : "Fix bug", "Duration" : 4}
                    );
unplanned.add(task);
unplanned.add(task2);
alert(unplanned.getCount());
unplanned.load();
panelgrid.getView().refresh();

Answer 1

Solution:

1. When you call load(), by default all existing records are deleted. The solution is to use additional "options" parameter.

   unplanned.load( { addRecords: true } );

2. Set autoLoad to false in store config.

From ExtJS help:

Ext.data.Store.load([options]):

Loads data into the Store via the configured proxy. This uses the Proxy to make an asynchronous call to whatever storage backend the Proxy uses, automatically adding the retrieved instances into the Store and calling an optional callback if required.

options : Object/Function (optional)

Config object, passed into the Ext.data.Operation object before loading. Additionally addRecords: true can be specified to add these records to the existing records, default is to remove the Store's existing records first.

Working example:

Ext.define('testmodel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'Id', type: 'string'},
        {name: 'Name', type: 'string'},
        {name: 'Duration', type: 'number'}
    ]
});


Ext.onReady(function(){

    Ext.QuickTips.init();
    Ext.FocusManager.enable();
    Ext.Ajax.timeout = 100 * 1000;

    Ext.define('Trnd.TestWindow', {
        extend: 'Ext.window.Window',

        closeAction: 'destroy',
        border: false,
        width: 560,
        height: 500,
        modal: true,
        closable: true,
        resizable: false,
        layout: 'fit',

        loadTestData: function() {
            var me = this;

            var r1 = Ext.create('testmodel', {
                Id: '11',
                Name: 'Name 11 (before store load)',
                Duration: 0
            });
            me.store.add(r1);

            var r2 = Ext.create('testmodel', {
                Id: '12',
                Name: 'Name 12 (before store load)',
                Duration: 0
            });
            me.store.add(r2);

            me.store.load(
                {
                addRecords: true    
                }   
            );
        },

        initComponent: function() {
            var me = this;
            me.callParent(arguments);

            me.store = new Ext.data.Store({
                autoLoad: false,
                proxy: {
                    url: 'grid.json',
                    type: 'ajax',
                    reader: {type: 'json'},
                    writer: {type: 'json'}
                },
                model: 'testmodel'
            });

            me.grid = Ext.create('Ext.grid.Panel', {
                autoScroll: true,
                stripeRows: true,
                width: 420,
                height: 200,
                store: me.store,
                columnLines: false,
                columns : [
                    {header : 'Task', sortable : true, flex : 1, dataIndex : 'Name'},
                    {header : 'Duration', sortable : true, width : 100, dataIndex : 'Duration'}
                ]
            });
            me.add(me.grid);

            me.loadTestData();
        }

    }); 


    var win = new Trnd.TestWindow({

    });
    win.show();

});

Grid.json

[
    {Id : "01", Name: 'Name 01 (store load)', Duration: 1},
    {Id : "02", Name: 'Name 02 (store load)', Duration: 2}
]   

Notes:

I've tested this with ExtJS 4.2.