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次 - ＆gt;它显示N个网格。我只想显示一个网格，单击按钮后它将再次从服务器获取数据。

请帮帮我。

谢谢

Answer 1

您可能想看一些ExtJS Grid examples。他们有很多关于从商店渲染网格的信息，以及创建工具栏（例如，可能包括刷新按钮）。在稍微清理了您的示例代码之后，我想出了这个：

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

extjs grid：单击按钮时从服务器重新获取数据

1 个答案: