我有一个正在运行的 EditorGrid 面板,其中两列有 ComboBox 编辑器。两个 ComboBox 都是从数据库远程加载的(countryStore
和 cityStore
)。
我想限制 cityComboBox
仅显示所选国家/地区的城市。我需要使用数据库中的过滤器重新加载 cityStore
(有太多城市无法过滤本地)。过滤器值是 countryComboBox
值。
countryComboBox 中始终有一个值,因为我在创建新记录时添加了 default = 1,所以这不是问题。
我不知道哪个监听器适合这里。我需要在 countryComboBox
显示之前捕获双击国家/地区单元格的时刻,并在组合框显示之前对其进行过滤(或在检索数据时显示等待消息)。
如果这是不可能的,我可以通过双击单元格打开弹出窗口,从过滤城市的组合框中选择,“确认”并将值输入单元格吗?
最佳答案
我终于成功了。我创建了两个解决方案 - 用于网格内的本地和远程下拉搜索。最后,我决定使用本地搜索(我可以将 country_id
添加到我的 cities
查询中并在 ExtJS 中进行过滤),但也可以使其适用于远程搜索- 如果有人需要,我也可以准备该解决方案。
本地解决方案
我必须使用 beforeQuery 事件过滤 cityCombo
,并使用同一行中 countryCombo
的 id。这是cityCombo
的代码:
var cityCombo = new Ext.form.ComboBox({
triggerAction: 'all',
mode: 'local',
lastQuery: '', // to make sure the filter in the store is not cleared the first time the ComboBox trigger is used
store: cityDropdownStore,
displayField: 'city',
valueField: 'city_id',
listeners: {
beforeQuery: function(query) {
currentRowId = myGrid.getSelectionModel().getSelected().data.country_id;
this.store.clearFilter();
this.store.filter( { property: 'country_id', value: currentRowId, exactMatch: true } );
}
}
});
如您所见,当双击网格内的 cityCombo
时,我会在当前行中获取 country_id
并使用过滤器 cityStore
那个值。这要求 cityStore
具有以下字段:id
、country_id
、city
仍然存在一个问题:当用户更改countryCombo
时,城市字段应更改/警告用户它对于当前国家/地区不正确。这个问题的解决方案很复杂......你可能知道,你无法获得对组合框的parentGrid的引用(否则你可以调用countryCombo -->parentGrid-->currentRecord-->cityCombo-->更改它
)。
我尝试监听网格本身的 rowchange 事件,但如果用户在更改 countryCombo
后直接单击另一行,则会更改错误的行城市。
解决方案有点高级:我必须将当前行的引用从网格的 beforeedit 事件复制到 cityCombo。这是网格的监听器:
listeners: {
beforeedit: function(e) {
// reference to the currently clicked cell
var ed = e.grid.getColumnModel().getCellEditor(e.column, e.row);
if (ed && ed.field) {
// copy these references to the current editor (countryCombo in our case)
Ext.copyTo(ed.field, e, 'grid,record,field,row,column');
}
}
},
现在,我们的 countryCombo
拥有在城市更改时重置城市所需的所有信息。这是完整的 countryCombo
代码:
var countryCombo = new Ext.form.ComboBox({
id: 'skupina_combo',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
store: countryDropdownStore,
displayField: 'country',
valueField: 'country_id',
listeners: {
change: function(t, n, o) { // t is the reference to the combo
// I have t.record available only because I copied it in the beforeEdit event from grid
t.record.set('city_id', '0');
}
}
});
单元格渲染器在过滤其存储时没有遇到问题,因此我只需要一个存储来进行渲染和组合框编辑 (cityStore)。
远程解决方案要求我为城市创建两个商店 - cityRendererStore
和 cityDropdownStore
,它们每次都会查询数据库而不是使用过滤器。如果您有太多城市需要进行本地过滤,则这种方法是必要的。我应该提到我并没有在我的应用程序中真正使用城市和国家/地区,我只是创建这个示例来简化事情。
我对最终结果感到非常满意 - 它提供了网格的所有优点以及通常仅在表单中可用的条件下拉菜单。
关于combobox - ExtJS EditorGridPanel 中的级联组合框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3980796/