我有一个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();
}
}),
有人能告诉我当移动到其他页面并返回时,如何在页面中保留所选值吗
1条答案
按热度按时间rks48beu1#
我遇到了一个非常类似的问题,在我的例子中,我有一个带有复选框选择模型的网格,我想在页面之间移动时保留选中的行。我非常肯定(虽然不是100%)ExtJS中没有内置的功能。我能说出我做了什么,希望它有帮助,尽管你必须采用它,因为它不是针对
ComboBox
,而是针对e1c1d1e。由于这是一个分页存储,因此不会加载所有记录,只加载当前显示页面上的记录。(我假设你的商店是远程的,因为我看到你在上面调用
load
。)所以要实现你想要的,你需要:(此解决方案可能会有问题,因此您需要小心。根据用例,用户可能会选择某些内容,转到另一个页面然后返回,但以前选择的行不再可用(它已被其他人删除)。你必须考虑它是否影响到你。)
完整的代码很复杂,不够通用,无法共享,但我可以概述我所做的步骤:
1.在
viewmodel
中设置两个data
条目,以跟踪选定的记录ID和项目(记录):1.将侦听器添加到
view
中网格的select
和deselect
事件中:1.在
controller
中创建onGridSelect
和onGridDeselect
函数,并向控制器添加一个isDataChanged
变量,以指示存储是否已更改(每次分页时都会更改)。这很重要,因为我将以编程方式更改选择,并且我不希望在这种情况下只在用户交互时执行侦听器。这样地:1.最后,向存储添加侦听器以检测更改,每次用户在页面之间移动时都会调用此侦听器。这有点棘手,因为我需要从存储侦听器访问网格,这与ExtJS不太相似,但我必须这样做(
store
需要是网格的存储: