关于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]
}）;