网格面板中的 ExtJs 5.1 分页工具栏

Posted 2023-02-26

【中文标题】网格面板中的 ExtJs 5.1 分页工具栏

【英文标题】：ExtJs 5.1 paging tool bar in grid panel

【发布时间】：2015-04-29 12:34:13

【问题描述】：

使用 ExtJS 5.1，当我加载网格面板时，它在分页工具中显示正确的分页数。但在页面加载期间，它总是显示第 1 页，共 5 页。上一个和下一个按钮被禁用。

#

var store = new Ext.data.Store(

    autoLoad: params:start: 0, limit: 5,
    pageSize: 5,
    remoteSort: true, 
    model: 'TenantDetails',
    proxy: 
        type: 'ajax',
        enablePaging : true, 
        url: 'http://localhost:8080/restcountries-dev/rest/page/v0.5/tenant', 
        reader:  new Ext.data.JsonReader(
            type: 'json' ,              
            totalProperty:15,
            rootProperty:'tenant'
        )
    ,
    listeners:      
        load:function(store)            
            Ext.getCmp('tenant_detail_grid').getSelectionModel().select(0, true);            
             
   
);

#

分页工具栏定义如下。

bbar:

 Ext.create('Ext.PagingToolbar', 

        store: store,
        displayInfo: true, 
        displayMsg: '0 - 1 of 2',
        emptyMsg: "No topics to display"
    )

#

不知道我到底错过了什么。谢谢

【参考方案1】：

您好，您的代码看起来正确。这是我的分页的一个工作示例。

initComponent: function () 
    var me = this;

    me.store = Ext.create('Desktop.children.store.childrenStore');

    me.columns = [
        
            text     : 'Nachname',
            dataIndex: 'lastName',
            flex: 1
        ,
        
            text     : 'Vorname',
            dataIndex: 'firstName',
            flex: 1
        ,
        
            text     : 'Gruppe',
            //name: 'group_id',
            dataIndex: 'groupName',
            flex: 1
        ,
        
            text     : 'Faktor',
            //name: 'group_id',
            dataIndex: 'factorName',
            flex: 1
        ,
           
            xtype: 'datecolumn',
            text     : 'Geburtsdatum',
            dataIndex: 'birthdate',
            format: 'd.m.Y',
            flex: 1
        ,
        
            text     : 'Status',
            //name: 'group_id',
            dataIndex: 'isActive',
            flex: 1
        ,
        
                xtype: 'actioncolumn',
                width: 60,
                menuDisabled: true,
                items: this.LoadControlBar()
            
    ];

    me.plugins = [
        ptype:'saki-gridsearch'
        ,searchText: 'Suchen'
        ,autoTipText: 'Mindestens zwei Zeichen'
        ,selectAllText: 'Selektiere alle'
    ];

    me.bbar = me.paging = Ext.create('Ext.toolbar.Paging', 
         store:me.store
        ,displayInfo:true

    );


    me.tbar = [
        
            xtype: 'button',
            id:'child_btn_add',
            text:'Kind hinzufügen',
            tooltip:'Neues Kind hinzufügen',
            iconCls:'add',
            hidden: (CheckPermission('Desktop.children.view.Mainwindow') != "WRITE"),
            handler:function(view, e)
                this.fireEvent('AddChildren', view, e);
            
        ,
        
            xtype: 'button',
            id: 'btnChildExport',
            text: 'Liste exportieren',
            tooltip: 'Spezifische Liste exportieren',
            iconCls: 'exportList',
            handler: function(view, e)
                this.fireEvent('ExportList', view, e);
            
        
    ];

    me.callParent();
,

商店：

Ext.define('Desktop.children.store.childrenStore', 
extend: 'Ext.data.Store',
id: 'childrenStore',
alias: 'widget.childrenStore',

requires: [
    'Desktop.children.model.childrenModel',
    'Ext.data.proxy.Memory',
    'Ext.data.reader.Array'
],


model: 'Desktop.children.model.childrenModel',
//autoLoad:true,
pageSize: 10,
proxy:

    type:'ajax',
    enablePaging: true,
    url:'resources/php/json.php',
    headers:  'Content-Type': 'application/json' ,
    extraParams:
        data : JSON.stringify(
            module : "children",
            action : "load",
            jsonObject : null),
        start: 0,
        limit: 10,
    ,
    reader:
        type:'json',
        rootProperty: 'Anfang'
    
,

sorters: [
        property : 'lastName',
        direction:'ASC'
],
);

【讨论】：

以上代码你用的是哪个版本的ExtJS？你知道 ExtJS 5 中分页工具栏的 bug 吗？

它是 5.1，它工作正常。您的 JSON 请求是什么样的？

"租户": [ "addressLine1":"BLR","addressLine2":"KAR","city":"KSLayout","country":"India","email" :"[e-mail]","id":"10","orgName":"KSRTC","primaryContact":"1111111","state":"Karnataka","telNo":"0801111"," tinNo":"Tin001", "addressLine1":"BLR","addressLine2":"KAR","city":"KSLayout","country":"India","email":"c@c. com","id":"19","orgName":"APSRTC10","primaryContact":"1111111","state":"Karnataka","telNo":"0801111","tinNo":"Tin002" "zip":"11111" .... ]