ExtJS4 组合框加载/存储问题
ExtJS4 combobox loading/store issue
我看到一个组合框的问题,我有一个"更改"事件的侦听器。当事件触发时,它会运行一个函数,该函数筛选一个存储,该存储为另一个组合框提供支持,以筛选第二个组合框中可用的值。
这个想法是,当您从第一个组合框中的简短列表中进行选择时,它会减少第二个组合框中的选择。
加载表单后,您可以单击第二个组合框并查看所有选项,效果很好。当您在第一个组合框中选择某些内容,然后再次单击第二个组合框时,您会看到相应的缩短列表,但它显示为灰色,并且"正在加载..."事情只是旋转,永远不会消失。
如果您加载表单并在第一个组合框中选择某些内容,然后单击第二个组合框,它将过滤并显示正常,但是如果您尝试更改第一个框中的选择并单击第二个组合框,则会遇到我上面描述的加载问题。
请参阅下面的代码,我在另一个屏幕上运行了此设置,但似乎没有此问题。
我创建了一个扩展商店,如下所示:
var comboBreaker = Ext.create('Ext.data.Store', {
autoLoad: false,
remoteSort: true,
remoteFilter: true,
fields: [{
name: 'id',
mapping: 'item_id',
type: 'int',
useNull: false},
'item_display_number','item_name', 'line_item_type_id', 'item_description'
],
proxy:{
type:'ajax',
url: '/invoicer/data/getlineitems',
reader: {
type: 'json',
successProperty: 'success',
root: 'results',
totalProperty: 'totalCount'
},
sorters:[{
property:'item_display_number',
direction:'ASC'
}]
}
});
这家商店为组合框提供支持,如下所示:
Ext.define('Writer.Form', {
extend: 'Ext.form.Panel',
alias: 'widget.writerform',
requires: ['Ext.form.field.Text'],
initComponent: function(){
this.addEvents('create');
Ext.apply(this, {
activeRecord: null,
frame: true,
title: 'Line Item',
id: 'writerform',
fieldDefaults: {
anchor: '100%',
labelAlign: 'right'
},
items: [{
xtype: 'combobox',
fieldLabel: 'Item #',
name: 'item_number',
store: comboBreaker,
displayField: 'item_display_number',
valueField: 'id',
allowBlank: false,
forceSelection: true
},{
xtype: 'combobox',
fieldLabel: 'Item Type',
name: 'item_type',
id: 'item_type',
displayField: 'line_item_type',
valueField: 'id',
store: invoicer_lineItemTypeStore,
forceSelection: true,
labelWidth: 75,
width: 200,
listeners: {
change: {
fn: function() {
itemNumberFilter(comboBreaker);
}
}
}
}]
});
itemNumberFilter() 函数采用存储并对其进行过滤,这是代码:
function itemNumberFilter( store ) {
var id = Ext.getCmp('item_type').getValue();
store.remoteFilter = false;
store.clearFilter();
if ( id ) {
store.filter('line_item_type_id', id);
}
store.remoteFilter = true;
store.removeAll();
store.load({
scope: this,
callback: function( records ) {
console.log('Loaded records!');
console.log(records);
}
});
}
每次我在第一个组合框中更改我的选择时,我都会看到注销的记录,我可以在第二个组合框中"看到"结果,但它们总是在"加载"时显示为灰色。动图显示。
编辑:视频示例:http://screencast.com/t/cUSHyFE6FIV
编辑:我相信这是解决方案:
lastQuery: '',
listeners: {
beforequery: {
fn: function(query) {
delete this.lastQuery;
}
}
}
将其添加到组合框配置可解决此问题。
Edit2:我遇到了由此引入的第二个错误,它已通过添加以下内容进行修复:
this.clearValue();
到 beforequery 函数(上面删除 this.lastQuery)。这将在每次单击下拉箭头时清除组合框的值。
假设您在combo_1
中选择第 x
项,然后在 combo_2
的精简列表中选择第 a
项。然后,将 combo_1
中的选择更改为 y
,然后在 combo_2
中再次更改项目列表。combo_2
的新列表中是否a
可用,这是在combo_1
中选择项目y
的结果?也许这是一个当组合可用的列表中不再存在时尝试保持选中状态的问题。
您是否尝试过在应用过滤器之前清除combo_2
中的选择?
您可以动态加载第二个组合框的存储,但请确保将第二个组合框设置为"本地"。
- 在firebase(web)上存储数据时出现问题
- 性能问题:存储对DOM元素的引用与使用选择器相比
- 循环POS={{k}}k的iMacros没有持有整数值/存储问题
- 安卓phonegap应用程序与三星Galaxy设备上的SQlite和本地存储存在问题
- 关于确定数组中存储的最大值的不同方法的一些问题(加上输出消息问题)
- HTML5 本地存储 - 多个删除项问题
- 在 IE7 中模拟本地存储时出现问题
- 将整个字符串存储为数据属性时出现问题
- 日期选取器存储错误值的问题
- 角度 Restangular 本地存储拦截器问题
- 全局变量 VS Web 应用中的本地存储和内存问题
- ExtJS4 组合框加载/存储问题
- 下拉列表和本地存储问题
- 您如何解决 ExtJS 4.2 缓冲存储中的查找记录问题
- 为什么两个网页有不同的本地存储?我该如何解决这个问题
- 在本地存储中创建多维数组时出现问题
- 在localStorage中存储HTTP Basic授权标头是否存在任何安全问题
- Sencha Touch-本地存储问题
- 在javascript中存储时间的问题
- Chrome本地存储问题