xtype: 'combo',
mode: 'local',
value: '1',
allowBlank: false,
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: 'Is This Your Territory?',
name: 'is_territory',
hiddenName: 'is_territory',
displayField: 'name',
valueField: 'id',
width: 230,
store: yesnoStore,
this is my code.why this is not showing in ie.
I've checked your code and it runs on IE. Are you defining your yesnoStore store? Or maybe it's just the extra coma at the end of your code: yesnoStore,, remove it.
Include a store inside your script and the combo works properly:
var yesnoStore = new Ext.data.ArrayStore({
fields: ['id', 'name'],
data : [['0','option_1'],['1','option_2'],['2','option_3'],['3','option_4']]
});
This example is working on IE, maybe the problem is in your store.
{
xtype: 'combo',
mode: 'local',
value:'1',
allowBlank: false,
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: 'Is This Your Territory?',
name: 'is_territory',
hiddenName: 'is_territory',
displayField: 'name',
valueField: 'id',
width: 230,
store: yesnoStore
}
If you have pasted the full config, the error may come from the extra comma :
{
xtype: 'combo',
mode: 'local',
value: '1',
allowBlank: false,
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: 'Is This Your Territory?',
name: 'is_territory',
hiddenName: 'is_territory',
displayField: 'name',
valueField: 'id',
width: 230,
store: yesnoStore, // < remove this comma
}
This will not work even if the syntax is correct. ExtJS 3.3.1 (confirmed) and below (assumption) have a bug with IE9. IE sets the height of the combo box to 0 upon loading of page.
I attempted the following changes with no success:
setting height to a fixed size within the config
creating custom CSS for the class of the combo box list and setting height
creating custom CSS for the ID of the HTML element that represents the list and setting height
The only solution I found so far:
Upgrade to ExtJS 3.4.0 or above. This will fix this bug and many others tied to IE9.
If you go to the sencha examples and see an example for combo box for 3.3.1 with IE9, it won't work. If you check examples for combo box in 3.4.0 it works with IE9.
Unfortunately for me this is not an option so I'll continue to look for another solution that does not involve upgrade.
Hope this helps.
Related
I have ExtJs combo drop down list. I want to two-color(odd as red and even as green)row list when combo is span
Note: single row has multi(more than one line) lines
Is this possible with ExtJS 4.2? if yes how can i do that.
{ xtype: 'combobox',
id: 'mycbo',
itemId: 'mycbo',
fieldLabel: 'Name',
name: 'id',
tabIndex: 5,
allowBlank: false,
displayField: 'NAME',
forceSelection: true,
queryMode: 'local',
store: 'STORE',
valueField: 'ID'
},
You should use listConfig config to change behaviour of combobox picker. (For more information: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.ComboBox-cfg-listConfig)
In snippet below I'm setting class 'odd' and 'even' to each option in the combobox. Then I can style it with CSS.
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
listConfig: {
getInnerTpl: function(displayField) {
return '<tpl if="xindex%2==0"><div class="odd"></tpl><tpl if="xindex%2==1"><div class="even"></tpl> {' + displayField + '} </div>';
}
},
renderTo: Ext.getBody()
});
Take a look at the Custom Item Templates example here - http://docs.sencha.com/extjs/4.2.0/#!/example/form/combos.html and look at the source code and how the listConfig is used.
You should be able to use this approach for achieving custom styling of the list items that appear
I basically want to make a combo box look like a textBox with autocomplete/typeahead capabilities.
I have achieved almost everything but filtering the results on type ahead using the following code:
var tboxReportaNombre = Ext.create('Ext.form.field.ComboBox', {
margin: '5 0 0 10',
store: reportersNamesStore,
displayField: 'vcReportaNombre',
valueField: 'vcReportaNombre',
hideTrigger: true,
typeAhead: true,
typeAheadDelay: 100,
minChars: 2,
mode: 'local'
});
And this is the store I am using:
var reportersNamesStore = Ext.create('Ext.data.Store', {
fields: ['vcReportaNombre'],
proxy: {
type: 'ajax',
url: '/SIMAC/Incidencia/GetReportersNames',
}
});
It is working just fine, but when I start typing, I would like the dropdown list to be filtered to match my query. Right now it doesn't (as shown in the image below).
Any help would be really appreciated. Thanks!
I've just solved it, I had to add the properties queryMode set to local and lastQuery set to empty string.
Ending up having this code:
var tboxReportaNombre = Ext.create('Ext.form.field.ComboBox', {
margin: '5 0 0 10',
store: reportersNamesStore,
displayField: 'vcReportaNombre',
valueField: 'vcReportaNombre',
hideTrigger: true,
typeAhead: true,
typeAheadDelay: 100,
minChars: 2,
queryMode: 'local',
lastQuery: ''
});
I think Sencha should implement a Typeahead property and methods to its textboxfield.
I want to use a combobox which receives the preselected value from a data binding and also the possible options from a data binding of the same store.
The panel items configuration looks like this:
{
xtype: 'combobox',
name: 'language_default',
fieldLabel: 'Default Language',
multiSelect: false,
displayField: 'title',
valueField: 'language_id',
queryMode: 'local',
bind: {
value: '{database.language_default}',
store: '{database.languages}'
}
}
If I use this configuration, the store of the combobox is invalid and unuseable.
Is it possible to bind the selected option and also the available options of a combobox?
Upgrade to ExtJs 5.0.1 and you can use selection binding
{
xtype: 'combobox',
name: 'language_default',
fieldLabel: 'Default Language',
multiSelect: false,
displayField: 'title',
valueField: 'language_id',
queryMode: 'local',
bind: {
value: '{database.language_id}',
selection: '{database.language_default}',
store: '{database.languages}'
}
}
I have an extjs combobox whose queryMode is set to remote.
I also want the typeAhead feature in it. But typeahead doenst work in this case.
The store reloads to the original data even after typing some text in the combobox.
Here is my code:
var queryStore = Ext.create('Ext.data.Store', {
//autoLoad: true,
model: 'UserQuery',
proxy: {
type: 'ajax',
url: 'queryBuilder_getQueryList',
extraParams: {
tableId: this.title
},
reader: {
type: 'json'
}
},
listeners: {
load: function () {
var combo = Ext.getCmp('cmbQueryList');
var lst = this.last();
if (lst)combo.setValue(lst.data);
}
}
});
var queryCombo = new Ext.form.ComboBox({
width: 200,
id: 'cmbQueryList',
store: queryStore,
valueField: 'queryID',
displayField: 'queryName',
typeAhead: true,
forceSelection: true,
emptyText: 'Select Query...',
queryMode: 'remote',
triggerAction: 'query',
selectOnFocus: true,
allowBlank: false,
editable: true
});
Please suggest how do I get typeAhead and querymode remote to work together.
this code corking for me .I guess your store property autoload is true so when you going to select the combobox its going to server and reload the data. please remove the property of store auto load true. Then its working.
new Ext.form.ComboBox({
fieldLabel:'Apps',
displayField: 'name',
valueField: 'id',
typeAhead: true,
listWidth : 345,
store: myStore(),
forceSelection: true,
triggerAction: 'all',
mode:'remote',
maxLength: 50,
editable: false,
anchor : '90%',
selectOnFocus:true
}),
This following code worked at me. We have to specific the both mode and queryMode to local.
var queryCombo = new Ext.form.ComboBox({
width: 200,
id: 'cmbQueryList',
store: queryStore,
valueField: 'queryID',
displayField: 'queryName',
emptyText: 'Select Query...',
queryMode: 'local',
mode: 'local'
});
I want to create an application where the combo box should look like first image below. But when I use a list for the combo box it comes out looking like the second image. The list is not fully shown - it is getting cut. Please suggest me which property to use? The code is as below:
items: [{
xtype: 'combobox',
fieldLabel: 'Location',
displayField: 'name',
forceSelection: true,
pageSize: 10,
store: 'SalesOrderManager.store.LocationStore',
typeAhead: true,
valueField: 'id',
id: 'LocationComboBox'
}]
What it should look like:
What I'm getting instead:
The full code can be viewed in this Fiddle.
Are you talking about the picker width? I think you want:
matchFieldWidth: false,
listConfig: {
width: 250
}