Ext js Обновление общего количества панели инструментов поискового вызова на лету

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

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

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

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

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

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

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

Спасибо

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

EDIT:

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

Если используется сохранение конфигурации автозагрузки:

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

Ответ 3

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

me.gridStore.add(data);

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

Ответ 4

У меня была аналогичная проблема при получении результатов от стороннего 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;
}

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

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

Ответ 5

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

(this).YourPagingToolbar.doRefresh()

Я положил (this) в(), потому что вы не представили какой-либо пример кода, поэтому я не уверен, как вы его определили

Ответ 6

store.totalLength = store.totalLength - 1;

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

Ответ 7

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

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

Или... вы можете переопределить или расширить PagingToolbar, чтобы добавить общедоступный метод, который вызовет или переопределит функцию onLoad

Ответ 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();
}