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

　　推荐阅读

　　ExtJS 2.0实用简明教程之ExtJS版的Hello

复制代码代码如下:<html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ExtJS</title> <link rel="stylesheet" type="text/css>>>详细阅读

本文标题：关于viewport,Ext.panel和Ext.form.panel的关系

地址：http://www.17bianji.com/kaifa2/JS/28741.html

1/2 1