extjs grid: повторно получать данные с сервера при нажатии кнопки

Question

Я пытаюсь исследовать Extjs-Grid.Я создал кнопку для отображения сетки при нажатии на нее.Мой код, как показано ниже:

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
        });

    });
}

Но когда я нажимаю кнопку N раз -> отображается N сеток.Я хочу отображать только одну сетку, и после нажатия кнопки она снова получит данные с сервера.

Пожалуйста, помогите мне.

Спасибо

Answer 1

Возможно, вы захотите взглянуть на некоторые примеры ExtJS Grid . У них много информации о рендеринге сеток из магазина и создании панелей инструментов (например, кнопки обновления). Немного очистив ваш пример кода, я пришел к следующему:

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()
            }
        }
    })
});