Geek asks and answers

Adding a button next to a combo box in extjs

I have a panel where I have 2 combos. I need to add a button next to one of the combo boxes. Both combo boxes and button should be on the same line. Below is my panel.

filterPanel = new Ext.Panel({
        renderTo: document.body,
          bodyStyle: 'padding-top: 6px;',
    title: 'Filters',
        collapsible: true,
        collapsed: true,
        shadow: 'sides',
        width: 400,
        frame: true,
        floating: true,
        layout: 'form',
        labelWidth: 150,
        buttonAlign: 'center',
        items: [
            {
                xtype: 'combo',
                id: 'xFilter',
                width: 200,
                listWidth: 200,
                fieldLabel: 'Filter',
                store: filterStore,
                displayField:'filterDisp',
                valueField:'filterVal',
                typeAhead: true,
                editable: true,
                mode: 'local',
                forceSelection: true,
                triggerAction: 'all',
                selectOnFocus:false
            },{
                xtype: 'combo',
                id: 'xStatus',
                width: 200,
                listWidth: 200,
                fieldLabel: 'Status',
                store: statusStore,
                displayField:'statusDisp',
                valueField:'statusVal',
                typeAhead: true,
                editable: false,
                mode: 'local',
                forceSelection: true,
                triggerAction: 'all',
                selectOnFocus:false
            }
        ]
    });

I need the button to be next to the first combo box, so the first combination and the button should be the same line. Can someone please help me with this?

Thanks in advance...

+3
source share
2 answers

In ExtJS 4, since the "composite field" is no longer available, you can use the "fieldcontainer" instead.

var config = {
    xtype:'fieldcontainer',
    layout:'hbox',
    fieldLabel: 'Combobox',
    items:[{
        xtype: 'combo',
        flex:1
        //rest of combo config,
    },{
        xtype:'button',
        text: 'Add New',
        handler: function(){
            //add new record
        }
    }]
};
+3
source

try using a compound field

{
    xtype: 'compositefield',
    labelWidth: 120
    items: [
        {
            xtype     : 'textfield',
            fieldLabel: 'Title',
            width     : 20
        },
        {
            xtype     : 'textfield',
            fieldLabel: 'First',
            flex      : 1
        },
        {
            xtype     : 'textfield',
            fieldLabel: 'Last',
            flex      : 1
        }
    ]
}

or use the hbox or column layout.

0
source

More articles:


All Articles