ExtJS 사용자 정의 페이징 매개 변수

Question

페이징 도구 모음이있는 Extjs 그리드가 있습니다. 데이터를 페이징 할 때마다 요청할 때마다 서버 사용자 지정 매개 변수를 전달해야합니다. 저장로드 이벤트에서 매개 변수 설정을 시도했지만 다음 단추를 클릭 할 때 저장소로드에 사용 된 마지막 옵션이 호출기에 기억되지 않는 것 같습니다. 나는 lanID PARAM과 actionName PARAM을 가지고있는 서버에 각각 "다음 페이지"호출에 필요한

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() 
     } 
    }); 

: 여기

몇 가지 코드입니다.

할 수 있습니까?

Answer 1

상점에 대해 baseParams을 설정하십시오.

baseParams : 개체
모든 HTTP 요청에 대한 매개 변수로 보낼 수있는 속성을 포함하는 객체입니다. 매개 변수는 표준 HTTP 매개 변수로 으로 인코딩되며 Ext.urlEncode을 사용합니다.

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

는 ExtJS로 3.3 새로운, 그래서 (당신이 최신하지 않은 경우)이 버전에서 사용할 수 있는지 볼 수 있습니다. 그렇지 않으면 store.baseParams으로 상점의 baseParam에 직접 액세스 할 수 있습니다.

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'); 
        } 
       } 
      }) 
     });