2014-01-27 4 views
0

Я получаю объект-ответ как json и передаю его функции gridgenerator. Теперь, когда сгенерированная сетка я хочу разбивать на нее. Но все, что я заканчиваю, это сетка со всеми его запись на одной странице. Прошло пять дней. Спасибо за помощь.Pagination не работает в extjs.d

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(), 

     }); 
    } 
}); 
+1

возможный дубликат [Разбивка не работает в ExtJS] (http://stackoverflow.com/questions/21379610/ pagination-not-working-in-extjs) –

ответ

0

Для использования Ext.PagingToolbar вы должны предоставить параметры сервера (например, «начало» и «предел»), и на стороне сервера кода следует читать эти Params и вернуть соответствующие данные. Но если вы хотите использовать местную нумерацию страниц, попробуйте расширение Ext.ux.data.PagingStore:

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

+0

Соответствующие данные? – sathya

+0

Я имею в виду {start: 0, limit: 20}, он должен вернуть первые 20 записей, для {start: 40, limit: 20} - третья страница. – Aniketos

+0

Прочитайте ExtJS API: Пейджинг обычно обрабатывается на стороне сервера. Клиент отправляет параметры на серверную сторону, которые сервер должен интерпретировать, а затем отвечать соответствующими данными. – Aniketos