PagingToolbar的問題Extjs 4

我使用ExtJS v4來製作一些豐富的界面，問題是我經常遇到困難（對於Extjs：p中的初學者來說非常正常），現在我遇到的問題，備受關注的分頁，其實我的網頁我都在顯示的記錄上，甚至通過網頁NBR指定項目後，如果可能的話幫我感謝PagingToolbar的問題Extjs 4

Ext.onReady(onReady); 

function onReady() { 
    var itemsPerPage = 10; 
    var store = new Ext.data.JsonStore({ 
     autoLoad: false, 
     pageSize: itemsPerPage, 
     proxy: new Ext.data.HttpProxy({ 
      type: 'ajax', 
      url: '../Service.asmx/GetMyDvpt', 
      reader: { 
       type: 'json', 
       root: 'd', 
       //totalProperty: 'total', 
       idProperty: 'Id' 
      }, 
      headers: { 
       'Content-type': 'application/json' 
      } 
     }), 
     fields: ['NOM_EXP', 'NOM_ESP', 'NOM_VAR', 'SURF_PG', 'DD_CYCLE_PROD'] 
    }); 

    store.load({ 
     params: { 
      start: 0, 
      limit: itemsPerPage 
     } 
    }); 

    Ext.create('Ext.grid.Panel', { 
     store: store, 
     columns: [ 
      { dataIndex: 'NOM_EXP', header: 'NOM_EXP' }, 
      { dataIndex: 'NOM_ESP', header: 'NOM_ESP' }, 
      { dataIndex: 'NOM_VAR', header: 'NOM_VAR' }, 
      { dataIndex: 'SURF_PG', header: 'SURF_PG' }, 
      { dataIndex: 'DD_CYCLE_PROD', header: 'DD_CYCLE_PROD', flex: 1 } 
     ], 
     renderTo: 'panel', 
     title: 'Dvpt Grid', 
     width: 570, 
     height: 350, 
     dockedItems: [{ 
      xtype: 'pagingtoolbar', 
      store: store, 
      dock: 'bottom', 
      displayInfo: true 
     }] 
    }); 
}

來源

2011-06-21 Othman

當你想獲得一些反饋時，你應該關心你的代碼的格式。 – Netzpirat

是否確定服務器返回一頁數據不是全部數據？ – atian25

您必須創建的Ext JS對象的新實例Ext.create，因爲使用new關鍵字實例化的對象將無法處理Ext JS class system。

當你看load()法源代碼，你會看到如何得到應用的配置選項，所以你會：

store.load({ 
     start: 0, 
     limit: itemsPerPage 
    });

由於商店已經配置了pageSize，有沒有必要對於limit選項，因爲它默認爲pageSize。

store.load({ 
     start: 0 
    });

我也建議你看看在loadPage()方法，它處理正確設置所有分頁相關參數：

store.loadPage(1);

另一個改進是設置autoLoad爲真，那麼你可以完全省略商店負載。

也不需要手動創建Ext.data.HttpProxy，因爲配置對象指定了ajax類型，並且會負責爲您實例化正確的代理類型。

由於您指定了JSON閱讀器，因此不需要設置HTTP接受標頭。無論如何，Content-Type是響應標題，並且相應的請求標題將是Accept。

所以，你的代碼應該是這樣的：

Ext.onReady(onReady); 

function onReady() { 
    var store = Ext.create('Ext.data.JsonStore', { 
     autoLoad: true, 
     pageSize: 10, 
     proxy: { 
      type: 'ajax', 
      url: '../Service.asmx/GetMyDvpt', 
      reader: { 
       type: 'json', 
       root: 'd', 
       totalProperty: 'total', 
       idProperty: 'Id' 
      } 
     }, 
     fields: ['NOM_EXP', 'NOM_ESP', 'NOM_VAR', 'SURF_PG', 'DD_CYCLE_PROD'] 
    }); 

    Ext.create('Ext.grid.Panel', { 
     store: store, 
     columns: [ 
      { dataIndex: 'NOM_EXP', header: 'NOM_EXP' }, 
      { dataIndex: 'NOM_ESP', header: 'NOM_ESP' }, 
      { dataIndex: 'NOM_VAR', header: 'NOM_VAR' }, 
      { dataIndex: 'SURF_PG', header: 'SURF_PG' }, 
      { dataIndex: 'DD_CYCLE_PROD', header: 'DD_CYCLE_PROD', flex: 1 } 
     ], 
     renderTo: 'panel', 
     title: 'Dvpt Grid', 
     width: 570, 
     height: 350, 
     dockedItems: [{ 
      xtype: 'pagingtoolbar', 
      store: store, 
      dock: 'bottom', 
      displayInfo: true 
     }] 
    }); 
}

當這樣處理問題，我通常用REST客戶端測試的後端服務。對於不同的瀏覽器有很多插件可用，例如用於Firefox的RESTClient或用於Chrome的Advanced REST clinet。確保您的服務在沒有任何用戶界面的情況下表現正確，只需通過手動定義的參數發送純HTTP請求即可。只有當一切按預期工作時才移至GUI部分。

對於GUI部分，我鼓勵您在API Documentation內學習Ext JS的源代碼，它的結構和記錄很好，您將學到很多東西。

自從版本4以來，Ext JS帶有一個MVC應用程序框架，它簡化了大量RIA應用程序的創建。閱讀更多信息，請致電Application Architecure Guide。

來源

2011-06-22 11:10:22 Netzpirat

尋呼工具欄默認支持遠程尋呼。如果需要本地分頁，則在'datachange'和'refresh'事件觸發時重新加載存儲。

來源

2012-05-30 18:43:59 MAP

PagingToolbar的問題Extjs 4

回答

相關問題