Is there any methods to load the multiselected data on Boxselect xtype while editing the form in EXTJS 4
I am using
Ext.getCmp('boxselect id').setValue(5,6,7,10).
The above code is working when i give the single value to set value,but my condtion is to load multiple selected data when editing the form,because the boxselect is of multiselect type.
{
xtype : 'boxselect',
store : 'store',
name: 'attributes',
id: 'attributes',
displayField: 'name',
valueField: 'abbr',
multiSelect : true,
fieldLabel: 'Attribute',
allowBlank: false,
editable: true,
allowQueryAll : false,
forceSelection : true,
typeAhead: true,
triggerAction: 'all',
delimiter : ','
},
Try this Ext.getCmp('boxselect id').setValue([5,6,7,10]).
Make sure array
Related
I have a combobox that's filtering a store based on an id from another drop down. However the filter seems to be returning all the values that START with the selected id.
xtype: 'combobox',
name: 'actor',
fieldLabel: 'Actor',
typeAhead: true,
forceSelection: true,
queryMode: 'local',
displayField: 'name',
valueField: 'id',
bind: {
store: 'actorStore',
value: 'actor.id',
filters: [{
property: 'customerId',
value: '{customer.value}',
disableOnEmpty: true
}
Try to set the filter's operator, see here:
filters: [{
property: 'customerId',
value: '{customer.value}',
operator: '=',
disableOnEmpty: true
}]
(I don't know your ExtJS version, but I am not sure the combobox has a filters config, but the store surely has.)
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 have a comboBox in which items are coming from database and a have applied filter option using that comboBox...Combo works good at first time ,but the problem is when i want to select items from the comboBox at second time i don't find items in my combo(only the previous selected item)..
this.control({
'combobox[itemId=YourCombo]':
{
select: this.combogridfilter
}
});
combogridfilter: function(newValue){
var value1= Ext.getCmp('myCombo').getValue();
var grid=Ext.getCmp('afteraddingtemplate');
grid.store.load().filter([
{id:'item_code', property:"item_code", value: value1, anyMatch: false}
]);
},
here is the combo configuration
xtype:'combo',
id:'myCombo',
itemId:'YourCombo',
action:'change',
fieldLabel:'Select a template',
queryMode:'local',
store:this.store,
name:'item_code',
displayField:'item_code',
valueField:'item_code',
enableKeyEvents: true,
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a Template',
selectOnFocus: true
You should clear filter before applicate a new one:
combogridfilter: function(newValue){
var value1= Ext.getCmp('myCombo').getValue();
var grid=Ext.getCmp('afteraddingtemplate');
grid.store.clearFilter(true);
grid.store.filter('item_code', value1);
},
You should not share the store between the grid and the combo. Sharing stores between components is asking for trouble. What is happening, is that when you filter the grid, you filter the combo too. Given it's the same store...
What you can do is use a simple memory store for your combo, that you populate when the grid store is loaded.
For example, configure your combo this way:
{
renderTo: Ext.getBody(),
xtype:'combo',
id:'myCombo',
itemId:'YourCombo',
action:'change',
fieldLabel:'Select a template',
queryMode:'local',
store: {
fields: ['item_code']
,proxy: {type: 'memory', reader: 'array'}
},
name:'item_code',
displayField:'item_code',
valueField:'item_code',
enableKeyEvents: true,
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a Template',
selectOnFocus: true
}
And populate it on the load event of the grid store:
grid.getStore().on('load', function(store) {
Ext.getCmp('myCombo').getStore().loadData(store.getRange());
});
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.
i have some code that describes by column
cols.offer.push({
dataIndex: 'tags',
header : 'Тэги',
width:150,
editor : {
xtype : 'combo',
store : gridTagStore,
queryMode: 'local',
displayField: 'name',
//valueField: 'name',
multiSelect:true,
typeAhead: true,
editable:false,
triggerAction: 'all',
selectOnTab: true,
lazyRender: true,
listClass: 'x-combo-list-small',
listeners: {
focus: function(e) {
this.setValue(this.rawValue.split(', '));
}
}
}
});
so I want to select only two options in combobox.
and I want if I would select third - nothing will happen
thanks!
it works for me!
cols.offer.push({
dataIndex: 'show_at_index_as_tag_id',
header : 'Показывать на главной под тегом',
width:150,
editor : {
xtype : 'combo',
store : gridTagStore,
queryMode: 'local',
typeAhead: true,
displayField: 'name',
selectOnTab: true,
triggerAction: 'all',
lazyRender: true,
valueField: 'id',
multiSelect:true,
listClass: 'x-combo-list-small',
listeners: {
beforeselect : function(){
return (this.value.length == 1 && this.value[0] === "") || this.value.length == 0 ;
}
}
}
});
I decided to limit with only one option and to use multiselect because I have store with options that is being used in other places of application.
But I need to select empty value in this combo, so multiselection with one option select is the good solution
Add beforeselect listener to ComboBox. In the function define how many items already selected in ComboBox, if its count > 2 return false; to do nothing.