ExtJs 3.0:在字段集内水平添加网格面板和按钮组

时间:2013-12-27 06:54:03

标签: extjs

我使用fieldset在我的J2EE Web应用程序中存储网格面板和一个按钮组。这是我的尝试。

{
                    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'
                                        } ]
                                    }, ]
                                },

                                ]

                    } ]

                }

我需要水平添加这些网格面板和按钮组。此代码的输出变为,它在fieldset中添加垂直线。这里发生了什么 ?有人有想法吗?如何在fieldset中水平设置网格面板和按钮组。我正在使用ExtJs 3.0。

请帮我澄清一下。

非常感谢

1 个答案:

答案 0 :(得分:1)

试试这个,让我知道结果。

// 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',
      ...
   }

如果无法解决您的问题,请尝试使用container之外的fieldset并设置容器的layout属性hbox

Ext.layout.HBoxLayoutView