這應該相當簡單,但我還沒有找到一種方法。Ext js更新動態分頁工具欄的總數
我正在使用ExtJs v.3.3。
我有一個網格面板,允許用上下文菜單刪除記錄。
網格有一個連接到面板存儲的分頁工具欄。
刪除過程向服務器發送一個ajax請求,成功時我從存儲中刪除記錄(使用remove方法)。
問題在於分頁工具欄不能反映存儲中的更改,也就是說直到存儲被重新加載之前記錄的總數量纔會保持不變。
有什麼方法可以設置分頁工具欄中的記錄總量?
感謝
這應該相當簡單,但我還沒有找到一種方法。Ext js更新動態分頁工具欄的總數
我正在使用ExtJs v.3.3。
我有一個網格面板,允許用上下文菜單刪除記錄。
網格有一個連接到面板存儲的分頁工具欄。
刪除過程向服務器發送一個ajax請求,成功時我從存儲中刪除記錄(使用remove方法)。
問題在於分頁工具欄不能反映存儲中的更改,也就是說直到存儲被重新加載之前記錄的總數量纔會保持不變。
有什麼方法可以設置分頁工具欄中的記錄總量?
感謝
您不能在響應返回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" }
]
}
「的刪除進程發送一個Ajax請求到服務器,成功我從商店刪除記錄(使用刪除方法)...「 - 這表明你得到了處理」刪除「操作的方法 - 並且如果使用Ext.PagingToolbar - 只需添加一行,如下所示:
(this).YourPagingToolbar.doRefresh()
我把(這)在(),因爲你沒有提供任何代碼示例,所以我不知道你怎麼定義它
store.totalLength = store.totalLength - 1;
這將改變商店中的總行數,但我不確定此更改是否會反映在分頁工具欄中。
當嘗試使用多個分頁工具欄(網格的頂部/底部)時,我遇到了類似的情況。分頁工具欄中唯一更新顯示的地方在商店'load'上被調用。所以你可以手動發起事件(但要小心意想不到的後果!)。在我的情況下,這個效果很好,從我的其中一個工具欄的beforechange監聽器運行時:
myStore.fireEvent('load', myStore, myStore.data.items, myStore.lastOptions);
或...您可以覆蓋或擴展PagingToolbar添加這將調用或覆蓋在onLoad功能
這對我來說工作得很好的公共方法:
me.gridStore.add(data);
// Manually update the paging toolbar.
me.gridStore.totalCount = 500;
me.pagingToolbar.onLoad();
從第三方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');
這個工程就像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
如果您在分頁工具欄中有多個頁面,並在存儲器中執行本地插入/刪除操作,請使用下面的代碼段。
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();
}
好問題。這個值是從底層存儲的讀取器中獲得的(通過`Ext.data.Store.getTotalCount()`),並且看起來不容易改變。 – Mchl 2011-02-06 12:58:28