Ext中的页面排版布局总和

//小小的入门
首先是怎么得到Ext中的对象：只需要一个new关键字即可（例如：new Ext.form.FormPanel({name:'form表单',items:[new Ext.form.TextField({field:'用户名'})})）
注释一下：
{}：这个里面放的主要是new的这个对象里面的配置，即他们的属性
items：[]这个里面放入的主要是对象，即直接放入可以了，不需要用{}，如果配置的话也要用{}。
//在jsp中写Ext的时候必须要导入
<link rel="stylesheet" type="text/css" href="resources/css/[color=red]ext-all.css[/color]" />
<script type="text/javascript" src="adapter/ext/[color=red]ext-base.js[/color]" ></script>
<script type="text/javascript" src="[color=red]ext-all.js[/color]"></script>
这几个文件，他们的位置放在WebCntent下面
//步入正题：
A:布局
布局主要分为四种（用的比较多吧）：
border:将面板分成东南西北中这五块
fit:填充布局
acordion:列布局
form:表单布局
他们的使用只需要讲该组件的layout配置成你想要的布局模型
B:表格(举例一个）

var checkboxs = new Ext.grid.CheckboxSelectionModel({});
var cols = [new Ext.grid.RowNumberer(),
checkboxs,{header:'行名',fixed:true,sortable:true,dataIndex:'[color=red]id[/color]'}];//此id 为store里面创建行的id
var storeclasses = new Ext.data.Store({
url:'classes.action',
baseParams:{method:'getClasses',parentId:''},
reader:new Ext.data.JsonReader({root:'result'},Ext.data.Record.create([{name:'[color=red]id[/color]'}]))
,autoLoad:true});
var config ={
width:860,
height:200,
frame:true,
region:'center',
id:'grid',
columns:cols,
sm:checkboxs,
store:store,
tbar:['->',//这个符号是表示将这些组件往最右边靠
new Ext.form.ComboBox({store:storeclasses,displayField:'text',triggerAction:'all'})
//前面这个对象是将这个store里面的text这个属性的值动态的放入到这个下列表中来
,{text:'addclasses',handler:function(){}}]

};
var classgrid = new Ext.grid.GridPanel(config);

//得到选中的行所得到值
var g = Ext.getCmp("grid");
var record =g.getSelectionModel().getSelected();
var dname=record.get('id');
C、树：
var tree = new Ext.tree.TreePanel({
renderTo:'div',
width:120,
heigth:500,
id:'tree',
loader:new Ext.tree.TreeLoader({url:'classestree.action?method=classesTree'}),
root:new Ext.tree.AsyncTreeNode({id:'lxit',text:"lxit"})
});