PageSize不支持ExtJS中的Grid [英] PageSize not working on Grid in ExtJS

问题描述

我想限制每页的记录到一个特定的号码在网格中应用分页，但是由于某些原因而导致失败。

I want to limit the records per page to a specific number apply paging in the grid but its failing due to some reason.

任何人都可以说为什么会失败，还是不工作？以下是小提琴。

Can anyone say why it's failing, or not working? Here's the Fiddle.

我的商店

    var myStore=Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['busname', 'time', 'typebus',],
        pageSize:2,
        data: [{
            busname: 'ABCD',
            time: '15:30:00',
            typebus: 'AC Volvo',

        }, {
            busname: 'aaa',
            time: '13:30:00',
            typebus: 'Seater',

        },{
            busname: 'AAAA',
            time: '18:30:00',
            typebus: 'Sleeper',

        },{
            busname: 'ABCD',
            time: '19:30:00',
            typebus: 'AC Volvo',

        },]

网格面板

Ext.create('Ext.grid.Panel', {
        xtype :'gridpanel',
        itemId:'busTimegrid',
        pageSize:1,
        title: 'BUS DEATILS',
        mapperId:'getBusTime',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [{
            header: 'Bus Name',
            dataIndex: 'busname',
            editor: 'textfield'
        }, {
            text: 'Bus Time',
                dataIndex: 'time',
            xtype: 'gridcolumn',
            renderer: function (value) {
                if (value instanceof Date)
                    return Ext.util.Format.date(value, 'H:i:s');
                else
                return value;
            },
            flex: 1,
            editor: {
                xtype: 'timefield',
                format: 'H:i:s',
                allowBlank: true,
                maskRe: /[0-9,:]/,
            }
        }, {
            header: 'Bus TYpe',
            dataIndex: 'typebus',
            editable:true,
            renderer: function (value) {
                if (Ext.isNumber(value)) {
                    var store = this.getEditor().getStore();
                    return store.findRecord('id', value).get('name');
                }
                return value;
            },
            editor: {
                xtype: 'combo',
                displayField: 'name',
                valueField: 'id',
                editable:true,
                forceSelection:true,
                store: Ext.create('Ext.data.Store', {
                    fields: ['id', 'name'],
                    data: [{
                        id: 1,
                        name: 'AC Volvo'
                    }, {
                        id: 2,
                        name: 'Seater'
                    }, {
                        id: 3,
                        name: 'Sleeper'
                    }]
                })

            }
        }],
        selModel: 'cellmodel',
        plugins: {
            ptype: 'cellediting',
            clicksToEdit: 1,
        },
        listners: [{
            fn: 'onUsernamefieldBlur',
            event: 'blur',
            delegate: 'busname'
        }],
        onUsernamefieldBlur: function (textfield, e, eOpts) {

        if (textfield.getValue() === '') {
            Ext.Msg.alert("Busname can't be empty");
            textfield.setFocus(true);
        }
    },
        height: 200,
        width: 400,
            dockedItems: [{
            xtype: 'pagingtoolbar',
            store: myStore,   // same store GridPanel is using
            dock: 'bottom',
            displayInfo: true
        }],
        renderTo: Ext.getBody()

    });

添加了 pageSize 不工作我似乎没有找到什么问题。

Added the pageSize but still the paging is not working. I don't seem to find out what's the issue. How can I find out the exact thing I'm missing?

推荐答案

从你的问题我观察到你想实现本地分页与实际分页不同。要做到这一点，你需要提到内存代理并启用分页，将我的下面的代码放在你的商店。

From your question I observed you want to achieve local pagination which is different from actual pagination. To do this first you need to mention memory proxy and enable the pagination , Put my below code in your store.

   proxy: {
           type: 'memory',
          enablePaging: true
    }

我可以把上面的代理人放在你的小提琴中来得到分页。

I am able to get the pagination by putting the above proxy in your fiddle.

这篇关于PageSize不支持ExtJS中的Grid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！