ExtJS : How to set combobox id?

Question

Hello guys.

I have a little problem. At my application Im always building two linked combobox - country and towns(then country are selected - towns began to load). So i thinked - mbe write a constructor and minimized my code? Ok i did it. But i got a problem: i have 2-3 couple of this linked comboboxes on page and when i selected at second combo country, the data (towns) loads at first combo, because it has the same id. Ok - now im trying take a param id to constructor and it didnt work. How set id of combobox then i create an object?

Country combo

comboCountryClass = Ext.extend(Ext.form.ComboBox, {
            fieldLabel: 'country',
            anchor: '95%',
            lazyRender:true,
            store:new Ext.data.Store({
                  proxy: new Ext.data.HttpProxy(
                    {url: '../lib/getRFB.php?rfb_type=countrys',
                    method: 'GET'}
                  ),
                  reader: countryReader,
                  autoLoad: true
            }),
            displayField:'country_name',
            valueField:'country_id',
            triggerAction:'all',
            mode:'local',
            listeners:{
                select:{
                    fn:function(combo, value) {
                        var modelCmp = Ext.getCmp(this.town_name_id);
                        alert(this.town_name_id);
                        modelCmp.setValue('');
                        modelCmp.getStore().proxy.setUrl('../lib/getRFB.php');
                        modelCmp.store.reload({
                            params: { 'country_id': this.getValue(),rfb_type: 'towns' }
                        });
                    }
                }
            },
            hiddenName:'country_id',
            initComponent: function() {comboCountryClass.superclass.initComponent.call(this);}})

And town combo

comboTownClass = Ext.extend(Ext.form.ComboBox, {
            fieldLabel:'town',
            displayField:'town_name',
            valueField:'town_id',
            hiddenName:'town_id',
            anchor: '95%',
            id:this.town_name_id || 'youuuu',
            store: new Ext.data.Store({
                  proxy: new Ext.data.HttpProxy(  
                    {url: 'lib/handlers/orgHandler.php?action=read&towns=true',
                    method: 'GET'}
                  ),
                  reader: townReader
            }),
            triggerAction:'all',
            mode:'local',
            initComponent: function() {comboTownClass.superclass.initComponent.call(this);}})

new comboTownClass({town_name_id:'townFormSearch'})

new comboCountryClass({town_name_id:'townFormSearch'})

Answer 1

myCombobox.id = yourId;

Answer 2

I live by the rule: "never use hardcoded IDs." You can retrieve a unique ID from Ext JS using

Ext.id( null, 'someTextString' )

You will incur more bookkeeping when you use unique IDs, but you will not run into the problem about which you write above.

Sometimes I store unique IDs locally in an object and then reference that instance variable where necessary.

this.idForCombo = Ext.id( null, 'someTextString' );
var myCmp = new SomeConstructor({
     id: this.idForCombo,
     ...more stuff });

Answer 3

You can set the id of the component by doing the following:

new comboTownClass({id:'townComboId'}); new comboCountryClass({id:'countryComboId'});

You can specify a default id, and when you pass an id in the config param it will overwrite the default value.

Although I agree with @Upper Stage you should try to limit the amount of hard-coded id values you have in the form - you can instead grab form elements using the form name instead.