ExtJS：如何设置组合框 ID？

Question

我有一个小问题。在我的应用程序中，我总是构建两个链接的组合框 - 国家和城镇（然后选择国家 - 城镇开始加载）。所以我想 - mbe 编写一个构造函数并最小化我的代码？好的，我做到了。但我遇到了一个问题：我在页面上有 2-3 个这样的链接组合框，当我在第二个组合国家/地区选择时，数据（城镇）在第一个组合中加载，因为它具有相同的 id。好的 - 现在我尝试将参数 id 传递给构造函数，但它没有用。如何设置组合框的 id 然后我创建一个对象？

国家组合

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);}})

和城镇组合

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);}})

新的 comboTownClass({town_name_id:'townFormSearch'})

新的comboCountryClass({town_name_id:'townFormSearch'})

Answer 1

您可以通过执行以下操作来设置组件的 id：

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

你可以指定一个默认id，当你在配置参数中传递一个id时，它会覆盖默认值。

虽然我同意@Upper Stage，但您应该尝试限制表单中硬编码的 id 值的数量 - 您可以改为使用表单名称来获取表单元素。

Answer 2

我遵循以下规则：“永远不要使用硬编码的 ID。”您可以使用

从 Ext JS 检索唯一 ID

Ext.id( null, 'someTextString' )

当您使用唯一 ID 时，您会产生更多的记账，但您不会遇到上面所写的问题。

有时我将唯一 ID 存储在本地对象中，然后在必要时引用该实例变量。

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

Answer 3

myCombobox.id = yourId;