ExtJS 4.1如何用网格动态创建窗口 [英] ExtJS 4.1 How to create a window with grid dynamically

问题描述

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

I'm a new ExtJS user and I've a question.

我有一个商店与汽车，我创建一个菜单与按钮，以查看所有的汽车品牌或型号。

现在我想显示一个窗口与一个网格面板包含所有我的汽车为一个特定的品牌/型号。
实际上当我创建我的按钮我这样做：

I have a store with cars and I create a menu with buttons to see all cars by brand or model.
Now I want to display a window with a grid panel containing all my cars for a particular brand/model. Actually when I create my buttons i do that :

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

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

For my functions I do that :

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记录。

Firstly I'm not sure that is the best way to display what I want.
And Secondly I have a button that display all cars (no filters) but that take about 2 min to display all my 12000 record.

所以我的第一个问题是知道我的解决方案显示我想要的是正确的？

我的第二个问题是否可以更快地显示所有的汽车？

So my first question is to know if my solution to display what I want is correct ?
And my second question if is it possible to display all cars faster ?

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

PS : Sorry for my English if I did some errors.

推荐答案

这当然是一种方法我不认为这是Ext中最好的方法，我会在这些行中做一些事情：

That is certainly a way to do it but i don't think it is the best way to do it in Ext, i'll do something among these lines:

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，我可能会去包含网格的自定义窗口和一些自定义函数在网格上进行过滤，但主要内容：您不需要在这里混淆原型，没有必要真的，如果您想要的是控制如何创建窗口，然后定义如下所示：

I'm declaring the Window inline just for the sake of the example, i would probably go for a custom Window with the grid included and some custom functions to filter on the grid but, the main point: you don't need to mess with prototype here, there is no need really, if all you want is control how your Window is created, then define one like this:

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

然后，您可以通过以下方式实例化：

And then you can instantiate it via:

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

对于第二个问题，有一种方法可以在Ext中显示大型数据集，而不会失去太多的性能，您可以在您的商店定义中设置 buffered：true ，然后再调用'store.loadPage（1）'： store.buffered

For your second question, there is a way to show large datasets in Ext without losing too much performance, you can set buffered: true on your store definition and, then, call ´store.loadPage(1)´ more on this: store.buffered

希望有帮助。

这篇关于ExtJS 4.1如何用网格动态创建窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！