使用 Ext js 在网格中仅显示有限的记录

Posted

技术标签:

【中文标题】使用 Ext js 在网格中仅显示有限的记录【英文标题】:Display only limited no of records in grid using Ext js 【发布时间】:2014-03-20 09:57:37 【问题描述】:

我在使用 Ext js 制作网格时遇到问题。所以因为我确实存储和网格。它工作正常。但我的问题是,我有 14000 条记录,它显示在网格中,单次拍摄。但我想要只显示 100 条记录和接下来的 100 条记录,如页面显示。我使用了分页工具栏,但我仍然没有得到它。 请一些人通过发布您的代码来帮助我。 提前致谢。 [对不起我的英语]

function some function(url)
  
Ext.define('some model', 
            extend: 'Ext.data.Model',
            fields: some fields
      );
var store = Ext.create('Ext.data.Store',
        id:'store',
        model:'some model',
        remoteGroup:true,
        remoteSort:true,
        proxy: 
            type:'rest',
            url:url
        reader: 
            type: "json",
            root:"myroot",
            idProperty:'id'
        
        ,
        autoLoad:true
); 
return store;



var store= some function(url);
var grid = Ext.create('Ext.grid.Panel', 
                        id:'Grid',
                        title:'__________',
                        store: store,
                        loadMask: true,
                        width:'100%',
                        autoHeight:true,
                        viewConfig: 
                            emptyText:'No Available'
                        ,
                        frame:false,
                        columns:[
                        
                        id: 'c',
                        header:'bla',
                        dataIndex:'12',
                        width:'35%',
                        sortable:true,
                        ,
                        
                        id: 's',
                        header:'bla',
                        dataIndex:'21212',
                        width:'65%',
                        sortable:true,
                        
                        ],
                     bbar: new Ext.PagingToolbar(
                            store:store,
                            pageSize:10,
                            id:'paging',
                            displayInfo:true,
                            displayMsg:'Displaying  0 - 1 of 2',
                            emptyMsg: "No Available",
                            prependButtons:false

                        ),
                       );

【问题讨论】:

【参考方案1】:

你的网格应该是这样的

Ext.define('Com.grid.myGrid',
            extend:'Ext.grid.Panel',
            alias:'widget.myGridAlias',
            store:'myStore',
                initComponent:function()
                
                     this.bbar = Ext.create('Ext.PagingToolbar', 
                             store : this.store,
                             displayInfo : true,
                             displayMsg : 'Records 0 - 1 of 2',
                             emptyMsg : 'No files.' 
                     );
                
);

你的商店应该是这样的

Ext.define('Com.store.myStore',
        extend:'Ext.data.Store',
        model : 'myModel',
        //autoLoad:true,
        pageSize: 100
);

【讨论】:

您必须在商店中定义 pageSize。 之后尝试 store.loadPage(1); 我应该在哪里添加这一行。在边店,或网格..请说清楚..:( inside store.. 我已经给了你定义商店的例子。我在那边提到了 pageSize: 100。 和 store.loadPage(1);加载代码后,您可以在任何地方添加。【参考方案2】:

Ext Js Sencha 文档中已经提到了这类示例。 这是Link

【讨论】:

以上是关于使用 Ext js 在网格中仅显示有限的记录的主要内容,如果未能解决你的问题,请参考以下文章

Ext JS:如何在具有多个列值的网格中查找记录

在 Ext JS 中搜索模式

在 ext js 中的按钮单击事件上从网格和数据库中删除记录

EXT JS - 单击传输记录以存储弹出网格面板

在 Ext.DataView 中显示存储的有限子集(或单个记录)

Extjs:如何将存储记录用作网格的存储