ExtJs 3.0：在字段集中水平添加网格面板和按钮组
Posted
技术标签:
【中文标题】ExtJs 3.0：在字段集中水平添加网格面板和按钮组【英文标题】：ExtJs 3.0 : Add grid panel and button group horizontally inside the fieldset 【发布时间】：2014-01-14 18:47:48 【问题描述】：我使用 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'
]
, ]
,
]
]
我需要水平添加这些网格面板和按钮组。此代码的输出变为，它在字段集中添加垂直线。这里发生了什么 ？有人有想法吗？以及我应该如何在字段集中水平设置我的网格面板和按钮组。我正在使用 ExtJs 3.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',
...
如果不能解决您的问题，请尝试在fieldset 之外使用container 并设置容器layout 的属性hbox
Ext.layout.HBoxLayoutView
【讨论】：
以上是关于ExtJs 3.0：在字段集中水平添加网格面板和按钮组的主要内容，如果未能解决你的问题，请参考以下文章