ExtJs 3.0 : Add grid panel and button group horizontally inside the fieldset

Question

I use fieldset to store grid panel and a button group in my J2EE web application. here is my attempt.

{
                    xtype : 'fieldset',
                    autoHeight: true,
                    autoWidth: true,
                    // labelWidth: 80,
                    // title: 'Phone Number',
                    // collapsible: true,
                    autoHeight : true,
                    items : [ {
                        layout : 'column',
                        border : false,

                        items : [
                                {
                                    columnWidth : .80,
                                    //layout : 'form',
                                    //defaultType : 'textfield',
                                    border : true,

                                    items : [ drop_pick_grid ]
                                }, {
                                    columnWidth : .20,
                                    //labelWidth : 10,
                                    //layout : 'form',
                                    border : true,
                                    //defaultType : 'textfield',
                                    items : [ {
                                        xtype : 'buttongroup',
                                        columns : 1,
                                        layout: {
                                            type: 'vbox',
                                            align: 'center'
                                        },
                                        items : [ {
                                            text : 'Add Parking',
                                            iconCls : 'add',
                                            width: 120,
                                            style: 'margin:5px'
                                        }, {
                                            text : 'Add Night Out',
                                            iconCls : 'add',
                                            width: 120,
                                            style: 'margin:5px'
                                        }, {
                                            text : 'Add Drop/Pick',
                                            iconCls : 'add',
                                            width: 120,
                                            style: 'margin:5px'
                                        }, {
                                            text : 'Hold Drop/Pick',
                                            iconCls : 'add',
                                            width: 120,
                                            style: 'margin:5px'
                                        }, {
                                            text : 'Cancel Drop/Pick',
                                            iconCls : 'add1',
                                            width: 120,
                                            style: 'margin:5px'
                                        }, {
                                            text : 'Add >>',
                                            iconCls : 'add',
                                            width: 120,
                                            style: 'margin:5px'
                                        }, {
                                            text : '<< Remove',
                                            iconCls : 'add',
                                            width: 120,
                                            style: 'margin:5px'
                                        } ]
                                    }, ]
                                },

                                ]

                    } ]

                }

I need to add these grid panel and button group horizontally. the output of this code becomes, it adds vertical line inside the fieldset. What's going on here ? Anybody has an idea? and how should i set my grid panel and button group horizontally inside the fieldset. I am using ExtJs 3.0.

Please help me to clarify this.

Thanks a lot

Oğuz Çelikdemir Oğuz Çelikdemir · Accepted Answer · 2013-12-27T19:10:55

Try this and let me know the result.

// Basically you should use 'layout' property with 'hbox' value
{
   xtype: 'fieldset',
   layout: 'hbox',
   ...
}

// or if you have more than fields you can use 'defaults' property

{
   xtype: 'fieldset',
   defaults: {
      layout: 'hbox',
      labelAlign: 'top',
      ...
   }

If it's not solve your problem, try using to container outside of the fieldset and set layout property of the container hbox

Ext.layout.HBoxLayoutView

ExtJs 3.0 : Add grid panel and button group horizontally inside the fieldset

1 Answers