CODEWITHSUNDEEP
extjs
user49126
user49126

Reputation: 1863

EXTJS Dynamically put a component into a container with other components

I'd like to achieve this behavior:

If a field (combo, text, date ...) in a form panel has a custom property set true

 {
    xtype: 'textfield',
    fieldLabel: 'Name',
    name: 'Name',
    customProp: true 
},

then add a button or other components behind the actual component. Writen in json it would look like this: 

   {        
                            xtype: 'container',
                            margin: '0 0 8 0',
                            layout: 'hbox',
                            items: [
                                {
                                    xtype: 'textfield',
                                    fieldLabel: 'Name',
                                    name: 'Name',
                                },
                                {
                                    xtype: 'button',
                                    text: 'xxx',
                                    tooltip: 'I\'m a custom tooltip'
                                }                                
                            ]
}

I'm wondering how i could achieve this. Is this even possible ?

Upvotes: 0

Views: 1331

Answers (1)

Evan Trimboli
Evan Trimboli

Reputation: 30092

It is.

Ext.require('*');

Ext.onReady(function() {

    var form = new Ext.form.Panel({
        renderTo: document.body,
        width: 400,
        height: 100,
        items: {
            xtype: 'textfield',
            fieldLabel: 'Foo'
        }
    });

    setTimeout(function() {
        var field = form.down('textfield');

        // We have a reference to the field, let's go!
        var owner = field.ownerCt;

        owner.remove(field, false);
        owner.add({
            xtype: 'container',
            layout: 'hbox',
            items: [field, {
                xtype: 'button',
                text: 'Foo'
            }]
        });
    }, 1000);

});

Where container is a reference to the container with the hbox layout.

Upvotes: 2

Related Questions