PagingToolbar Extjsの問題4

Question

私はいくつかの豊富なインターフェイスを作成するためにExtJS v4を使用していますが、問題は私が時々困っていることです（Extjs：pの初心者にとっては非常に正常です）懸念ページネーション、私のページに実際に私が表示されているすべてのレコードを持っている、でも、可能であれば私を助けるために、ページのNBRによって項目を指定した後感謝

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

Answer 1

あなたはとのExt JSオブジェクトの新しいインスタンスを作成する必要がありますExt.create、newキーワードでインスタンス化されたオブジェクトはExt JS class systemを処理しないためです。

あなたはload()メソッドのソースコードを見ると、あなたが設定オプションが適用されますどのように表示されます、そしてあなたが希望：

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

ストアはすでにpageSizeで構成されているので、必要はありませんlimitオプションの場合は、pageSizeがデフォルトとして取得されます。

store.loadPage(1); 

別の向上がtrueにautoLoadを設定することで、その後、あなたは可能性：私も正しく、すべてのページング関連パラメータを設定扱うloadPage()方法、を見てすることをお勧めしたい

store.load({ 
     start: 0 
    }); 

ストアの負荷を完全に省きます。

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要求を送信するだけで、UIなしでサービスが正しく動作することを確認してください。すべてが期待通りに機能するときだけ、GUI部分に移動します。

GUIの部分については、API DocumentationのExt JSのソースコードを勉強することをお勧めします。これは構造が整っており、文書化されており、多くのことを学びます。

バージョン4のExt JSには、MVCアプリケーションフレームワークが付属しているため、大規模なRIAアプリケーションの作成が簡単になります。詳しくはApplication Architecure Guideをご覧ください。

Answer 2

ページングツールバーは、デフォルトでリモートページングをサポートしています。ローカルページングにページングが必要な場合は、 'datachange'および 'refresh'イベントが発生した場所でリロードします。