2011-02-06 43 views
11

這應該相當簡單,但我還沒有找到一種方法。Ext js更新動態分頁工具欄的總數

我正在使用ExtJs v.3.3。

我有一個網格面板,允許用上下文菜單刪除記錄。

網格有一個連接到面板存儲的分頁工具欄。

刪除過程向服務器發送一個ajax請求,成功時我從存儲中刪除記錄(使用remove方法)。

問題在於分頁工具欄不能反映存儲中的更改,也就是說直到存儲被重新加載之前記錄的總數量纔會保持不變。

有什麼方法可以設置分頁工具欄中的記錄總量?

感謝

+0

好問題。這個值是從底層存儲的讀取器中獲得的(通過`Ext.data.Store.getTotalCount()`),並且看起來不容易改變。 – Mchl 2011-02-06 12:58:28

回答

5

您不能在響應返回totalProperty值的數據已在數據庫中被刪除後?

編輯:

你需要得到你的迴應妥善建造第一。這是根據API Docs尋呼工具欄的外觀。

如果使用商店的自動加載配置:

var myStore = new Ext.data.Store({ 
    reader: new Ext.data.JsonReader({ 
     totalProperty: 'results', 
     ... 
    }), 
    ... 
    }); 
    var myStore = new Ext.data.Store({ 
    autoLoad: {params:{start: 0, limit: 25}}, 
    ... 
    }); 

從服務器發回會有這種形式的包:

{ 
"success": true, 
"results": 2000, 
"rows": [ // *Note: this must be an Array 
    { "id": 1, "name": "Bill", "occupation": "Gardener" }, 
    { "id": 2, "name": "Ben", "occupation": "Horticulturalist" }, 
    ... 
    { "id": 25, "name": "Sue", "occupation": "Botanist" } 
] 
} 
+0

但是,您如何使用它更新商店? – Mchl 2011-02-06 15:04:48

+0

這是我的返回聲明:{success:true} – AMember 2011-02-07 15:03:22

+0

在您的PHP代碼中,您需要在響應對象中包含totalProperty。請參閱頁面工具欄的文檔。它會給你一個好主意,你將如何構建你的代碼和查詢來獲得正確的結果。 – 2011-02-09 00:54:08

0

「的刪除進程發送一個Ajax請求到服務器,成功我從商店刪除記錄(使用刪除方法)...「 - 這表明你得到了處理」刪除「操作的方法 - 並且如果使用Ext.PagingToolbar - 只需添加一行,如下所示:

(this).YourPagingToolbar.doRefresh()

我把(這)在(),因爲你沒有提供任何代碼示例,所以我不知道你怎麼定義它

0

store.totalLength = store.totalLength - 1;

這將改變商店中的總行數,但我不確定此更改是否會反映在分頁工具欄中。

0

當嘗試使用多個分頁工具欄(網格的頂部/底部)時,我遇到了類似的情況。分頁工具欄中唯一更新顯示的地方在商店'load'上被調用。所以你可以手動發起事件(但要小心意想不到的後果!)。在我的情況下,這個效果很好,從我的其中一個工具欄的beforechange監聽器運行時:

myStore.fireEvent('load', myStore, myStore.data.items, myStore.lastOptions); 

或...您可以覆蓋或擴展PagingToolbar添加這將調用或覆蓋在onLoad功能

4

這對我來說工作得很好的公共方法:

me.gridStore.add(data); 

// Manually update the paging toolbar. 
me.gridStore.totalCount = 500; 
me.pagingToolbar.onLoad(); 
2

從第三方API得到結果,當我有一個類似的問題其中有一個單獨的項目計數的網址。我使用附加的updatePager()函數創建了一個從pagingtoolbar繼承的新類:

updatePager : function(){ 
    var me = this, 
     pageData, 
     currPage, 
     pageCount, 
     afterText, 
     count, 
     isEmpty; 

    count = me.store.getCount(); 
    isEmpty = count === 0; 
    if (!isEmpty) { 
     pageData = me.getPageData(); 
     currPage = pageData.currentPage; 
     pageCount = pageData.pageCount; 
     afterText = Ext.String.format(me.afterPageText, isNaN(pageCount) ? 1 : pageCount); 
    } else { 
     currPage = 0; 
     pageCount = 0; 
     afterText = Ext.String.format(me.afterPageText, 0); 
    } 

    Ext.suspendLayouts(); 
    me.child('#afterTextItem').setText(afterText); 
    me.child('#inputItem').setDisabled(isEmpty).setValue(currPage); 
    me.child('#first').setDisabled(currPage === 1 || isEmpty); 
    me.child('#prev').setDisabled(currPage === 1 || isEmpty); 
    me.child('#next').setDisabled(currPage === pageCount || isEmpty); 
    me.child('#last').setDisabled(currPage === pageCount || isEmpty); 
    me.child('#refresh').enable(); 
    me.updateInfo(); 
    Ext.resumeLayouts(true); 

    if (me.rendered) { 
     me.fireEvent('change', me, pageData); 
    } 
} 

});

setTotalCount: function(count) { 
    this.totalCount = count; 
} 

然後,當你想更新它調用store:

我加入到碼頭時

dockedItems: [{ 
      xtype: 'dynamicpagingtoolbar', 
      itemId: 'pager_id', 
      dock: 'bottom', 
      store: 'CompoundPharmacologyPaginatedStore', 
      displayInfo: true 
     }], 

我添加了一個setTotalCount()函數相關的商店加入的itemId它.setTotalCount(total),然後pager.updatePager()。請記住,您將首先使用類似

pager = grid_view.down('#pager_id');

10

這個工程就像ExtJs ver 4.1.3的魅力一樣。

gridStore.add(record);     //Add the record to the store  
gridStore.totalCount = gridStore.count(); //update the totalCount property of Store 
pagingToolbar.onLoad();     //Refresh the display message on paging tool bar 
0

如果您在分頁工具欄中有多個頁面,並在存儲器中執行本地插入/刪除操作,請使用下面的代碼段。

updatePagingToolbar: function (pagingToolbar) { 
    var store = pagingToolbar.getStore() 
    , affectedChanges = store.getCount() - store.config.pageSize; 

    if (pagingToolbar.store.totalCount > store.config.pageSize) 
     pagingToolbar.store.totalCount += affectedChanges; 
    else 
     pagingToolbar.store.totalCount = store.getCount(); 
    pagingToolbar.onLoad(); 
}