ExtJS ArrayStore 的分页问题

发布于 2024-11-30 09:40:14 字数 865 浏览 1 评论 0原文

我正在 ExtJS 中尝试一些东西，包括显示具有不同功能的网格。

在我的页面中，我首先声明一个包含大约一百个数据的 Javascript 数组，并将其存储在名为 myArray 的变量中。

然后，我执行以下操作：

Ext.define('Fund2',{
extend:'Ext.data.Model',
fields:[{name:'Id'},
{name:'Id2'},
{name:'Name'},
{name:'Name2'},
{name:'Name3'},
{name:'Name4'},
{name:'Param1'},
{name:'Param2'},
{name:'Param3'}]
});

var myStore2=Ext.create('Ext.data.ArrayStore',{
model:'Fund2',
data:myArray,
pageSize:10
});

Ext.create('Ext.grid.Panel',{
renderTo:'div2',
store:myStore2,
height:500,
width:500,
columns:[{text:'Id',dataIndex:'Id'},
{text:'Name',dataIndex:'Name'},
{text:'Additional',dataIndex:'Param1'}],
dockedItems:[{
xtype: 'pagingtoolbar',
store:myStore2,
dock: 'bottom',
displayInfo: true
}]
});

在页面上，网格面板正确显示并填充数据。

分页工具栏也可用并计算正确的页面数量。

然而，数据并没有被“分页”；所有记录都显示在网格中。

你知道我哪里做错了吗？

原文

I am trying out a few things in ExtJS including displaying a grid with different functionalities.

In my page, I first declare a Javascript Array of about a hundred data which I store in a variable called myArray

Then, I do the following:

Ext.define('Fund2',{
extend:'Ext.data.Model',
fields:[{name:'Id'},
{name:'Id2'},
{name:'Name'},
{name:'Name2'},
{name:'Name3'},
{name:'Name4'},
{name:'Param1'},
{name:'Param2'},
{name:'Param3'}]
});

var myStore2=Ext.create('Ext.data.ArrayStore',{
model:'Fund2',
data:myArray,
pageSize:10
});

Ext.create('Ext.grid.Panel',{
renderTo:'div2',
store:myStore2,
height:500,
width:500,
columns:[{text:'Id',dataIndex:'Id'},
{text:'Name',dataIndex:'Name'},
{text:'Additional',dataIndex:'Param1'}],
dockedItems:[{
xtype: 'pagingtoolbar',
store:myStore2,
dock: 'bottom',
displayInfo: true
}]
});

On th page, the grid panel is displayed properly and filled with the data.

The paging toolbar is also available and computes the right amount of pages.

However, the data is not "paged"; all the records are shown in the grid.

Do you know where I made a mistake?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

倾城泪 2024-12-07 09:40:14

添加此：

myStore2.on('load', function(store, records, successful, operation) {
            this.loadData(myArray.slice((this.currentPage-1)*PAGE_SIZE, (this.currentPage)*PAGE_SIZE));
        },myStore2);

完整版：

Ext.onReady(function(){
    var myArray=[];
    for (var i=0; i<100; i++) {
        myArray[i] = ['Id_'+i,'Id2_'+i,'Name_'+i,'Name2_'+i,'Name3_'+i,'Name4_'+i,'Param1_'+i,'Param2_'+i,'Param3_'+i];
    }
    var PAGE_SIZE = 10;

    Ext.define('Fund2',{
        extend:'Ext.data.Model',
        fields:[{name:'Id'},{name:'Id2'},{name:'Name'},{name:'Name2'},{name:'Name3'},{name:'Name4'},{name:'Param1'},{name:'Param2'},{name:'Param3'}]});

    var myStore2=Ext.create('Ext.data.ArrayStore',{
        model:'Fund2',
        data:myArray,
        pageSize:PAGE_SIZE
    });

    myStore2.on('load', function(store, records, successful, operation) {
        this.loadData(myArray.slice((this.currentPage-1)*PAGE_SIZE, (this.currentPage)*PAGE_SIZE));
    },myStore2);

    myStore2.load();

    Ext.create('Ext.grid.Panel',{
        renderTo:Ext.getBody(),
        store:myStore2,
        height:500,
        width:500,
        columns:[{text:'Id',dataIndex:'Id'},
                 {text:'Name',dataIndex:'Name'},
                 {text:'Additional',dataIndex:'Param1'}],
        dockedItems:[{
            xtype: 'pagingtoolbar',
            store:myStore2,dock: 'bottom',
            displayInfo: true
        }]
    });
});

Add this:

myStore2.on('load', function(store, records, successful, operation) {
            this.loadData(myArray.slice((this.currentPage-1)*PAGE_SIZE, (this.currentPage)*PAGE_SIZE));
        },myStore2);

Full version:

Ext.onReady(function(){
    var myArray=[];
    for (var i=0; i<100; i++) {
        myArray[i] = ['Id_'+i,'Id2_'+i,'Name_'+i,'Name2_'+i,'Name3_'+i,'Name4_'+i,'Param1_'+i,'Param2_'+i,'Param3_'+i];
    }
    var PAGE_SIZE = 10;

    Ext.define('Fund2',{
        extend:'Ext.data.Model',
        fields:[{name:'Id'},{name:'Id2'},{name:'Name'},{name:'Name2'},{name:'Name3'},{name:'Name4'},{name:'Param1'},{name:'Param2'},{name:'Param3'}]});

    var myStore2=Ext.create('Ext.data.ArrayStore',{
        model:'Fund2',
        data:myArray,
        pageSize:PAGE_SIZE
    });

    myStore2.on('load', function(store, records, successful, operation) {
        this.loadData(myArray.slice((this.currentPage-1)*PAGE_SIZE, (this.currentPage)*PAGE_SIZE));
    },myStore2);

    myStore2.load();

    Ext.create('Ext.grid.Panel',{
        renderTo:Ext.getBody(),
        store:myStore2,
        height:500,
        width:500,
        columns:[{text:'Id',dataIndex:'Id'},
                 {text:'Name',dataIndex:'Name'},
                 {text:'Additional',dataIndex:'Param1'}],
        dockedItems:[{
            xtype: 'pagingtoolbar',
            store:myStore2,dock: 'bottom',
            displayInfo: true
        }]
    });
});

回复收藏 0 原文