2012-01-23 1 views
4

Я отправил это снова на форумах Сенча, хотел также разместить его здесь на всякий случай:Использование PagingToolbar и CheckboxSelectionModel в одном GridPanel

У меня есть GridPanel, который использует PagingToolbar и CheckboxSelectionModel. Я хочу отслеживать выборки по страницам. Я почти там, но у меня возникают проблемы с элементами управления PagingToolbar (например, следующая страница), которые запускают событие «changechange» в моей модели выбора.

Вот упрощенный пример моего кода:

Код:

var sm = Ext.create('Ext.selection.CheckboxModel', { 
    listeners:{ 
     selectionchange: function(selectionModel, selectedRecords, options){ 
      console.log("Selection Change!!"); 
      // CODE HERE TO KEEP TRACK OF SELECTIONS/DESELECTIONS 
     } 
    } 
}); 

var grid = Ext.create('Ext.grid.Panel', { 
    autoScroll:true, 
    store: store, 
    defaults: { 
     sortable:true 
    }, 
    selModel: sm, 
    dockedItems: [{ 
     xtype: 'pagingtoolbar', 
     store: store, 
     dock: 'bottom', 
     displayInfo: true 
    }], 
    listeners: {'beforerender' : {fn:function(){ 
     store.load({params:params}); 

    }}} 
}); 
store.on('load', function() { 
    console.log('loading'); 
    console.log(params); 
    console.log('selecting...'); 
    var records = this.getNewRecords(); 
    var recordsToSelect = getRecordsToSelect(records); 
    sm.select(recordsToSelect, true, true); 
}); 

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

Что происходит в том, что событие changechange запускается при изменении страницы данных, и я не хочу, чтобы это произошло. В идеале, только щелчок пользователя будет отслеживаться как события «changechange», а не какие-либо события другого компонента, пузырящиеся и вызывающие событие на моей модели выбора. Глядя на исходный код, единственным событием я мог видеть, что пожары на PagingToolbar «меняются». Я пытался следить за тем, как обрабатываются GridPanel, TablePanel, Gridview и т. Д., Но я просто не вижу пути к событию. Даже тогда я не уверен, как подавлять события из PagingToolbar в SelectionModel.

Спасибо заранее, Том

ответ

6

мне удалось справиться с этим. Ключ должен определить, где изменяется страница. Самое простое решение - установить буфер для выбора прослушивателя и проверить свойство Store.loading. Вот моя реализация модели выбора:

var selModel = Ext.create('Ext.selection.CheckboxModel', { 
    multipageSelection: {}, 
    listeners:{ 
     selectionchange: function(selectionModel, selectedRecords, options){ 
      // do not change selection on page change 
      if (selectedRecords.length == 0 && this.store.loading == true && this.store.currentPage != this.page) { 
       return; 
      } 

      // remove selection on refresh 
      if (this.store.loading == true) { 
       this.multipageSelection = {}; 
       return; 
      } 

      // remove old selection from this page 
      this.store.data.each(function(i) { 
       delete this.multipageSelection[i.id]; 
      }, this); 

      // select records 
      Ext.each(selectedRecords, function(i) { 
       this.multipageSelection[i.id] = true; 
      }, this); 
     }, 
     buffer: 5 
    }, 
    restoreSelection: function() { 
     this.store.data.each(function(i) { 
      if (this.multipageSelection[i.id] == true) { 
       this.select(i, true, true); 
      } 
     }, this); 
     this.page = this.store.currentPage; 
    } 

И дополнительное связывание для хранения требуется:

store.on('load', grid.getSelectionModel().restoreSelection, grid.getSelectionModel()); 

Работа образца: http://jsfiddle.net/pqVmb/

+0

Это отлично работает, спасибо, Лоло. Еще одна деталь, которая мне нужна в моей реализации: есть ли простой способ передать в extraParams на вызовы store.load PagingToolbar? Этот вызов также глубоко в исходном коде. Я не хочу переопределять поведение для всех PagingToolbars, только на этой странице. –

+0

В частности, мне нужно обновить значение дополнительных параметров для магазина ['selections'], прежде чем делать вызов сервера, чтобы сервер мог иметь дело с любыми изменениями в выборе. –

+0

Думаю, я нашел подходящее решение для этого: установите хранилище. proxy.extraParams. = <строка выборки> в каждом событии changechange для отслеживания этого для каждого вызова сервера. –

0

решение Лоло является большим, но это, кажется, что это Безразлично» t работать с ExtJS 4.2.1.

Вместо «SelectionChange» использовать это:

deselect: function(selectionModel, record, index, eOpts) { 
    delete this.multipageSelection[i.id]; 
}, 

select: function(selectionModel, record, index, eOpts) { 
    this.multipageSelection[i.id] = true; 
}, 
+0

Не забудьте изменить i.id на record.id, и он должен работать для Ext JS 4.2.x. – AlperG

0

Это решение для ExtJs5, используя MVVC создать местный магазин под названием «selectedObjects» в виде модели с одной и той же модели, что и выгружаемого сетки.

Добавить выбор и отменить выбор слушателей на checkboxmodel. В этих функциях добавьте или удалите выбранную или отмененную запись из этого локального хранилища.

onCheckboxModelSelect: function(rowmodel, record, index, eOpts) { 
    // Add selected record to the view model store 
    this.getViewModel().getStore('selectedObjects').add(record); 
}, 

onCheckboxModelDeselect: function(rowmodel, record, index, eOpts) { 
    // Remove selected record from the view model store 
    this.getViewModel().getStore('selectedObjects').remove(record); 
}, 

На pagingtoolbar, добавьте изменения слушателя повторного выбора ранее seleted записи, когда появляются на странице.

onPagingtoolbarChange: function(pagingtoolbar, pageData, eOpts) { 
    // Select any records on the page that have been previously selected 
    var checkboxSelectionModel = this.lookupReference('grid').getSelectionModel(), 
     selectedObjects = this.getViewModel().getStore('selectedObjects').getRange(); 

    // true, true params. keepselections if any and suppresses select event. Don't want infinite loop listeners. 
    checkboxSelectionModel.select(selectedObjects, true, true); 
}, 

После того, как все действия закончены, когда эти выборы больше не нужны. Call deselectAll на checkboxmodel и removeAll из локального хранилища, если он не будет уничтоженным.(Windows закрывается, они по умолчанию настроены на вызов destroy и будут следить за очисткой данных локального хранилища, если это ваш случай)

Смежные вопросы