Folloving example shows normal combobox until I use XTemplate. After applying XTemplate combobox items become unclickable (no highlight on hover and no choosing by click).
Ext.onReady(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('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: 'divId',
tpl: new Ext.XTemplate(
'<tpl for="."><div class="x-combo-list-item">{name}</div></tpl>')
});
}
The default XTemplate for ComboBox is:
'<tpl for="."><div class="x-combo-list-item">{' + this.displayField + '}</div></tpl>'
You already have set the displayField to name, so why would you need a custom template?
There is no need for new Ext.Xtemplate in tpl value. Just define a template string within it.
Related
I have combo with lots of whitespaces in values, when I select item - whitespaces are displaying. However they are missing in list. See demo:
https://fiddle.sencha.com/#view/editor&fiddle/3i1v
Is it possible to show ALL whitespaces in combo list?
You can override template with custom function which will replace spaces with none breaking space -  . Something like:
var states = Ext.create('Ext.data.Store', {
fields: ['name'],
data: [
{
"name": "Alabama 3"
}, {
"name": "Alaska 11"
}
]
});
Ext.application({
name: 'MyApp',
launch: function () {
Ext.create('Ext.form.Panel', {
items: [{
xtype: 'combo',
fieldLabel: 'Choose State',
store: states,
displayField: 'name',
tpl: Ext.create('Ext.XTemplate',
'<ul class="x-list-plain"><tpl for=".">',
'<li role="option" class="x-boundlist-item">{[this.replaceSpacesWithNbsp(values.name)]}</li>',
'</tpl></ul>',
{
replaceSpacesWithNbsp: function(name){
return name.replaceAll(' ', ' ');
},
}
),
renderTo: Ext.getBody()
}]
});
}
});
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 trying to have a combobox in Extjs such that user should not edit the default value which is already available :
Here is the code i tried:::
Ext.onReady(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('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
editable:false,
queryMode: 'local',
valueField: 'abbr',
renderTo: Ext.getBody(),
// Template for the dropdown menu.
// Note the use of "x-boundlist-item" class,
// this is required to make the items selectable.
tpl: Ext.create('Ext.XTemplate', '<tpl for=".">', '<div class="x-boundlist-item">{abbr} - {name}</div>', '</tpl>'),
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate', '<tpl for=".">', '{abbr} - {name}', '</tpl>')
});
});
Although i do editable:false ... but it didnt work.
Please help.
Due to some cache problem , editable:false was not working
however it is correct solution
Is there any way to implement a component popup on Trigger Field click? For example, I have a Trigger Field, and I would like to display a Tree Grid when I click the Triggerfield. When I select a value from the Tree Grid, the Trigger Field also set the same value.
There's an example from Ext.Net that is similar to this: http://examples.ext.net/#/Form/DropDownField/Overview/
I use Sencha Arhitect 3 and ExtJS 4.2. Any help is appreciated!
Try this.
Ext.create('Ext.form.ComboBox', {
store: Ext.create('Ext.data.Store', {
fields: ['group_name', 'property'],
data: [{
"group_name": "Armed Clash",
"property": "Border Clash"
}, {
"group_name": "Armed Clash",
"property": "Militia Clash"
}, {
"group_name": "Smuggling",
"property": "Fuel"
}, {
"group_name": "Smuggling",
"property": "Humans"
}]
}),
listConfig: {
tpl: Ext.create('Ext.XTemplate',
'<ul><tpl for=".">',
'<tpl if={group_name}>',
'<tpl if="xindex == 1 || this.getGroupStr(parent[xindex - 2]) != this.getGroupStr(values)">',
'<li class="x-combo-list-group"><b>{[this.getGroupStr(values)]}</b></li>',
'</tpl>',
'</tpl>',
'<li role="option" class="x-boundlist-item" style="padding-left: 12px">{property}</li>',
'</tpl>' +
'</ul>', {
getGroupStr: function (values) {
return values.group_name
}
}
)
},
queryMode: 'local',
valueField: 'property',
displayField: 'property',
renderTo: Ext.getBody()
});
Make list collapsible using js and add icons using styles.
Can refer this fiddle http://jsfiddle.net/gilsha/82TzM/1/
Or else use Ext.ux.TreeCombo, Fiddle: http://jsfiddle.net/gilsha/ZvnaM/83/
If I were you I firstly consider using some already existing component.
Base treepicker exists as bundled extension in ExtJS framework - Ext.ux.TreePicker
Another useful implementation of treepicker is user extension Ext.ux.TreeCombo
If you want to create your own picker component it should extends from Ext.form.field.Picker
For inspiration how to create your own picker you can look into source code of Ext.ux.TreePicker or Ext.picker.Date components.
Thanks to everyone's answer, I found another solution: use the createPicker function of the TriggerField. For example, here's how I extend the TriggerField` for a Grid Picker:
Ext.define('Custom.view.GridPicker', {
extend: 'Ext.form.field.Picker',
alias: 'widget.gridpicker',
requires: [
'Ext.grid.View',
'Ext.grid.column.Column'
],
store: 'none',
idDataIndex: 'id',
nameDataIndex: 'name',
fieldLabel: 'Grid Picker',
initComponent: function() {
var me = this;
me.callParent(arguments);
},
createPicker: function() {
picker = new Ext.create('Ext.grid.Panel', {
floating: true,
hidden: true,
height: 150,
width: 400,
header: false,
store: this.store,
columns: [
{
xtype: 'gridcolumn',
width: 95,
text: 'ID',
dataIndex: this.idDataIndex
},
{
xtype: 'gridcolumn',
width: 300,
text: 'Name',
dataIndex: this.nameDataIndex
}
]
});
return picker;
}
});
Fiddle: https://fiddle.sencha.com/#fiddle/2fb
This custom component accepts 3 config : store, idDataIndex, nameDataIndex; all of them needed to display data to the grid. I think you can base on this to extend your own picker, such as Tree Grid Picker :)
I've seen similar questions go unanswered elsewhere. I want to have a combobox in a column with two options (ASC, DEC) in it. I want it to show up in each row, or at least have its value show up when it's not selected.
I know that its not a 'good idea' to render a combobox in each row, but in this case I know I will have a maximum of about 20 rows, so it shouldn't be a huge deal. If this can't be done I want to have the selected value from the combobox show. Currently I just have the comboboxes appearing when I click a row, which doesn't make much sense since you can't see your selection unless you are making it. What is the solution to this?
Also, I want to get rid of the change and cancel buttons that pop up when I click a row, I just want to be able to edit the cell with the combobox, and have it automatically change/save.
You can set a default value for the combo.
That should then get that rendered at startup.
Use cell renderer to render the displayField of the combo into your grid. Following a working example that can be poster in one of the API code boxes.
Working JSFiddle
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone', 'id'],
data: {
'items': [{
"name": "Lisa",
"email": "lisa#simpsons.com",
"phone": "555-111-1224",
"id": 0
}, {
"name": "Bart",
"email": "bart#simpsons.com",
"phone": "555-222-1234",
"id": 1
}, {
"name": "Homer",
"email": "home#simpsons.com",
"phone": "555-222-1244",
"id": 2
}, {
"name": "Marge",
"email": "marge#simpsons.com",
"phone": "555-222-1254",
"id": 3
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
// the renderer. You should define it within a namespace
var comboBoxRenderer = function(combo) {
return function(value) {
var idx = combo.store.find(combo.valueField, value);
var rec = combo.store.getAt(idx);
return (rec === null ? '' : rec.get(combo.displayField));
};
}
// the combo store
var store = new Ext.data.SimpleStore({
fields: ["value", "text"],
data: [
[1, "Option 1"],
[2, "Option 2"]
]
});
// the edit combo
var combo = new Ext.form.ComboBox({
store: store,
valueField: "value",
displayField: "text"
});
// demogrid
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'Phone',
dataIndex: 'phone'
}, {
header: 'id',
dataIndex: 'id',
editor: combo,
renderer: comboBoxRenderer(combo)
}],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
{
header: 'Your header',
dataIndex: 'your Column',
editor: {
xtype: 'combobox',
store: yourStore,
queryMode: 'local',
displayField: 'Your Display..',
valueField: 'Your Value'
}