Dynamically load data to grid

Question

I need help. I have grid with toolbar when i create new grid with data (open window of create via button in toolbar) the new row not displayed only after reloading the page i see the new row. Thank you.

this is store:

var writer = new Ext.data.JsonWriter({
    type: 'json',
    encode: false,
    listful: true,
    writeAllFields: true,
    returnJson: true
});


var reader = new Ext.data.JsonReader({
    totalProperty: 'total',
    successProperty: 'success',
    idProperty: 'Id',
    root: 'Data',
    messageProperty: 'message'
});


var proxy = new Ext.data.HttpProxy({
    reader: reader,
    writer: writer,
    type: 'ajax',
    api: {
        read: '/Item/Get',
        create: '/Cart/CreateCart',       
        update: '/Cart/CreateCart',
        destroy: '/Cart/CreateCart',
        add: '/Cart/CreateCart'
    },
    headers: {
        'Content-Type': 'application/json; charset=UTF-8'
    }
});


Ext.define('ExtMVC.store.Items', {
    extend: 'Ext.data.Store',
    model: 'ExtMVC.model.Item',
    autoLoad: true,
    paramsAsHash: true,
    autoSync: true,
    proxy: proxy    
});

this is methode to create:

additem: function (button) {
        var win = button.up('window'),
            form = win.down('form'),
            values = form.getValues();
        Ext.Ajax.request({
            url: 'Item/CreateItem',
            params: values,
            success: function (response, options) {
                var data = Ext.decode(response.responseText);
                if (data.success) {
                    Ext.Msg.alert('Create', data.message);                    
                }
                else {
                    Ext.Msg.alert('Create', 'Creating is faild');
                }
                win.close();
            }
        });
    }

Eddy Eddy · Accepted Answer · 2015-02-19T15:40:22

In your function addItem you add the data (record) to your database, you don't add this record to the store (that's bound to the grid).

Because you save the data to your database it's loaded to the store (and shown in the grid) after you reload.

You can add the record to your store as follows:

var win = button.up('window'),
form = win.down('form'),
values = form.getValues();

var store = *referenceToYourGrid*.getStore();
var model = Ext.ModelMgr.getModel(store.model);
var record = model.create();

record.set(values);

store.add(record);

Now it should show in your store. Instead of store.add you could you store.insert(0, record) to insert the record in a specific place. In this case as first record (position: 0). Store.add will place the record on the end of the store (and grid). You could store.sync() to save the record to the database instead of the Ajax request. You have the api property of the proxy allready configured.

Dynamically load data to grid

1 Answers