Dynamic form fields on change of combobox In extjs 4

Question

I have a combobox and now I want to create a dynamic textfields on change of this combo box in Extjs 4 and i am following the Mvc structure of Extjs . Mycombo is below

        {
                                    xtype : 'combo',
                                    store : 'product.CategoryComboBox',
                                    name: 'category',
                                    id:'category',
                                    displayField: 'name',
                                    valueField: 'idProductCategory',
                                    multiSelect : false,
                                    fieldLabel: 'Category',
                                    allowBlank: false,
                                    allowQueryAll : false,
                                    forceSelection : true,
                                    typeAhead: true,
                                    triggerAction: 'all',
                                    delimiter : ',',
                                    width: 300,
                                    queryMode:'local',
                                    listeners:{select:{fn:function(combo, value) {}
}

Answer 1

You can add a FieldSet like this to your form

{
    xtype: 'fieldset',
    itemId: 'field_container',
    layout: 'anchor',
    border: 0,
    style: { padding: '0' },
    fieldDefaults: {
        // field defaults
    },
    defaultType: 'textfield'
}

so when the combobox changes its value you just do the following

var container = this.down('fieldset[itemId="field_container"]');
container.removeAll();
var fieldsToAdd = [
    { name: 'field1', xtype: 'textfield', value: 'xxxxxx' },
    { name: 'field2', xtype: 'textfield', value: 'yyyyyyy' }
];
container.add(fieldsToAdd);

this way you can decide what the fieldsToAdd contains based on the combobox value.

Answer 2

Set an id to the textfield, then configure the listeners property of your combo as follows :

listeners: {
    change: function (combo, value) {
        Ext.get('idOfYourTextfield').setValue(value);
    }
}