顯示網格中的行數 - Extjs

所以我試圖顯示從網格返回的行數（記錄）。下面的代碼：（？或存儲）顯示網格中的行數 - Extjs

Ext.define('AM.view.user.List' ,{ 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.userlist', 
    title: '<center>Data Management</center>', 
    store: 'Users', 
    dockedItems: [{ 
     xtype: 'toolbar', 
     dock: 'bottom', 

    items: [ 
     { xtype: 'tbtext', text: 'Number of Records\:' + ***code that will return number of records*** }, 
     { xtype: 'tbfill' }, 
     { text: 'Print' }, 
     { text: 'Export' } 
    ] 
}], 
...

我不知道如何使用getCount將（）方法從該網格返回的行數。有任何想法嗎？

繼承人：我的商店：

Ext.define('AM.store.Users', { 
    extend: 'Ext.data.Store', 
    model: 'AM.model.User', 
    fields: ['field1', 'field2', 'field3'], 
    data: [ 
     {field1: 'Data 1', field2: 'Data 2', field3: 'Data 3'}, 
     {field1: 'Data 1', field2: 'Data 2', field3: 'Data 3'}, 
     {field1: 'Data 1', field2: 'Data 2', field3: 'Data 3'} 

    ]

}）;

來源

2013-07-25 Clay Banks

是否有任何下面爲你工作的答案？這仍然沒有解決？ – Reimius

假設您的商店被加載之前網格渲染，這將可能工作：

Ext.data.StoreManager.lookup("Users").getCount();

如果存儲動態加載，您將需要一個事件附加到商店的負載事件來更新您的網格，如果上面的代碼不起作用，我可以幫助你。

來源

2013-07-25 18:03:59 Reimius

我會在哪裏放置該代碼？它告訴我，當我試圖實現它時，它是不確定的。 –

我們可以看到您用來創建商店的代碼嗎？ – Reimius

它現在更新 –

您將無法動態執行此操作，它會自行更新，因此您必須在加載商店時使用佔位符並更新面板。

{ xtype: 'tbtext', itemId: 'numRecords' }

然後：

listeners: { 
    render: function(store) { 
     store.on('load', function(records) { 
      var count = records.length; //or store.getTotalCount(), if that's what you want 
      grid.down('#numRecords').setText('Number of Records: ' + count); 
     });  
    } 
}

來源

2013-07-25 18:05:32 kevhender

我會如何將它融入我的代碼？ –

你可以把它放在網格的渲染監聽器中。看到我編輯的答案。 – kevhender

@kevhender我不禁感到自己有點「偷」了你答案的肉，我很抱歉。但在我看來，OP顯然是一個完整的代碼示例，所以我希望我已經爲你節省了大量的編輯，而這反過來又會拯救我的業力...... – rixo

因爲它已經說過，你必須等待商店使用getCount之前加載。除了在這種情況下，你真的會使用像你的例子那樣的內存商店，但我懷疑你想要顯示該用例的動態記錄數...

所以，你必須聽爲商店的load事件，然後更新您的文本項目。每當商店被加載，重新加載等時，加載事件都會被觸發，如果您的網格被分頁或允許過濾等等，這可能會多次出現。這意味着我們的記錄數量將與實際內容保持同步的商店。好。

現在，如何安裝該監聽器？進行這種處理的一個非常常見的地方在於組件的initComponent方法。

這是代碼。請參閱覆蓋initComponent的速成課程的註釋（有關該主題的講座，請參閱another answer）。

Ext.define('AM.view.user.List' ,{ 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.userlist', 
    title: '<center>ECRIS-MetaData Management</center>', 
    store: 'Users', 
    dockedItems: [{ 
     xtype: 'toolbar', 
     dock: 'bottom', 

     items: [ 
      // Give an itemId to this component to make it easy to 
      // reference later. 
      { xtype: 'tbtext', text: 'Loading...', itemId: 'recordNumberItem' }, 
      { xtype: 'tbfill' }, 
      { text: 'Print' }, 
      { text: 'Export' } 
     ] 
    }], 

    initComponent: function() { 
     // We're overriding an existing method, so that's very important to call 
     // the parent method, or the component will break in awful sufferings 
     this.callParent(arguments); 

     // I'm putting the code *after* callParent, so that the store is available 

     var store = this.getStore(), 
      // Using ComponentQuery to retrieve the text item 
      textItem = this.down('#recordNumberItem'); 

     // Using `mon` instead of `on` for better memory management (the listener 
     // will be removed from the store automatically when the component is 
     // destroyed). 
     this.mon(store, 'load', function() { 

      // We're left with the easy part... 
      textItem.setText("Number of records: " + store.getCount()); 
     }); 
    } 

    // ... 

});

來源

2013-07-25 22:27:43 rixo

你可以嘗試添加分頁工具欄和使用屬性displayInfo & displayMsg。試試這個代碼：

bbar : { xtype : 'pagingtoolbar', displayInfo: true, store:'your store', displayMsg : 'Total rows {2}'// defaultvalue = 'Displaying {0} - {1} of {2}' }

來源

2014-02-05 16:57:08 abdelali

顯示網格中的行數 - Extjs

回答

相關問題