发送 Ajax 请求 ComboBox 的焦点而不是键入
Send Ajax request onFocus of a ComboBox rather than on typing
xtype : 'combo',
allowBlank : false,
hideTrigger : true,
name : 'dummyName',
itemId : 'value',
fieldLabel : 'Value',
labelWidth: 40,
store : {
fields : ['value'],
proxy : {
type: 'ajax',
url: '/DUMMY/URL/',
reader: {
type: 'json',
rootProperty: 'results'
}
}
},
displayField: 'value',
valueField : 'value',
queryMode : 'remote',
queryParam : 'search',
typeAhead : false,
minChars : 0,
queryDelay : 500,
emptyText : 'mandatory',
msgTarget : 'none',
listConfig : {
maxHeight : 220
},
所以这会发送 AJAX 调用并显示有关键入第一个字母的建议。但是,我想在组合聚焦时甚至在打字开始之前显示建议。
我可以使用 'focus' 侦听器发出 AJAX 呼叫。但是,它没有显示建议。
listeners:{
'focus': function(){
this.store.load();
}
}
您可以检查选择器是否已创建。如果它的创建只是显示否则调用触发函数。
示例如下:
Ext.application({
name: 'Fiddle',
launch: function () {
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json'
}
},
autoLoad: true
});
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'combo example',
layout: 'fit',
items: [{
xtype: 'combobox',
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
listeners: {
focus: function (component) {
component.store.load(function () {
if (Ext.isEmpty(component.picker)) {
component.onTriggerClick();
} else {
component.picker.show();
}
});
}
}
}]
});
}
});
示例 Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2a04
xtype : 'combo',
allowBlank : false,
hideTrigger : true,
name : 'dummyName',
itemId : 'value',
fieldLabel : 'Value',
labelWidth: 40,
store : {
fields : ['value'],
proxy : {
type: 'ajax',
url: '/DUMMY/URL/',
reader: {
type: 'json',
rootProperty: 'results'
}
}
},
displayField: 'value',
valueField : 'value',
queryMode : 'remote',
queryParam : 'search',
typeAhead : false,
minChars : 0,
queryDelay : 500,
emptyText : 'mandatory',
msgTarget : 'none',
listConfig : {
maxHeight : 220
},
所以这会发送 AJAX 调用并显示有关键入第一个字母的建议。但是,我想在组合聚焦时甚至在打字开始之前显示建议。
我可以使用 'focus' 侦听器发出 AJAX 呼叫。但是,它没有显示建议。
listeners:{
'focus': function(){
this.store.load();
}
}
您可以检查选择器是否已创建。如果它的创建只是显示否则调用触发函数。
示例如下:
Ext.application({
name: 'Fiddle',
launch: function () {
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json'
}
},
autoLoad: true
});
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'combo example',
layout: 'fit',
items: [{
xtype: 'combobox',
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
listeners: {
focus: function (component) {
component.store.load(function () {
if (Ext.isEmpty(component.picker)) {
component.onTriggerClick();
} else {
component.picker.show();
}
});
}
}
}]
});
}
});
示例 Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2a04