ExtJS 4.1 如何动态创建带网格的窗口

Question

我是一个新的 ExtJS 用户，我有一个问题。

我有一家汽车商店，我创建了一个带有按钮的菜单，可以按品牌或型号查看所有汽车。
现在我想显示一个带有网格面板的窗口，其中包含我的特定品牌/型号的所有汽车。 实际上，当我创建按钮时，我会这样做:

var aCarButton = Ext.create('Ext.Button', {
    text: aTextButton,
    handler: function() {
        var aResultWindow = new ResultWindow(aTextButton, myCarStore, 'Brand', aBrandValue);
        aResultWindow.create();
    }
});
aMenuPanel.add(aCarButton);

对于我的功能，我这样做:

function ResultWindow(aTitle, aStore, aFilter, aFilterValue) {
    this.myTitle = aTitle;
    this.myStore = aStore;
    this.myFilter = aFilter;
    this.myFilterValue = aFilterValue;
    this.myStore.filter(aFilter, aFilterValue); 
}

ResultWindow.prototype.create = function() {
    var grid = Ext.create('Ext.grid.Panel', {
        store: this.myStore,
        columns: [
            ...
        ]
    });
    var window = Ext.create('Ext.window.Window', {
        layout: 'fit',
        maximizable: true,
        title: this.myTitle,
        items: [ grid ],
        width: 1024,
        height: 768
    });
    window.show();
}

首先，我不确定这是显示我想要的内容的最佳方式。
其次，我有一个按钮可以显示所有汽车(无过滤器)，但需要大约 2 分钟才能显示我所有的 12000 条记录。

所以我的第一个问题是知道我显示我想要的内容的解决方案是否正确？
我的第二个问题是否可以更快地显示所有汽车？

PS:如果我有一些错误，请原谅我的英语。

Answer 1

这当然是一种方法，但我认为这不是在 Ext 中最好的方法，我将在这些方面做一些事情:

var aCarButton = Ext.create('Ext.Button', {
text: aTextButton,
handler: function() {
        myCarStore.filter('Brand', aBrandvalue);
        var win = Ext.create("Ext.window.Window", {
            title: aTextButton,
            layout: 'fit',
            maximizable: true,
            width: 1024,
            height: 768,
            items:[{
                xtype: 'grid',
                store: myCarStore,
                columns: [
                    ...
                ]
            }]
        });
        win.show();
});
aMenuPanel.add(aCarButton);

我声明 Window inline 只是为了这个例子，我可能会选择一个包含网格的自定义 Window 和一些自定义函数来过滤网格，但要点:你不需要在这里搞乱原型(prototype)，真的没有必要，如果你想要的只是控制你的窗口的创建方式，那么 define 一个这样的:

Ext.define("CarsWindow", {
    extend: 'Ext.window.Window',
    items:[
        ...
    ],
    filterByBrand: function(brandValue){
        this.down('grid').getStore().filter('Brand', brandValue);
    },
    ...
});

然后您可以通过以下方式实例化它:

Ext.create("CarsWindow", { title: 'YourTitle', ...}).show();

对于你的第二个问题，有一种方法可以在不损失太多性能的情况下在 Ext 中显示大型数据集，你可以在你的商店定义中设置 buffered: true，然后调用 ´store.loadPage (1)' 更多信息:store.buffered

希望对您有所帮助。