Question

ExtJS如何使panel 的内容居中显示

我的一个panel 下有3个按钮，我想让这3个按钮居中，如图我的按钮在左边，代码如下
var center = new Ext.Panel({
title:'一次照明',
region:'center',
width:'100%',
height:95,
items:[
{
xtype: 'buttongroup',
align : 'center',
//columns: 3,
items: [{
text: '开',
width : 60,
height: 60,
rowspan: 1,
iconCls: 'search-icon',handler : function() {}
},{
text: '关',
width : 60,
height: 60,
rowspan: 1,
iconCls: 'reset-icon',handler : function() {}
},{
text: '延时',
width : 60,
height: 60,
rowspan: 1,
iconCls: 'reset-icon',handler : function() {}
}]
}
]
});

Answer 1

试下将panel渲染到某个居中显示div里面。
panel加入这个配置项：renderTo:'div1'
HTML相关代码：<div id="div1" style="margin:0 auto; width:[panel的宽度]"></div>

Answer 2

layout 使用 hbox：

...
region:'center',
layout: {
type: 'hbox',
align: 'middle ',
pack: 'center'
},
height:95,
...

Answer 3

layout: {
align: 'middle',
pack: 'center',
type: 'hbox'

}

如图示，fieldset居中了，textfield也居中了

extjs是一种软件。自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。

主要功能:

1、网格

大型数据页面的无限/缓冲滚动功能得到很大改进。同时，对于网格的"锁定"功能，新增了锁定和未锁定两种状态。

2、布局

在布局上，通过避免浏览器回流来加快访问速度(浏览器回流，指浏览器为了重新渲染部分或全部的文档而重新计算文档中元素的位置和几何结构的过程)。同时，新增了"边界"布局方式。收缩包围的宽度问题，以前是用特定组件来处理，现在改为用核心组件来处理。

3、核心组件

XTemplates和方法重写功能得到显著改善。Ext.override现在开始支持重写实例方法，并且，可以通过使用标准的callParent函数来访问被重写的方法。

Answer 4

定义一个item把按钮挤过去