ExtJS benutzerdefinierte Paging-Parameter

Question

Ich habe ein Extjs Grid mit einer Paging-Symbolleiste. Ich muss die benutzerdefinierten Serverparameter für jede Anforderung weitergeben, die ich beim Paging der Daten mache. Ich habe versucht, die Parameter im Laden laden Ereignis, aber es scheint, dass der Pager nicht die letzten Optionen zum Laden der Speicher beim nächsten Klick auf die Schaltfläche erinnert. Hier

ist ein Code:

var sourceGrid = new Ext.grid.EditorGridPanel({ 
    region: 'center', 
    title: localize.sourceView, 
    store: sourceStore, 
    trackMouseOver: true, 
    disableSelection: false, 
    loadMask: true, 
    stripeRows: true, 
    autoExpandColumn: "label", 

    // grid columns 
    columns: [ 
     { header: 'ID', dataIndex: 'id', width: 50, hidden: true, sortable: true }, 
     { header: 'Language ID', dataIndex: 'languageID', width: 50, hidden: true, sortable: true }, 
     { header: 'Language', dataIndex: 'language', width: 20, hidden: true, sortable: true }, 
     { header: 'Key ID', dataIndex: 'keyID', width: 30, hidden: true, sortable: true }, 
     { header: 'Key', dataIndex: 'keyValue', width: 40, sortable: true }, 
     { header: 'Label', dataIndex: 'label', sortable: true, editor: new Ext.form.TextField({ allowBlank: false }) }, 
     { header: 'Description', dataIndex: 'keyDesc', width: 30 }, 
     { header: 'Tool Tip', dataIndex: 'toolTip', width: 80, sortable: true, editor: new Ext.form.TextField({ allowBlank: true }) } 
    ], 

    // customize view config 
    viewConfig: { 
     forceFit: true, 
     enableRowBody: true, 
     showPreview: false 
    }, 

    sm: new Ext.grid.RowSelectionModel({ 
     singleSelect: false, 
     moveEditorOnEnter: true 
    }), 

    // actions buttons 
    tbar: new Ext.Toolbar({ 
     items: [{ 
      text: localize.create, 
      handler: function() { 
       onAddLabelClick(); 
      } 
     }, '|', { 
      text: localize.deleteText, 
      handler: function (tb, e) { onLabelDeleteAttempt() } 
     }, '|', { 
      text: localize.importFromExcel, 
      handler: function (tb, e) { 
       showUploadWin(getUploadLabelsForm()); 
      } 
     }, '|', { 
      id: 'export-toExcel-tbar', 
      text: localize.exportToExcl, 
      handler: function (tb, e) { 
       onExportToExcelClick(tb); 
      } 
     }, '|', { 
      id: 'search-label-textbox', 
      xtype: 'textfield', 
      width:200, 
      blankText: localize.searchLabels 
     }, { 
      id: 'search-label-button', 
      text: 'Search', 
      handler: function (t, e) { 

      } 
     } 
     ] 
    }), 

    // paging bar on the bottom 
    bbar: new Ext.PagingToolbar({ 
     id: 'labelsBbr', 
     pageSize: 36, 
     store: sourceStore, 
     displayInfo: true, 
     displayMsg: localize.displayLabels, 
     emptyMsg: localize.noLablesToDisplay 
    }), 

    // right click menu 
    contextMenu: new Ext.menu.Menu({ 
     items: [{ 
      id: 'export-excel', 
      text: localize.exportToExcl 
     }], 
     listeners: { 
      itemclick: function (item) { 
       switch (item.id) { 
        case 'export-excel': 
         onExportToExcelClick(item); 
         break; 
       } 
      } 
     } 
    }), 

    listeners: { 
     keydown: { 
      scope: this, 
      fn: function (e) { 
       if (e.getCharCode() == 46) { 
        onLabelDeleteAttempt(); 
       } 
      } 
     }, 
     rowcontextmenu: function (g, ri, e) { 
      var m = g.contextMenu; 
      m.contextNode = g; 
      m.showAt(e.getXY()); 
     }, 
     // privant default browser menu on client right click. 
     render: function (grid) { 
      grid.getEl().on('contextmenu', Ext.emptyFn, null, { preventDefault: true }); 
     } 
    } 
});  
var sourceStore = new Ext.data.JsonStore({ 
    url: hp, 
    storeId: 'labels-data-store', 
    idProperty: 'id', 
    totalProperty: 'totalCount', 
    root: 'translations', 
    fields: [ 
     { name: 'id', type: 'string' }, 
     { name: 'languageID', type: 'string' }, 
     { name: 'language', type: 'string' }, 
     { name: 'keyID', type: 'string' }, 
     { name: 'keyValue', type: 'string' }, 
     { name: 'keyDesc', type: 'string' }, 
     { name: 'label', type: 'string' }, 
     { name: 'toolTip', type: 'string' } 
    ], 
    paramNames: { 
     start:'start', 
     limit:'limit', 
     sort:'sort', 
     dir:'dir', 
     actionName:'actionName', 
     lanID:'lanID' 
    }, 
    sortInfo: { 
     field: 'id', 
     direction: "DESC" 
    }, 
    // set aditional parameters for the store in this event. 
    listeners: { 
     'exception': function (sp, type, action, options, response, arg) { 
      Ext.MessageBox.alert(localize.unKnownError, arg); 
     } 
    } 
}); 
sourceStore.load({ 
     params: { 
      start: 0, 
      limit: Ext.getCmp('labelsBbr').pageSize, 
      actionName: 'TranslationPaging', 
      lanID: getSelectedLanguageID() 
     } 
    }); 

ich für jeden "Nächste Seite" Aufruf an den Server müssen die lanID param und die actionName param zu haben.

Kann es getan werden?

Answer 1

Setzen Sie die baseParams für Ihr Geschäft.

baseParams: Object
Ein Objekt mit Eigenschaften, die sind als Parameter für jeden HTTP-Anforderung gesendet werden soll. Die Parameter sind als Standard-HTTP-Parameter unter Verwendung von Ext.urlEncode codiert.

var sourceStore = new Ext.data.JsonStore({ 
    // your configs 
    baseParams: { 
     actionName: 'TranslationPaging', 
     lanID: getSelectedLanguageID() 
    } 
}); 

// After initialization, to change the baseParams, use: 
sourceStore.setBaseParam('lanID', getSelectedLanguageID()); 

setBaseParam mit ExtJS 3.3, neu sein, so zu sehen, ob es in Ihrer Version verfügbar ist (wenn Sie nicht auf dem neuesten Stand sind). Andernfalls können Sie direkt auf die baseParams des Geschäfts mit store.baseParams zugreifen.

Answer 2

/* This work for Extjs 5.0 */ 

bbar: Ext.create('Ext.PagingToolbar', { 
       store: myStore, 
       id: 'id-Paging', 
       displayInfo: true, 
       displayMsg: 'Displaying records {0} - {1} of {2}', 
       emptyMsg: "No topics to display", 
       listeners: { 
        beforechange: function (page, currentPage) { 
         //--- Get Proxy ------// 
         var myProxy = this.store.getProxy();       
       //--- Define Your Parameter for send to server ----// 
         myProxy.params = { 
          MENU_NAME: '', 
          MENU_DETAIL: '' 
         }; 
        //--- Set value to your parameter ----// 
         myProxy.setExtraParam('MENU_NAME', '222222'); 
         myProxy.setExtraParam('MENU_DETAIL', '555555'); 
        } 
       } 
      }) 
     });