Fill combo box with items

[wrongt]

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]

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]

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]

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]

Thanks for help skirtle now it seams work great.

[Spenna]

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]

Wouldn't you just need to put a load event listener on the second store to pick the first value?

[Spenna]

@skirtle: Thanks, using local queryMode and explicit loading of store works (when i apply loadmask-fix from referenced thread).