在面板 extjs 4 中布置按钮答案

【问题标题】：laying out buttons in a panel extjs 4在面板 extjs 4 中布置按钮
【发布时间】：2012-09-05 10:54:59
【问题描述】：

我在尝试在 extjs 4.07 中为我的用户界面布局一些按钮时遇到了一些严重问题整个面板，或者其他根据我输入的配置没有意义的东西。我需要帮助。这是代码：

{xtype:'panel',
  columnWidth:.06,
  layout:'vbox',
  items:[
    {xtype:'button', text:'=>', action'moveOver'},
    {xtype:'button', text:'<=', action'moveBack'},
    {xtype:'button', text:'reset', action'reset'}
  ]
}

下面是我所拥有的，与我希望面板看起来的样子。

我有什么：

[----------]
[[=>]      ]
[[<=]      ]
[[RS]      ]
[          ]
[          ]
[          ]
[          ]
[          ]
[          ]
[          ]
[          ]
[          ]
[          ]
[          ]
[----------]

我想要的是这样的：

[----------]
[          ]
[   [=>]   ]
[          ]
[   [<=]   ]
[          ]
[   [RS]   ]
[          ]
[          ]
[          ]
[          ]
[          ]
[          ]
[          ]
[          ]
[          ]
[----------]

感谢任何帮助

【问题讨论】：

标签： layout button extjs extjs4 panel

【解决方案1】：

您是否查看过 Sencha 文档站点上的 VBox Layout 示例？看起来您只是希望您的项目与它们之间的一些边距居中对齐。这样的事情应该可以帮助您入门：

layout: {
    type:  "vbox",
    align: "center"
},
defaults: {
    margin: "10 0 0 0"  // Same as CSS (top right bottom left)
},
items: [
    /* Button declarations here */
]

【讨论】：

就是这样！非常感谢。