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

Posted 2023-02-25

【中文标题】ExtJS 4.1 如何动态创建带有网格的窗口

【英文标题】：ExtJS 4.1 How to create a window with grid dynamically

【发布时间】：2012-12-13 12:56:50

【问题描述】：

我是 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();

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

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

PS：如果我做错了，对不起我的英语。

【参考方案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 内联，我可能会选择包含网格的自定义 Window 和一些自定义函数来过滤网格，但要点：你不需要在这里弄乱原型，真的没有必要，如果你想要的只是控制你的窗口是如何创建的，那么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

希望对您有所帮助。

【讨论】：

是的，这对我很有帮助。现在我要试试这个，我会给你一个反馈

所以我定义了我的 CarsWindow 并放置了这样的设置项：[ xtype:'grid', store: Ext.data.StoreManager.lookup('myCarStore'), columns: [ ... ] ]。但是现在当我实例化它时，我的网格不显示任何数据。当然，我的商店有一个 storeId：'myCarStore'。

好的，不要考虑我的第二条评论。我重构了我的代码，现在好多了。