2014-01-27 37 views
0

我得到一個響應對象爲json,並將它傳遞給gridgenerator函數。現在生成的網格我想分頁。但所有我最終都與一個網格與所有它的記錄在一個頁面中。五天時間運行。感謝您的幫助。分頁不能在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

可能重複(http://stackoverflow.com/questions/21379610/分頁不工作在extjs) –

回答

0

要使用Ext.PagingToolbar您應該爲服務器提供的參數(如「開始」和「限制」),你的服務器端代碼應閱讀這些參數和返回相應的數據。但是,如果你想使用本地分頁,嘗試Ext.ux.data.PagingStore延伸:中[分頁沒有ExtJS的工作]

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