Ext js Обновление общего количества панели пейджинга на лету

Question

Это должно быть довольно просто, но я еще не нашел способ сделать это.

Я использую ExtJs v.3.3.

У меня есть панель сетки, позволяющая удалить запись с помощью контекстного меню.

В сетке имеется панель подкачки, которая прикреплена к хранилищу панели.

Процесс удаления отправляет на сервер запрос ajax, при успешном удалении записи из хранилища (используя метод удаления).

Дело в том, что панель инструментов поискового вызова не отражает изменения в магазине, то есть общее количество записей не изменяется до тех пор, пока хранилище не будет перезагружено.

Можно ли установить общий объем записей на панели инструментов пейджинга?

Благодаря

Answer 1

не Вы в состоянии вернуть значение totalProperty в ответ после того, как данные были удалены в БД?

EDIT:

Вы должны будете получить ваш ответ построен правильно первый. Вот как это должно выглядеть в соответствии с API Docs для панели инструментов пейджинга.

При использовании конфигурации AutoLoad магазина:

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" } 
] 
} 

Answer 2

«Процесс удаления посылает AJAX запрос на сервер, на успех Я удаляю запись из магазина (используя метод remove) ... »- это предполагает, что вы получили метод, который обрабатывает действие« удалить », и если вы используете Ext.PagingToolbar - просто добавьте еще одну строку, например:

(this).YourPagingToolbar.doRefresh()

я поставил (это) в(), потому что вы не предоставили ни одного примера кода, так что я не знаю, как вы определили его

Answer 3

store.totalLength = store.totalLength - 1;

это изменит количество полных строк в магазине, но я не уверен, что это изменение будет отражено панелью поискового вызова.

Answer 4

У меня была аналогичная ситуация при попытке использовать несколько панелей пейджинга (сверху/снизу сетки). Единственное место на панели инструментов пейджинга, которое обновляет экран, вызывается в режиме «load». Таким образом, вы можете запустить событие вручную (но остерегайтесь непреднамеренных последствий!). В моем случае это работало хорошо, когда вы бегали от прослушивателя до замены одной из моих панелей инструментов:

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

...Вы можете отменить или продлить PagingToolbar добавить публичный метод, который будет вызывать или переопределить функцию OnLoad

Answer 5

Это работало отлично для меня:

me.gridStore.add(data); 

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

Answer 6

у меня была аналогичная проблема при получении результатов от API третьей стороны который имел отдельный URL-адрес для подсчета предметов. Я создал новый класс, унаследованный от pagingtoolbar с функцией дополнительной updatePager():

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

});

Я добавил Itemid к нему при добавлении к причалу

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

Я добавил функцию setTotalCount() в соответствующем магазине:

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

Затем, когда вы хотите обновить его называют магазин .setTotalCount (итого), а затем pager.updatePager(). Помните, что вы сначала получите пейджер, используя что-то вроде

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

Answer 7

Это работает как прелесть для 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 

Answer 8

Если у вас есть несколько страниц на панели инструментов пейджинга и выполняйте операцию вставки/удаления локально из хранилища, используйте ниже фрагмент.

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