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,
....
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'm still new in Extjs. I have a TreeStore which reads a JSON string as an input and I can represent it in a tree panel. But when I try to use the treestore in a tree picker there is get this error:
Is there anything missing here?
// try to find a record in the store that matches the value
record = value ? me.store.getNodeById(value) : me.store.getRootNode();
Here is the JSON format:
{
success: true,
"children": [
{
"id": "G_1",
"text": "group1",
"leaf": false
},
{
"id": "G_2",
"text": "group2",
"leaf": false
}
]
}
And here is my TreeStore:
Ext.define('App.store.GroupTree', {
extend: 'Ext.data.TreeStore',
model: 'App.model.GroupTree',
requires: 'App.model.GroupTree',
proxy: {
type: 'ajax',
url: 'property/tree.json',
reader: {
type: 'json',
root:'children'
}
},
});
My treepicker item:
items: [
{
xtype: 'treepicker',
name: 'propertyCmb',
fieldLabel: 'Property',
labelWidth: 60,
displayField: 'text',
store: 'GroupTree',
valueField: 'id',
queryMode: 'local',
}
]
Here is the treestore model code
Ext.define('App.model.GroupTree', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string', useNull: true},
{name: 'text', type: 'string'},
{name: 'leaf', type: 'boolean'},
{name: 'expanded', type: 'boolean'}
]
});
The error occurse, because the store is not auto created when assigned to your treepicker like store: 'GroupTree'.
You have to create an instance of it first and that instance you need to assign to the treepicker. See the documentation http://docs.sencha.com/extjs/5.0.1/#!/api/Ext.ux.TreePicker-cfg-store .
The following should work
var groupStore = Ext.create('App.store.GroupTree');
groupStore.load();
var picker = Ext.create('Ext.ux.TreePicker',{
name: 'propertyCmb',
store: groupStore,
fieldLabel: 'Property',
labelWidth: 60,
displayField: 'text',
valueField: 'id',
queryMode: 'local',
renderTo: Ext.getBody()
});
A working fiddle can be found at https://fiddle.sencha.com/#fiddle/dip .
I have a combobox in a form:
{
xtype: 'combobox',
fieldLabel: 'Jurisdictions',
name: 'jurisdiction_id',
id: 'ComboboxJurisdictions',
store: Ext.create('App.store.Jurisdictions'),
queryMode: 'local',
editable: false,
displayField: 'name',
valueField: 'id',
}
Data is:
1 => Administrator
2 => User
3 => Guest
Now, if I don't touch anything when editing a user, on my server for my combobox I get "Administrator" (displayField), but when I change something in combobox I get the "id" (valueField). I really just want "id" in both cases. I was reading about hiddenName? Is that the case?
If you need any more code, feel free to ask. :)
Thank you!
EDIT (more code)
1.) There is no default value.
Here is the whole view code:
Ext.define('App.view.Suits.Update', {
extend: 'Ext.window.Window',
title: 'Suits',
width: 250,
id: 'UpdateWindowSuits',
defaultType: 'textfield',
items: [{
xtype: 'UpdateFormSuits'
}],
buttons: [
{ text: 'Save', id: 'submitUpdateFormButtonSuits'},
{ text: 'Cancel', id: 'cancelUpdateFormButtonSuits'},
]
});
Ext.define('App.view.Suits.UpdateForm', {
extend: 'Ext.form.Panel',
alias: 'widget.UpdateFormSuits',
layout: 'form',
id: 'UpdateFormSuits',
bodyPadding: 5,
defaultType: 'textfield',
items: [{
fieldLabel: 'Id',
name: 'id',
hidden: true
},{
fieldLabel: 'Name',
name: 'name',
allowBlank: false,
},{
fieldLabel: 'Status',
name: 'status',
allowBlank: false
},{
xtype: 'combobox',
fieldLabel: 'Priority',
name: 'suit_priority_id',
id: 'ComboboxSuitPriorities',
store: Ext.create('App.store.SuitPriorities'),
editable: false,
displayField: 'name',
hiddenName: 'id',
valueField: 'id'
},{
xtype: 'combobox',
fieldLabel: 'Jurisdictions',
name: 'jurisdiction_id',
id: 'ComboboxJurisdictions',
store: Ext.create('App.store.Jurisdictions'),
queryMode: 'local',
editable: false,
displayField: 'name',
valueField: 'id',
}],
});
Here is the store:
Ext.define('App.store.SuitPriorities', {
extend: 'Ext.data.Store',
// Where is the Model.
model: 'App.model.SuitPriority',
// "id" of the Store.
storeId: 'SuitPriorities',
// Autoload all data on creation.
autoLoad: true,
// Number of records in one page (for pagination).
pagesize: 20,
// Proxy for CRUD.
proxy: {
// Type of request.
type: 'ajax',
// API for CRUD.
api: {
create : 'php/suitpriorities/update',
read : 'php/suitpriorities/read',
update : 'php/suitpriorities/update',
destroy : 'php/suitpriorities/delete'
},
// Type of methods.
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy : 'POST'
},
// Reader.
reader: {
// Which type will the reader read.
type: 'json',
// Root of the data.
root: 'suitpriorities',
rootProperty: 'data',
// One record.
record: 'SuitPriority',
// Message and success property.
successProperty: 'success',
messageProperty: 'message'
},
// Writer (when sending data).
writer: {
type: 'json',
writeAllFields: true,
root: 'data',
encode: true
},
});
As I sad, the store is getting all the data because it's already loaded when I press the combobox. It's a simple JSON with 'id' and 'name' properties.
EDIT2: I've tried this for my Jurisdictions because I wasn't getting the right data selected in combobox. This is inside my controller.
onJurisdictionComboRender: function(combobox, eOpts){
// Getting the selected row.
var record = this.grid.getSelectionModel().getSelection()[0];
// Selected jurisdiction.
var jurisdiction = record.data.jurisdiction_id;
// Select it in combobox.
combobox.select(jurisdiction);
}
That doesn't make sense... If you read out the combo the correct way, meaning let either the form doing the work or calling getSubmitValue() on your own the combo would always returning the valueField. hiddenName is used for other purposes. Please take a look at the console of this JSFiddle and recheck how you fetch the combo value.
Here's the working demo-code
// The data store containing the list of states
var roles = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
data : [
{"id":1, "name":"Administrator"},
{"id":2, "name":"User"},
{"id":3, "name":"Guest"}
//...
]
});
// Create the combo box, attached to the states data store
var combo = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose Role',
store: roles,
queryMode: 'local',
editable: false,
displayField: 'name',
valueField: 'id',
renderTo: Ext.getBody()
});
combo.on('select', function(cb){ console.log(cb.getSubmitValue()); })
+1 for everyone for helping but the problems was here:
In my store I've put autoLoad: false and inside my combobox I've put store.load() manually and it works perfectly.
Thank you all! :)
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
This is my combobox
{
xtype: 'combo',
fieldLabel: LANG.LOGIN_LANG,
id : 'lang',
store: [
['tr','Türkçe'],
['ru','Русский'],
['en','English']
],
mode: 'local',
triggerAction: 'all',
selectOnFocus:true
},
Generally, when I want to select the first value of a store, I use this methods:
xtype: 'combo',
fieldLabel: 'prov',
id : 'lang',
store:[['tr','Türkçe'],['ru','Русский'],['en','English']],
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
listeners: {
afterrender: function(combo) {
var recordSelected = combo.getStore().getAt(0);
combo.setValue(recordSelected.get('field1'));
}
}
{
xtype: 'combo',
fieldLabel: LANG.LOGIN_LANG,
id : 'lang',
store:[['tr','Türkçe'],['ru','Русский'],['en','English']],
mode: 'local',
triggerAction: 'all',
value: 'tr',
selectOnFocus:true
},
For remote comboboxes you need to plug into store's load event to select the value after store is loaded.
You can use the value property like so:
value : 'tr'
then it will display first value by default.
You can use this code, assigning any store element after its id to the default combobox value.
{
xtype: 'combobox',
forceSelection: true,
allowBlank: true,
typeAhead: true,
queryMode: 'local',
colspan: 3,
id: 'filter_column_c',
style: {'margin': '5px 15px 15px 30px'},
fieldLabel: 'Column',
valueField: 'column',
displayField: 'name',
store: nomStores["storeCombo"],
value: nomStores["storeCombo"].getById(1),
},
As an alternative, I faced the need to show a locally stored Store, which was just a matter of listening the afterRender method:
listeners: {
afterRender: function() {
this.select(01);
}
}
01 in this case is the id (valueField) of the element in the Store:
areasCenters: {
data: [{
id: 01,
name: 'Todas'
},
{
id: 02,
name: 'Elegir...'
}
],
autoLoad: true
}