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
Related
I have a number of combo boxes in a fluid layout that appear alongside each other
I would like the combo boxes to wrap underneath if there is insufficient space to display them alongside each other.
Here is a fiddle of what i have so far - https://fiddle.sencha.com/#view/editor&fiddle/1mn1
The items align correctly in a container with layout hbox but no wrapping overflowing seems to be occurring.
Ext.create('Ext.panel.Panel', {
title: 'Combo boxes',
width: '100%',
layout: 'vbox',
items: [{
xtype: 'container',
layout: 'hbox',
items: [{
xtype:'combo',
store: states,
displayField: 'name',
valueField: 'abbr'
},
{
xtype:'combo',
store: states,
displayField: 'name',
valueField: 'abbr'
},
{
xtype:'combo',
store: states,
displayField: 'name',
valueField: 'abbr'
},
{
xtype:'combo',
store: states,
displayField: 'name',
valueField: 'abbr'
}]
}],
renderTo: Ext.getBody()
});
How can i get the combo boxes to wrap as required ?
// 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"
}
//...
]
});
Ext.create({
xtype: 'viewport',
renderTo: Ext.getBody(),
items: [
Ext.create('Ext.panel.Panel', {
title: 'Combo boxes',
style: 'display: flex;',
defaults: {
style: 'float:left;'
},
items: [{
xtype: 'combo',
store: states,
displayField: 'name',
valueField: 'abbr'
}, {
xtype: 'combo',
store: states,
displayField: 'name',
valueField: 'abbr'
}, {
xtype: 'combo',
store: states,
displayField: 'name',
valueField: 'abbr'
}, {
xtype: 'combo',
store: states,
displayField: 'name',
valueField: 'abbr'
}]
})
]
});
Here is a working fiddle.
A style is applied to the panel, then every component gets the style:'float:left;' by the panel's defaults property, that sets to every item the properties in the object.
The panel will always put the combos wrapped if the width changes, I updated the fiddle to show you that you can resize it without problems.
I have a combobox:
var cmbMarket = new Ext.form.ComboBox
({
id: 'cmbMarket',
fieldLabel: 'Market',
allowBlank: false,
store: config.marketStore,
queryMode: 'local',
displayField: 'marketName',
forceSelection: true,
valueField: 'id'
});
When user starts typing something in the combobox it correctly filters its contents so to help user to find what they are searching for.
Problem is that, when user leaves the combobox text blank, search does not reset!
In other words, assuming this list:
can
cat
coockies
...
salt
say
If user starts typing "c" and then leaves the combo blank, its contents are only words starting with "c", so:
can
cat
coockies
At start I though it was because of the "local" queryMode, making combo losing its data. Anyway if User writes "s" after that the list
salt
say
correctly appears, so data is still there!
Where is the problem?
What ExtJS version do you use?
I've made fiddle for you problem in Ext5.1 and Ext4.2 and it works correct.
Look https://fiddle.sencha.com/#fiddle/j6s
Ext.define('App.model.Business', {
requires: [ 'Ext.data.reader.Xml' ],
extend: 'Ext.data.Model',
fields: [{
name: 'Id',
type: 'string'
}, {
name: 'MarketName',
type: 'string'
}]
});
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
model: 'App.model.Business',
data : [
{MarketName: 'coo', Id: '1'},
{MarketName: 'caa', Id: '2'},
{MarketName: 'saul', Id: '3'},
{MarketName: 'sdsq', Id: '4'}
]
});
Ext.create('Ext.panel.Panel', {
title : 'XML Model Example',
layout : 'hbox',
items : [{
xtype: 'combo',
fieldLabel: 'Market',
allowBlank: false,
store: store,
queryMode: 'local',
displayField: 'MarketName',
forceSelection: true,
valueField: 'Id'
}],
renderTo: Ext.getBody()
});
}
});
This is my Combobox
xtype: 'combo',
emptyText: 'No Data Found',
labelStyle: 'margin-bottom:5px;',
fieldLabel: 'Categories',
labelAlign: 'top',
id: 'cmbCategories',
store: ['Age','Sex','Occupation'],
editable: false,
queryMode: 'local',
matchFieldWidth: false,
listConfig: {
width: 250
}
The problem is I always get empty text i.e 'No data found'.
I dont know why my data does not bind.
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
store: states,
displayField: 'name',
valueField: 'abbr',
What do you expect? The combo as you configured it works fine. If you want a value in the textfield part of it then you must select an item from the dropdown list. If you want the combo to have a value initially, just add it to the config, e.g. value:'Age'
your store is wrong : store: ['Age','Sex','Occupation'],
this should be :
store: Ext.create('Ext.data.Store', {
fields: ['name', 'value'],
data : [
{"name":"Age", "value": 0 },
{"name":"Sex", "value": 1 },
{"name":"Location", "value": 2 }
]
}),
displayField: 'name',
valueField: 'value',
editable: false,
....
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.
I'm trying to learn a little bit about manipulating UI elements in forms. I have 2 graphical elements. I have a comboBox that has a list of arbitrary things and I have a very basic form panel.
what I'm trying to do is pass the contents of a clicked item in the combobox to the input box on the form.
Click on 'cat" in combobox then the form will say animal: cat ... I've been trying to add listeners and using the .on approaches to do this but I can't seem to get it. Any advice or hints would be much appreciated.
Ext.onReady(function () {
// The data store containing the list of cool stuffz
var animals = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
data: [{
"id": 'cat',
"name": "mycat"
}, {
'id' : 'dog',
"name": "mydog"
}, {
'id' : 'sbBarGirls',
"name": "heartbreaking-man-eating-deathclaw"
}
//...
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
id: 'combo',
width: 600,
fieldLabel: 'Choose animal',
emptyText: 'dont select the last one',
store: animals,
queryMode: 'local',
displayField: 'name',
valueField: 'id',
renderTo: Ext.getBody()
});
});
//non related code here..
Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
title: 'Animal sanctuary, one animal per location ',
width: 300,
bodyPadding: 10,
style: 'background-color: #Fdd;',
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
fieldLabel: 'animal:',
name: 'myanimal'
}]
});
});
what i was trying to do was use the dom event mousedown on one of the comboselections trigger a listener but i couldn't seem to get it to work, my apologies if the event/listener tags are incorrect.
So you need describe id for the text field, e.g.:
{
id: 'wild_but_very_good_animal',
xtype: 'textfield',
fieldLabel: 'animal:',
name: 'myanimal'
}
And add listener for the combo:
Ext.create('Ext.form.ComboBox', {
id: 'combo',
width: 600,
fieldLabel: 'Choose animal',
emptyText: 'dont select the last one',
store: animals,
queryMode: 'local',
displayField: 'name',
valueField: 'id',
renderTo: Ext.getBody(),
listeners: {
'change': function(field, selectedValue) {
Ext.getCmp('wild_but_very_good_animal').setValue(selectedValue);
}
}
});