I need a combo's menu to be open after getting focus automatically. Changing minchar config was not effective. Is there any other config for this purpose?
Update:
Ext.define("My.form.combo.Local", {
extend: "Ext.form.ComboBox",
xtype: 'local-combo',
queryMode: 'local',
minChars: 0,
selectOnFocus: true,
forceSelection: true,
typeAhead: true,
initComponent: function () {
this.callParent();
this.on('focus', function () {
console.log('f');
this.expand();
});
}
});
The following snipped worked in ExtJS 4.2.3
You can control the picker with expand and collapse
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
// Create the combo box, attached to the states data store
var c =Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
c.on('focus',function(c){c.expand()})
I made a fiddle for you: https://fiddle.sencha.com/#fiddle/fj5
It works like a charm. Maybe you have some other problems in your code.
Related
I have a combo look like http://jsfiddle.net/Q5nNV/
everything is well but when i search (typing) some text like asdf to combo box and click clear button
That's not select first item, it look like
Here is my code
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AK", "name":""},
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AZ", "name":"Arizona"}
]
});
// Create the combo box, attached to the states data store
var combo = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
triggerAction: 'all',
value: "AK",
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
trigger2Cls: 'x-form-clear-trigger',
onTrigger2Click: function (args) {
this.setValue("AK");
},
tpl: new Ext.XTemplate('<tpl for=".">' + '<li style="height:22px;" class="x-boundlist-item" role="option">' + '{name}' + '</li></tpl>'),
renderTo: Ext.getBody()
});
I want when i click clear button my combo will select first item (empty item). How to fix that thank
this works for me
var combo = Ext.getCmp('myId');
combo.select(combo.getStore().getAt(0));
This should do the trick. You basically need to select the first value, make it re-query so that it can clear the filter and then send focus back to the field (optional):
Ext.onReady(function () {
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AK", "name":""},
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AZ", "name":"Arizona"}
]
});
// Create the combo box, attached to the states data store
var combo = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
triggerAction: 'all',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
trigger2Cls: 'x-form-clear-trigger',
enableKeyEvents: true,
onTrigger2Click: function (args) {
// Select the first record in the store
this.select(this.getStore().getAt(0));
// Force a re-query to clear the filter
this.doQuery();
// Send focus back to the field
this.focus();
},
tpl: new Ext.XTemplate('<tpl for=".">' + '<li style="height:22px;" class="x-boundlist-item" role="option">' + '{name}' + '</li></tpl>'),
renderTo: Ext.getBody()
});
});
Obviously, the re-query and focus are optional. You could easily remove them from this code.
Alternately, you could use the this.select(this.getStore().getAt(0)); and then do this.blur() to select it and then immediately get rid of the unpopulated list.
this is work for me....
var cmbESTADO = component.query('#cmbESTADO')[0];
cmbESTADO.store.load(function(st){
cmbESTADO.select(cmbESTADO.getStore().getAt(0));
});
when the combobox is not load, the select not work. Before load and then select.
This works for me:
me.myCombo.setValue(valueIndex);
I have a comboBox in which items are coming from database and a have applied filter option using that comboBox...Combo works good at first time ,but the problem is when i want to select items from the comboBox at second time i don't find items in my combo(only the previous selected item)..
this.control({
'combobox[itemId=YourCombo]':
{
select: this.combogridfilter
}
});
combogridfilter: function(newValue){
var value1= Ext.getCmp('myCombo').getValue();
var grid=Ext.getCmp('afteraddingtemplate');
grid.store.load().filter([
{id:'item_code', property:"item_code", value: value1, anyMatch: false}
]);
},
here is the combo configuration
xtype:'combo',
id:'myCombo',
itemId:'YourCombo',
action:'change',
fieldLabel:'Select a template',
queryMode:'local',
store:this.store,
name:'item_code',
displayField:'item_code',
valueField:'item_code',
enableKeyEvents: true,
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a Template',
selectOnFocus: true
You should clear filter before applicate a new one:
combogridfilter: function(newValue){
var value1= Ext.getCmp('myCombo').getValue();
var grid=Ext.getCmp('afteraddingtemplate');
grid.store.clearFilter(true);
grid.store.filter('item_code', value1);
},
You should not share the store between the grid and the combo. Sharing stores between components is asking for trouble. What is happening, is that when you filter the grid, you filter the combo too. Given it's the same store...
What you can do is use a simple memory store for your combo, that you populate when the grid store is loaded.
For example, configure your combo this way:
{
renderTo: Ext.getBody(),
xtype:'combo',
id:'myCombo',
itemId:'YourCombo',
action:'change',
fieldLabel:'Select a template',
queryMode:'local',
store: {
fields: ['item_code']
,proxy: {type: 'memory', reader: 'array'}
},
name:'item_code',
displayField:'item_code',
valueField:'item_code',
enableKeyEvents: true,
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a Template',
selectOnFocus: true
}
And populate it on the load event of the grid store:
grid.getStore().on('load', function(store) {
Ext.getCmp('myCombo').getStore().loadData(store.getRange());
});
I am new to the extjs and try to make following codes work:
I tried as you suggested, still no luck:
var bookmarks=[];
bookmarks[0] ={id:'111111111', target:'target', title:'title', category:'category', created:'created'};
bookmarks[1] ={id:'22222222222', target:'target', title:'title22222222', category:'category', created:'created'};
localStorage['myapp-bookmarks']=JSON.stringify(bookmarks);
Ext.define("BookMark", {
extend: 'Ext.data.Model',
idProperty: "id",
fields: ['id','target','title','category','created']
});
var bookmarkStore = Ext.create("Ext.data.Store", {
model: "BookMark",
autoLoad: true,
storeId: 'bookmarks',
proxy: {
type: 'localstorage',
id : 'myapp-bookmarks'
}
});
// Create the combo box, attached to the above store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: bookmarkStore,
queryMode: 'local',
displayField: 'title',
valueField: 'id',
renderTo: Ext.getBody()
});
But it won't populate the list for me. Any idea?
I have in my base class a combobox, where I only configure the "fields" property. Like this:
items: [
comboText = Ext.create('Ext.form.ComboBox', {
width: 150,
padding: '0 20 0 0',
displayField: 'label',
store: Ext.create('Ext.data.Store', {
fields: [
{type: 'string', name: 'label'},
{type: 'string', name: 'fieldName'}
]
})
}),
...]
How can I pass only the data property to this combo ?
I tried the code below but does not work:
comboTest.store.loadData(value);
where value contains an array like this:
[
{"label":"First name", "fieldName":"firstname"},
{"label":"Birth date", "fieldName":"birthdate"}
]
No errors, but the combobox opens nothing.
I got this to work using:
xtype:'combo',
fieldLabel:'Division',
name:'division',
valueField: 'division',
queryMode:'local',
store:['A','B','C'],
displayField:'division',
autoSelect:true,
forceSelection:true
I know this question is really old, but just in case anyone comes looking for an answer that works out of the box; for me this was it.
Try this config:
xtype:'combo',
fieldLabel:'Division',
name:'division',
queryMode:'local',
store:['A','B','C'],
displayField:'division',
autoSelect:true,
forceSelection:true
Another Alternative is listed right in the docs of the ComboBox:
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
valueField is mandatory for combobox. Try setting the valueField in your combobox.
It works:
{
name: 'sample',
xtype: 'combobox',
allowBlank: false,
emptyText: 'select ...',
queryMode: 'local',
itemId: 'sample',
id: 'sample',
displayField: 'name',
valueField: 'name',
forceSelection:true,
store: ['B','C', 'A'],
typeAhead: true
}
instead of using loadData();
comboTest.store.loadData(value);
use loadRawData();
comboTest.store.loadRawData(value);
If confusion try ths fiddle
I have 3 combo box's. When you click the first box the second box needs to update showing the relevant data. I select the first combo the second box updates perfectly. However if i try the same steps again the second box doesn't stop loading ( see image )
Here is the code from my view
{
xtype: 'combobox',
name: 'Clients',
id: 'clients',
displayField: 'Name',
store: 'Clients',
queryMode: 'local',
mode: 'local',
valueField: 'Id',
fieldLabel: 'Clients'
},{
xtype: 'combobox',
name: 'Projects',
id: 'projects',
displayField: 'Name',
editable: false,
store: 'Projects',
queryMode: 'local',
mode: 'local',
valueField: 'Id',
fieldLabel: 'Projects'
}
and from my controller
stores: ['Projects', 'Clients', 'Jobs'],
init: function () {
this.control({
'#clients': {
change: this.onClientSelect
},
'processlist button[action=copy]': {
click: this.onCopyPart
},
'#processColourContainer #processColourGrid': {
edit: this.onPurchaseOrderColourUpdate
}
});
},
onLaunch: function () {
var clients = this.getClientsStore();
clients.load();
},
onClientSelect: function (selModel, selection) {
var projects = this.getProjectsStore();
projects.load({
url: '/Projects/Read/?clientId=' + selection,
scope: this
});
},
Known bug:
http://www.sencha.com/forum/showthread.php?153490-Combo-Box-Store-Loading
Adding this should sort it out:
store.on('load', function (store, records, successful, options) {
if (successful && Ext.typeOf(combo.getPicker().loadMask) !== "boolean") {
combo.getPicker().loadMask.hide();
}
});
I had the same symptom with a local data store with ExtJS Combobox, but the correct fix was to set queryMode properly in the combo box - there's no bug in the store (at least in 4.1 version of ExtJS). queryMode must be set to "local" instead of its default "remote" value, if your data is stored locally within the data store (as in my working example below).
ComboBox:
xtype: 'combobox',
name: 'sizeMaxUnits',
value: 'TB',
editable: false,
displayField: 'abbr',
**queryMode: 'local',**
store: 'UnitsStore',
valueField: 'units'
Store:
Ext.define('DiskApp.store.UnitsStore', {
extend: 'Ext.data.Store',
requires: [
'DiskApp.model.UnitsModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
model: 'DiskApp.model.UnitsModel',
storeId: 'MyStore',
data: [
{
abbr: 'MB',
units: 'M'
},
{
abbr: 'GB',
units: 'G'
},
{
abbr: 'TB',
units: 'T'
}
]
}, cfg)]);
}
});
I found that hooking into the 'expand' event on the combo worked better (hooking into 'load' on the store somehow destroyed the binding of the combo to the store, causing all sorts of horrible, hard to track down errors).
combo.on('expand', function (field, options) {
if (Ext.typeOf(field.getPicker().loadMask) !== "boolean") {
field.getPicker().loadMask.hide();
}
}, this);
This did the job for me without breaking my application.
A really simple solution is to add the listConfig config to your combo box:
{
xtype:'combobox',
fieldLabel: 'My Combo',
listConfig: { loadingText: null, loadMask: false },
}