Is it possible to append one xtype to another in Ext JS

Question

Is there any way to append two xtypes in single. I mean i have one xtype as textfield and other one as button. Here i am giving the code for a button next to a textfield and its working. But now i need both the textfield and button in single.

   {
        layout: "column",
        anchor: "0",
        items: [{
            columnWidth: .5,
            layout: "form",
            items: {
                xtype: "textfield",
                name: "agent",
                fieldLabel: "Representant",
                anchor: "0"
            }
        },{
            columnWidth: .5,
            items: {
                xtype: 'button',
                text: 'Click me'
            }
        }]
    }

Answer 1

xtype or widget

A xtype is a sort of a shortconstructor for a class. What you can nest inside a class depends on the class. As for a textfield you can't append any childs. You should take a look at the API if you want more info about any class. Basicly you can nest them as you did it in your question

For what you want

To makes this really clean you could either extend textfield, use triggerfield (this one has already buttons where you can change the layout) or write a plugin which then can get appended to any appropriate field.

Comment Answer

You can try the following untested code! Instead of a composite field you could also use a container with a applied hbox layout. But this feels more suitable for me.

{
    xtype: 'compositefield',
    labelWidth: 120
    items: [
        {
            xtype     : 'textfield',
            fieldLabel: 'Title',
            flex      : 1,
            ref       : '../myTextfieldRef' // set a selfreference to the ownerCt
        },
        {
            xtype     : 'button',
            iconCls   : 'icon-class-name',
            text      : 'My Button Text',
            width     : 20,
            ref       : '../myButtonRef', // set a selfreference to the ownerCt
            handler   : function(btn) {
                console.log(btn.ownerCt.myTextfieldRef.value);
            }
        }
    ]
}