Question

我得到一个响应对象作为json并将它传递给gridgenerator函数。现在生成的网格我想要对它进行分页。但是我最终得到的是一个网格，其所有记录都在一个页面中。浪费了五天。谢谢你的帮助。

Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*',
        'Ext.form.*','Ext.ux.LiveSearchGridPanel' ]);

Ext.onReady(function() {

    Ext.QuickTips.init();

    var bd = Ext.getBody();

    var simple = Ext.create('Ext.form.Panel', {

        frame : true,
        align : 'center',
        renderTo : Ext.getBody(),
        title : 'Simple Form',
        bodyStyle : 'padding:5px 5px 0',
        width : 600,
        fieldDefaults : {
            msgTarget : 'side',
            labelWidth : 75
        },
        defaultType : 'textfield',
        defaults : {
            anchor : '100%'
        },

        items : [ {
            fieldLabel : 'Date',
            xtype : 'datefield',
            name : 'start',
            id : 'start',
            format : 'dd-mmm-yyyy',
            allowBlank : false,
            cls : 'input_single',
            emptyText : 'dd-MMM-yyyy',

        }, {
            fieldLabel : 'Start Time',
            name : 'sTime',
            xtype : 'timefield',
            id : 'sTime',
            format : 'H:i',
            altFormats : 'H:i'

        }, {

            fieldLabel : 'End Time',
            name : 'eTime',
            xtype : 'timefield',
            id : 'eTime',
            format : 'H:i',
            altFormats : 'H:i'

        } ],
        buttons : [ {
            text : 'Submit',
            handler : function() {

                var startDate = Ext.getCmp('start').getValue();
                var sTime = Ext.getCmp('sTime').getRawValue();
                var eTime = Ext.getCmp('eTime').getRawValue();

                Ext.Ajax.request({
                    url : '/LogHandlers/Logging',
                    method : 'POST',
                    params : {
                        start : startDate,
                        startTime : sTime,
                        endTime : eTime
                    },

                    success : function(result, request) {

                        gridGenerate(result, request);

                    },
                    failure : function(result, request) {
                        alert('Error in server' + result.responseText);
                    }
                });
            }
        }]

    });
    function gridGenerate(result, request) {

        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

        var serverData = Ext.decode(result.responseText);

        // create the data store
        var store = Ext.create('Ext.data.JsonStore', {
            fields : [  {
                name : 'Date',
                type : 'string'
            },{
                name : 'TimeStamp',
                type : 'string'
            }, {
                name : 'loggerLevel',
                type : 'string'
            }, {
                name : 'LoggerName',
                type : 'string'
            }, {
                name : 'Method',
                type : 'string'
            }, {
                name : 'Message',
                type : 'string'
            }, {
                name : 'Customer Name',
                type : 'string'
            }, {
                name : 'ActivityName',
                type : 'string'
            }],
            data : serverData
        });

        // create the Grid
        var grid = Ext.create('Ext.grid.Panel', {
            store : store,
            stateful : true,
            stateId : 'stateGrid',
            columns : [  {
                header : 'Date',
                dataIndex : 'Date'
            },{
                header : 'Timestamp',
                dataIndex : 'TimeStamp'
            }, {
                header : 'LoggerLevel',
                dataIndex : 'loggerLevel'
            }, {
                header : 'LoggerName',
                dataIndex : 'LoggerName'
            }, {
                header : 'Method',
                dataIndex : 'Method'
            }, {
                header : 'Message',
                dataIndex : 'Message'
            } , {
                header : 'Customer Name',
                dataIndex : 'Customer Name'
            } , {
                header : 'ActivityName',
                dataIndex : 'ActivityName'
            } ],
            height : 550,
            width : 900,
            title : 'Logs',
             bbar: Ext.create('Ext.PagingToolbar', {
                    store: store,
                    pageSize: 20,
                    displayInfo: true,
                    displayMsg: '{0} - {1} of {2}',
                    emptyMsg: "No topics to display"
                }),
            renderTo : Ext.getBody(),

        });
    }
});

Answer 1

要使用Ext.PagingToolbar，您应该为服务器提供参数（例如＆＃39; start＆＃39;和＆＃39; limit＆＃39;），您的服务器端代码应该读取这些参数并返回适当的数据。但是如果你想使用本地分页，请尝试使用Ext.ux.data.PagingStore扩展名：

http://www.sencha.com/forum/showthread.php?71532-Ext.ux.data.PagingStore-v0.5

分页在extjs.d中不起作用

1 个答案: