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