PDA

View Full Version : Fill combo box with items



wrongt
29 Oct 2011, 9:45 AM
Hi,
can anybody help me when in a combo box is selected an item, in select event to add a variable who will fetch data from a link, and this data will be stored in other combo box. for example:


var sellected_item=null;
var store_data;
var second_combo = new Ext.form.field.ComboBox({
store: store_data
,displayField : 'name'
,mode:'remote'
,name: 'combo2',
editable :false,
allowBlank:false,
fieldLabel : 'chose2',
mode:'remote',
});
var firs_combo = new Ext.form.field.ComboBox({
store: [1,2]
,mode:'local'
,name: 'combo1',
editable :false,
allowBlank:false,
fieldLabel : 'chose',
listeners : {
select:function(combo, record, index){
sellected_item = this.getValue();
storetar=new Ext.data.JsonStore({
storeId: 'myStore',
isAutoLoad: true,
proxy: {
type: 'ajax',
url: 'test.pl'
reader: {
type: 'json',
root: 'images',
idProperty: 'name'
}
},
fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
});

}
}

});

var login = new Ext.FormPanel({
...
items:[first_combo ,second_combo]
...
});

when i select an item from firs_combo, the second_combo will store data from the varaible store_data who will be filed on the first_combo select event.
Unfortunately this example don't work, when the item is selected i don't see that selected method to invoke a GET method who will fetch data from specified URL. Can anybody sugest me a right way how can i implemented this think ?

skirtle
29 Oct 2011, 9:17 PM
In the select listener do something like:


select: function(combo) {
second_combo.getStore().load({
params: {
myParam: combo.getValue()
}
});
}

Make sure you also fully specify the store for second_combo. You might want to set it initially disabled and enable it in the select listener.

wrongt
30 Oct 2011, 10:16 AM
Thanks for the replay.
I do what you suggest, now my code look something like that:



//Store for combo2
var storetar=new Ext.data.Store({
proxy: {
type: 'ajax',
url: '/cgi-bin/test.pl',
reader: {
type: 'json',
root: 'images',
idProperty: 'name'
}
},
fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}],
storeId: 'myStore'
});

//declaration of combo2
var second_combo = new Ext.form.field.ComboBox({
store: 'myStore'
,valueField:'name'
,displayField : 'name'
,name: 'combo2',
editable :false,
allowBlank:false,
fieldLabel : 'Text',
mode:'local',
disabled:true
});

//Declaration of combo 1
var first_combo = new Ext.form.field.ComboBox({
store: new Ext.data.SimpleStore({
id:0
,fields: [ 'myText' ]
,data:storedName
})
,valueField:'myText'
,displayField:'myText'
,mode:'local'
,name: 'combo1',
editable :false,
allowBlank:false,
fieldLabel : 'Name' ,
listeners : {select:function(combo, record, index){
if(second_combo.isDisabled()){
second_combo.enable();}
second_combo.getStore().removeAll();
second_combo.getStore().load({
params: {
sellected_item: combo.getValue()
}
});
}
}
});


Now i front with a next problems:
1. When i select items from first_combo, yes it is fetch data from url : test.pl, but whe i focus to second_combo it also fetch data from the store source , but without params sellected_item.
2. When i select other item from first_combo, and after that i want to select item from second combo it show that items is loading , but this loading is never end.

It is possible to make second_combo not to reload store after it is set by first_combo ?

skirtle
30 Oct 2011, 10:37 AM
The check for isDisabled() seems unnecessary, as does the removeAll().

You've got the setting mode: 'local' on both of your comboboxes. This won't do anything in ExtJS 4. It should be queryMode: 'local'. I think that would explain your first problem.

For your second problem, see this thread discussing a bug which may be what you're seeing:

http://www.sencha.com/forum/showthread.php?152324

wrongt
30 Oct 2011, 12:06 PM
Thanks for help skirtle (http://www.sencha.com/forum/member.php?197255-skirtle) now it seams work great.

Spenna
4 Nov 2011, 5:48 AM
Is there any way of achieving this by using queryMode:'remote'?
The following example sets filter on the second combos store, but items aren't loaded until combo is expanded, and i need to set default value to the first item loaded from the store.

{
xtype: 'fieldset',
title : 'Hvilket gassflaske er brukt?',
defaults: {
valueField: 'id',
displayField: 'name',
xtype: 'combo',
msgTarget : 'side',
editable: false,
anchor: '100%',
allowBlank : false,
queryMode: 'remote'
},
items: [{
name: 'storage_id',
fieldLabel : 'Velg lagerplass',
store: 'Warehouses',
listeners:{
scope: this,
'select': function (combo, records) {

combo.up('fieldset').down('combo[name=tank_id]').getStore().clearFilter();
combo.up('fieldset').down('combo[name=tank_id]').getStore().filter('facility_id', records[0].get('id'));
// combo.up('fieldset').down('combo[name=tank_id]').getStore().load();
delete combo.up('fieldset').down('combo[name=tank_id]').lastQuery;
combo.up('fieldset').down('combo[name=tank_id]').clearValue();
combo.up('fieldset').down('combo[name=tank_id]').clearInvalid();
// combo.up('fieldset').down('combo[name=tank_id]').setValue('301');
}
}
},{
name: 'tank_id',
fieldLabel : 'Velg tank',
emptyText: 'Velg lager først',
displayField: 'code',
store: 'Tanks'
}]

}

skirtle
4 Nov 2011, 6:59 AM
Wouldn't you just need to put a load event listener on the second store to pick the first value?

Spenna
9 Nov 2011, 12:14 AM
@skirtle: Thanks, using local queryMode and explicit loading of store works (when i apply loadmask-fix from referenced thread).