CODEWITHSUNDEEP
extjs
MartinJoo
MartinJoo

Reputation: 2872

extjs grid: re-get data from server when click button

I am try to research Extjs- grid. I created a button to display grid when click it. My code like below:

function onDisplay() {
    Ext.onReady(function () {
        var proxy = new Ext.data.HttpProxy({
            url: 'server.jsp'
        });
        var reader = new Ext.data.JsonReader({}, [{
            name: 'bookId',
            mapping: 'bookId'
        }, {
            name: 'bookName'
        }])

        var gridStore = new Ext.data.Store({
            proxy: proxy,
            reader: reader
        });

        gridStore.load();

        cols = [{
            header: "bookId",
            width: 60,
            dataIndex: 'bookId',
            sortable: true
        }, {
            header: "bookName",
            width: 60,
            dataIndex: 'bookName',
            sortable: true
        }];

        var firstGrid = new Ext.grid.GridPanel({
            store: gridStore,
            columns: cols,
            renderTo: 'example-grid',

            width: 540,
            height: 200
        });

    });
}

But when i click button N times -> it is displayed N grids. I only want display one grid and after click button it will get data from server again.

Please help me.

Thank you

Upvotes: 1

Views: 4169

Answers (1)

NT3RP
NT3RP

Reputation: 15370

You might want to look at some of the ExtJS Grid examples. They have lots of information about rendering grids from a store, and creating toolbars (which may include refresh buttons, for example). After cleaning up your example code a bit, I've come up with this:

Ext.onReady(function(){
    var proxy=new Ext.data.HttpProxy(    {url:'server.jsp'});
    var reader=new Ext.data.JsonReader({},[
        {name: 'bookId', mapping: 'bookId'},
        {name: 'bookName'}         
    ])

    var gridStore=new Ext.data.Store({
        proxy:proxy,
        reader:reader
        autoLoad:true
    });


    cols= [
        {header: "bookId", width: 60, dataIndex: 'bookId', sortable: true},
        {header: "bookName", width: 60, dataIndex: 'bookName', sortable: true}
    ];

    var firstGrid = new Ext.grid.GridPanel({
        store        : gridStore,
        columns      : cols,
        renderTo     :'example-grid',

        width       :540,
        height      :200
    });


    //this code should ensure that only the grid updates,
    //rather than rendering a whole new grid each time
    var button = Ext.Button({
        renderTo: "ButtonContainerId",
        listeners: {
            'click': function() {
                gridStore.load()
            }
        }
    })
});

Upvotes: 1

Related Questions