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
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 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
I am trying to test against a combobox value from inside dataview's tpl:
Ext.define('MyForm', {
extend: 'Ext.form.Panel',
items: [
{
xtype: 'combo',
name: 'my_combo',
},
{
xtype: 'dataview',
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="this.test()">pass</tpl>',
'</tpl>'
,
{
test: function(){
//doesn't work
return this.getView().down('[name=my_combo]').getValue() == 'ok';
}
}),
}
]
});
This doesn't work because this is referencing to the template itself and I can't figure out how to access the view from the inside.
It is not possible to access a view in XTemplate. To achieve this you can use ViewModel, here is the code for it.
And working sencha fiddle https://fiddle.sencha.com/#fiddle/175s
Update: I updated the code to use the DataView, DataView is little tricky, i overwritten the prepareData method to pass in extra information to the template and also updating the DataView whenever the combo value is changed. Here is the fiddle with updated changes https://fiddle.sencha.com/#fiddle/175s
Ext.define('MyApp.MyPanel', {
extend: 'Ext.Panel',
xtype: 'myForm',
defaults: {
padding: 10
},
viewModel: {
stores: {
employeeStore: {
fields: ['name'],
data: [{
name: 'John'
}, {
name: 'Tempel'
}, {
name: 'George'
}, {
name: 'Milinda'
}]
},
}
},
items: [
{
xtype: 'combobox',
fieldLabel: 'Name',
name: 'nameField',
queryMode: 'local',
displayField: 'name',
valueField: 'name',
reference: 'emp',
bind: {
store: '{employeeStore}',
value: '{name}'
}
},{
xtype: 'dataview',
itemId: 'empList',
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="dataview-multisort-item">',
'<h3>{name}</h3>',
'<tpl if="passed">Selected</tpl>',
'</div>',
'</tpl>'
),
itemSelector: 'div.dataview-multisort-item',
bind: {
store: '{employeeStore}'
},
prepareData: function(data, index, record) {
var name = this.up().getViewModel().get('name');
var passed = record.get('name') == name;
return Ext.apply({passed: passed}, data);
}
}
],
initComponent: function() {
this.callParent(arguments);
var me = this;
// refresh the dataview when name is changed.
this.getViewModel().bind('{name}', function() {
var dataview = me.down('#empList');
dataview.refresh();
});
}
});
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 :)
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.