在ExtJS组合框中移动到下一页时,保留上一页中的选择

s3fp2yjn  于 2022-09-26  发布在  其他
关注(0)|答案(1)|浏览(164)

我有一个ExtJs表单组合框,它将下拉列表中的值显示为复选框和要选择的值。我已经使用分页列出了所有没有页面的值。我需要将选定的值保留在当前页面中,即使当我们移动到下一页或上一页并返回到同一页时(不在上一页、下一页中选择任何内容)。

代码:

Ext.create('Ext.form.ComboBox', {
   id: 'ageComboPickerReport',                                                                               
   name: 'ageComboPickerReport',
   maxHeight: 150,
   margin: '0 5 0 0',
   width: 150,
  emptyText: "Select tags",                                                                                      
  listConfig: {                                                                                          
     getInnerTpl: function (displayField) {                                                                                      
      return '<div class="x-combo-list-item"><img src="" class="chkCombo-default-icon 
   chkCombo" /> {' + displayField + '}</div>';
    },
    autoEl: {                                                                               'q-name': 'rpt-age-criteria-list'
  },                                                                                     labelAlign: 'top',
pageSize: 25,
displayField: 'age',                                                                valueField: 'id',                                                                 forceSelection: true,                                                             store: me.ageStore,
//Disable Typing and Open Combo                                                                          
   onFocus: function () {                                                                    
  if (!this.isExpanded) {
 me.ageStore.load()
this.expand()
}                                                                                   this.getPicker().focus();
}
}),

有人能告诉我当移动到其他页面并返回时,如何在页面中保留所选值吗

rks48beu

rks48beu1#

我遇到了一个非常类似的问题,在我的例子中,我有一个带有复选框选择模型的网格,我想在页面之间移动时保留选中的行。我非常肯定(虽然不是100%)ExtJS中没有内置的功能。我能说出我做了什么,希望它有帮助,尽管你必须采用它,因为它不是针对ComboBox,而是针对e1c1d1e。
由于这是一个分页存储,因此不会加载所有记录,只加载当前显示页面上的记录。(我假设你的商店是远程的,因为我看到你在上面调用load。)所以要实现你想要的,你需要:

  • 跟踪所选记录id,以便能够在第页上重置选择,
  • 还要跟踪项目(记录)本身,因为您可能需要它们,
  • 加载并显示页面后,相应地设置选择。

(此解决方案可能会有问题,因此您需要小心。根据用例,用户可能会选择某些内容,转到另一个页面然后返回,但以前选择的行不再可用(它已被其他人删除)。你必须考虑它是否影响到你。)
完整的代码很复杂,不够通用,无法共享,但我可以概述我所做的步骤:
1.在viewmodel中设置两个data条目,以跟踪选定的记录ID和项目(记录):

data: {
  multiSelection: {
    ids: {},
    items: [],
  },
}

1.将侦听器添加到view中网格的selectdeselect事件中:

listeners: {
  select: 'onGridSelect',
  deselect: 'onGridDeselect',
},

1.在controller中创建onGridSelectonGridDeselect函数,并向控制器添加一个isDataChanged变量,以指示存储是否已更改(每次分页时都会更改)。这很重要,因为我将以编程方式更改选择,并且我不希望在这种情况下只在用户交互时执行侦听器。这样地:

isDataChanged: false,

onGridSelect: function(selModel, record, index, eOpts) {
    if (isDataChanged) {
        return;
    }
    const viewModel = this.getViewModel(),
      multiSelection = viewModel.get('multiSelection');

    multiSelection.ids[record.getId()] = true;
    Ext.Array.push(multiSelection.items, record);    
},

onGridDeselect: function(selModel, record, index, eOpts) {
    if (isDataChanged) {
        return;
    }
    const viewModel = this.getViewModel(),
      multiSelection = viewModel.get('multiSelection');

    delete multiSelection.ids[record.getId()];
    Ext.Array.remove(multiSelection.items, record);    
},

1.最后,向存储添加侦听器以检测更改,每次用户在页面之间移动时都会调用此侦听器。这有点棘手,因为我需要从存储侦听器访问网格,这与ExtJS不太相似,但我必须这样做(store需要是网格的存储:

store.on('datachanged', function(store, eOpts) {
  // this part you have to figure out, my solution is way too specific
  // for share
  const grid = ...;

  // this was important for me, if the store is really changed,
  // deleted, added rows etc., I deleted the selection, but
  // you can consider it
  if (store.getUpdatedRecords().length > 0 ||
    store.getRemovedRecords().length > 0 ||
    store.getNewRecords().length > 0) {

    // access the `viewmodel` and reset `multiSelection` data entries to 
    // default, I `return` here to skip the rest

    return;
  }

  // disable listener
  grid.getController().isDataChanged = true;
  const selModel = grid.getSelectionModel(),
    multiSelection = grid.getViewModel().get('multiSelection');

  // deselect everything
  selModel.deselectAll();

  // get an array of the saved selection and find out, which
  // record from the current page is in the saved multiSelection
  const selected = [];
  Ext.Array.each(grid.getStore().getRange(), function(record) {
    if (multiSelection.ids[record.getId()]) {
        Ext.Array.push(selected, record);
    }
  });
  // apply selection to current page
  selModel.select(selected);

  // enable listener
  grid.getController().isDataChanged = false;
}

相关问题