关于viewport,Ext.panel和Ext.form.panel的关系


Ext.panel 可以存放很多元素,最常见的是Ext.form.formPanel对象,也可以用borderlayout布局
下面是我写的一个小例子,顶级容器不是viewport而是tabpanel
复制代码 代码如下:

//一个普通的表单
var frm = new Ext.form.FormPanel({
defaultType: textfield,
labelAlign: right,
title: form1-center,
labelWidth: 50,
frame: true,
width: 120,
height:200,
region: center,
closable: true, //这个属性就可以控制关闭该from
items: [{
fieldLabel: 文本框
}],
buttons: [{
text: 按钮
}]
});
//同志们请注意,region表示以borderlayout布局,在center位置
//下面我建立一个grid
// grid start
var cm = new Ext.grid.ColumnModel([
{ header: 编号, dataIndex: id },
{ header: 名称, dataIndex: name },
{ header: 描述, dataIndex: descn }
]);
var data = [
[1, name1, descn1],
[2, name2, descn2],
[3, name3, descn3],
[4, name4, descn4],
[5, name5, descn5]
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{ name: id },
{ name: name },
{ name: descn }
])
});
ds.load();
var grid = new Ext.grid.GridPanel({
ds: ds,
cm: cm,
title: center-north,
region: north,
width:200,
height:200
});
// grid end
//同志们请注意,region表示以borderlayout布局,在north位置
//能包含其他panel的是Ext.panel
var fullForm = new Ext.Panel({
title: 老子是很牛比的,
closable:true,
border: true,
layout: border,//请注意他的布局方式
items: [grid, frm]
});