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.
Related
I need to use whatever the first value appears in the combobox
Using values directly like this one
xtype: 'combobox',
fieldLabel: 'Type',
name: 'type',
store: [
'Bike'
'Car',
'Truck'
],
value: 'Bike' // this value
It's easy because the first value is given, but I need it dynamic like this one below
xtype: 'combobox',
fieldLabel: 'Type',
name: 'type',
store: this.type,
// value
It takes the type from the database so I won't know the first value in the combobox
You will need to use Store's load event to do action on dataload. After that you can use ComboBox's
select method
to set value.
Here is working code:
Ext.application({
name: 'Fiddle',
launch: function () {
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: 'panel',
title: 'Parent Panel',
frame: true,
renderTo: Ext.getBody(),
height: 500,
width: 400,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'combobox',
store: states,
displayField: 'name',
valueField: 'abbr',
listeners: {
afterrender: function(combo) {
combo.store.on('load', function(store, records) {
combo.select(records[0]);
console.log(combo, records);
});
combo.store.load();
}
}
}],
collapsible: true
});
}
});
Here is working fiddle link: https://fiddle.sencha.com/#view/editor&fiddle/2kgg
so I have a view where I display a combobox and a grid that share a 'Roles' store. If you pick an option on the combobox, the grid will be filtered accordingly.
I am looking for a way to add an "All" option to the combobox that is selectable (so placeholder or value attributes don't work for me). I want to do this because I cannot add that option to the store without affecting the grid as well.
This is my code:
Ext.define("MODIFE.view.administration.Roles",{
extend: "Ext.panel.Panel",
xtype: "app-administration-roles",
controller: "administration-roles",
viewModel: {
type: "administration-users"
},
title: "Roles",
items:[
{
title: 'Búsqueda de Roles',
frame: true,
resizable: true,
xtype: 'form',
layout: 'column',
defaults: {
layout: 'form',
xtype: 'container',
defaultType: 'textfield',
style: 'width: 50%'
},
items: [{
items: [{
fieldLabel: 'Rol',
xtype: 'combobox',
store: 'Roles',
displayField: 'Description',
valueField: 'RoleId',
}]
}, {
items: [
{ fieldLabel: 'Estatus', xtype: 'combobox' },
]
}],
buttons: [
{ text: 'Nuevo' },
{ text: 'Buscar' }
]
},
{
layout: 'fit',
items: [{
xtype: 'grid',
id: 'rolesGrid',
title: 'Listado de Roles',
store: 'Roles',
columns: [
{ text: 'Rol', dataIndex: 'Description', flex: 2},
{ text: 'Estatus', dataIndex: 'Status', flex: 2},
]
}]
}]
});
Thanks in advance!
You could clone the store, then any alterations wont be reflected in the original store. (but it's messy, and may have problems with syncing if you have this enabled)
//clone store
var records = [],
me = this;
me.store.each(function(r){
records.push(r.copy());
});
var store2 = new Ext.data.Store({
recordType: me.store.recordType,
model: me.store.model
});
store2.add(records);
//add record
store2.add({ID:"-1", NAME: "-Please select-"});
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'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);
}
}
});
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