我发现组合框有问题,我有一个“更改”事件的监听器。当事件触发时,它会运行一个函数来过滤存储,该存储为另一个组合框提供支持,以过滤第二个组合框中可用的值。
想法是,当您从第一个组合框中的短列表中进行选择时,它会减少第二个组合框中的选择。
加载表单时,您可以单击第二个组合框并查看所有选项,效果很好。然后,当您在第一个组合框中选择某些内容,然后再次单击第二个组合框时,您会看到相应的缩短列表,但它是灰色的,并且“正在加载...”只是旋转并且永远不会消失。
如果您加载表单并在第一个组合框中选择一些内容,然后单击第二个组合框,它将过滤并显示正常,但是如果您尝试在第一个中更改您的选择,则会遇到我上面描述的加载问题框并再次单击第二个组合框。
请看下面的代码,我在另一个屏幕上运行这个设置,但似乎没有这个问题。
我创建了一个 ext store,如下所示:
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);
}
});
}
每次我在第一个组合框中更改选择时,我都会看到已注销的记录,我可以在第二个组合框中“看到”结果,但它们总是显示为灰色,并显示“正在加载..”GIF。
编辑:视频示例: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
中的项目列表。 a
是否在 combo_2
中的新列表中可用,该列表是通过在 combo_1
中选择项目 y
产生的?也许这是一个问题,当一个项目不再存在于组合可用的列表中时,试图保持该项目被选中。
您是否尝试过在应用过滤器之前清除 combo_2
中的选择?
关于javascript - ExtJS4 组合框加载/存储问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10253349/