How to render the selected value of combo box in grid of ExtJs?
{
header: 'value',
width: 150,
dataIndex: 'roleType',
editor: {
xtype: 'combobox',
store: 'RoleStore',
valueField: 'roleId',
displayField: 'roleType',
}
}
If you're using ExtJS5+, you can use the widget column.
{
xtype: 'widgetcolumn',
header: 'value',
width: 150,
dataIndex: 'roleType',
widget: {
xtype: 'combobox',
store: 'RoleStore',
valueField: 'roleId',
displayField: 'roleType',
}
}
Example: https://fiddle.sencha.com/#fiddle/17tv
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 am having big troubles with data bindings in ExtJs5. I still can't understand why the field label can't be binded to the view-controller as there is a setFieldLabel() function?
{
xtype: 'combobox',
store: 'genderStore',
queryMode: 'local',
displayField: 'label',
valueField: 'gender',
labelAlign: 'top',
bind:{
value:'{scrape}',
fieldLabel:'{myLabel}'
}
}
formulas: {
myLabel:function(get){
return get('widgetSettings').properties.keyDim.dimensionName;
},
scrape:function(get){
return 0;
},
The value gets populated, but the fieldLabel - not.
Thanks!
I have 2 combos, I want to force to select the first combo (employer combo), after it's selected then the combo 2 (employee combo) is enable.
ExtJS 4.2.1
The code of the combos is:
{
xtype: 'combobox',
store: Ext.create('SoftHuman.store.catalog.Employer', {
autoLoad: true
}),
displayField: 'Description',
valueField: 'EmployerId',
fieldLabel: 'Company',
name: 'EmployerId',
queryMode: 'local',
allowBlank: true
}, {
xtype: 'combobox',
anchor: '100%',
store: Ext.create('SoftHuman.store.employee.EmployeeCombo'),
displayField: 'FullName',
valueField: 'EmployeeId',
queryMode: 'remote',
fieldLabel: 'Employee',
editable: true,
hideTrigger: true,
queryParam: 'searchStr',
name: 'EmployeeId',
allowBlank: true,
listConfig: {
loadingText: 'Searching...',
// Custom rendering template for each item
getInnerTpl: function () {
return '<b>{EmployeeNumber}</b> / {FullName}';
}
}
},
Right now my remote combo employee combo send into the query param "searchStr" that is the string typed in the combo. I need to pass also the selection from combo 1 (employer combo).
How can I achieve this? Thanks.
use something like this.
Ext.ComponentQuery.query('EmployerId').value
Ext.getCmp('EmployerId').value
var empValue = getComponent('EmployerId').value
if .value not work then try getValue() method.
Hope this helps.
in your second component(EmployeeId) add configuration disabled:true on load.
then add afterrender listener to the first one. and then set the other combo available.
Then do this............................................................................
{
xtype: 'combobox',
store: Ext.create('SoftHuman.store.catalog.Employer', {
autoLoad: true
}),
displayField: 'Description',
valueField: 'EmployerId',
fieldLabel: 'Company',
name: 'EmployerId',
queryMode: 'local',
allowBlank: true
listeners: { <---------------------here
select: function(combo, selection) {
if (combo.getValue() != undefined) {
Ext.ComponentQuery.query('EmployeeId').setDisabled(false)
} <----------------------------- to here
}, {
xtype: 'combobox',
anchor: '100%',
store: Ext.create('SoftHuman.store.employee.EmployeeCombo'),
displayField: 'FullName',
valueField: 'EmployeeId',
queryMode: 'remote',
fieldLabel: 'Employee',
editable: true,
disabled:true, <------------add this
hideTrigger: true,
queryParam: 'searchStr',
name: 'EmployeeId',
allowBlank: true,
listConfig: {
loadingText: 'Searching...',
// Custom rendering template for each item
getInnerTpl: function () {
return '<b>{EmployeeNumber}</b> / {FullName}';
}
}
},
Hope this helps :)
I want to create a form to provide optional parameters for search query in Ext js 4.
I have implemented this by using menuitem so far. It works fine but it has strange behavior which I need to get rid of:
In mouse over textfield, which is menu item, it gets focus without waiting for click and it loses focus on mouse out. That means, if I want to type something I should hover it, and if I move my mouse to somewhere else it loses focus and I cannot continue typing until I bring my mouse back. This is actually correct for menu item because it is supposed to be button.
{
xtype: 'button',
action: 'chooseOptions',
text: 'Options',
menu: new Ext.menu.Menu({
plain: true,
allowOtherMenus: true,
items: [
{
xtype: 'textfield',
name: 'login',
fieldLabel: 'Login',
labelWidth: 100,
margin: '10 10 10 10',
width: 300
},
{
xtype: 'combobox',
fieldLabel: 'Type',
name: 'type_id',
store: 'MyStore',
displayField: 'value',
valueField: 'id',
editable: false,
labelWidth: 100,
margin: '0 10 10 10',
width: 300
},
{
xtype: 'combobox',
fieldLabel: 'Agent',
name: 'a_id',
store: 'Agents',
displayField: 'name',
valueField: 'id',
editable: false,
labelWidth: 100,
margin: '0 10 10 10',
width: 300
}
]
})
},
Is there any alternatives to implement this?
Try this and let me know what's happening ( prevent loosing by adding delay )
{
xtype: 'button',
action: 'chooseOptions',
text: 'Options',
menu: new Ext.menu.Menu({
plain: true,
allowOtherMenus: true,
items: [
{
xtype: 'textfield',
name: 'login',
fieldLabel: 'Login',
labelWidth: 100,
margin: '10 10 10 10',
width: 300,
listeners: {
afterrender: function(field) {
field.focus(false, 1000)
// or try without parameter
}
}
},
{
xtype: 'combobox',
fieldLabel: 'Type',
name: 'type_id',
store: 'MyStore',
displayField: 'value',
valueField: 'id',
editable: false,
labelWidth: 100,
margin: '0 10 10 10',
width: 300
},
{
xtype: 'combobox',
fieldLabel: 'Agent',
name: 'a_id',
store: 'Agents',
displayField: 'name',
valueField: 'id',
editable: false,
labelWidth: 100,
margin: '0 10 10 10',
width: 300
}
]
})
},
Or just try to get by ComponentQuery and set focus() method values:
var txtField = Ext.ComponentQuery.query('textfield[name=login]');
txtField.focus(false, 500);
I had the same problem.
I tried many workaround but nothing really worked.
I ended up to add a listener on the button menu to catch mouseover event and then focus the textfield everytime. This works only if you have ONE textfield otherwise you have to add tests to determine which textfield to focus on mouseover.
lets try this :
,listeners: {
mouseover : function (menu, item, e, eOpts) {
//fix bug of loosing focus on combo
menu.down("combo[name=myComboName]").focus();
}
}
I'm setting the value of a combobox using combo.setValue(value) passing an id that is linked to a displayField. The problem is that I want to show the displayField not the id, it seems like extjs does not make the conversion.
{
xtype: 'combobox',
fieldLabel: 'Categoria',
name: 'categoria',
labelAlign: 'top',
allowBlank: false,
blankText: 'Campo obbligatorio',
typeAhead: true,
displayField: 'categoria',
valueField: 'id',
store: comboCategoriaStore,
columnWidth: .2,
margin: 5,
listeners: {
select: {
fn: me.onFieldBlur,
scope: me
}
}
}