Ext 根据下拉框选择不同的值 显示不同的文本框

一个小白刚刚入手extjs求大佬教教怎么写

参考GPT和自己的思路：

对于这个问题，可以通过 Ext 的事件监听器来实现。具体实现步骤如下：

1. 在下拉框的触发器监听事件上添加一个 select 事件，当下拉框的选项改变时触发该事件。

2. 在事件中获取选中的值，根据选中的值来显示或隐藏相应的文本框。可以通过 Ext.getCmp() 方法获取文本框组件，并设置其 hidden 属性来实现显示或隐藏。

3. 最后在初始化时对文本框进行隐藏，避免在页面加载时全部显示出来。

以下是参考代码实现：

Ext.onReady(function(){
    var comboBox = Ext.create('Ext.form.ComboBox', {
        fieldLabel: '请选择',
        store: [['1', '选项1'], ['2', '选项2'], ['3', '选项3']],
        listeners: {
            select: function(combo, records) {
                var value = records[0].get('value');
                var box1 = Ext.getCmp('box1');
                var box2 = Ext.getCmp('box2');
                if(value === '1') {
                    box1.show();
                    box2.hide();
                } else if(value === '2') {
                    box1.hide();
                    box2.show();
                } else {
                    box1.hide();
                    box2.hide();
                }
            }
        }
    });

    var box1 = Ext.create('Ext.form.TextField',{
        id: 'box1',
        fieldLabel: '选项1',
        hidden: true
    });

    var box2 = Ext.create('Ext.form.TextField',{
        id: 'box2',
        fieldLabel: '选项2',
        hidden: true
    });

    var form = Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        title: '隐藏/显示文本框示例',
        width: 400,
        items: [comboBox, box1, box2]
    });
});

希望这个回答能对你有所帮助。