前言：接触Ext也有好几个月了，但是由于时间问题，都没有好好总结一下，现在抽空再博客里回顾下Ext使用心得，欢迎各位指点。
一 首先请看图片
二 登陆界面Ext代码
代码
1 /// <reference path="http://www.cnblogs.com/Resources/ExtJs/vswd-ext_2.0.2.js" />
2
3 //加载提示框
4 Ext.QuickTips.init();
5
6 //创建命名空间
7 Ext.namespace('XQH.ExtJs.Frame');
8
9 //主应用程序
10 XQH.ExtJs.Frame.app = function() {
11 }
12
13 Ext.extend(XQH.ExtJs.Frame.app, Ext.util.Observable, {
14
15 LoginLogo:new Ext.Panel({
16 id: 'loginLogo',
17 height: 35,
18 frame:true,
19 bodyStyle:'padding-top:4px',
20 html:'<h3><center>后台Ext框架</center></h3>'
21 }),
22
23 //登陆表单
24 LoginForm: new Ext.form.FormPanel({
25 id: 'loginForm',
26 defaultType: 'textfield',
27 labelAlign: 'right',
28 labelWidth: 60,
29 frame: true,
30 defaults:
31 {
32 allowBlank: false
33 },
34 items:
35 [
36 {
37 name:'LoginName',
38 fieldLabel: '登陆账号',
39 blankText: '账号不能为空',
40 emptyText:'必填',
41 anchor: '98%'
42 },
43 {
44 name:'LoginPsd',
45 inputType: 'password',
46 fieldLabel: '登陆密码',
47 blankText: '密码不能为空',
48 maxLength:10,
49 anchor: '98%'
50 }
51 ]
52 }),
53
54 //登陆窗口
55 LoginWin: new Ext.Window({
56 id: 'loginWin',
57 Title: '登陆',
58 250,
59 height: 150,
60 closable: false,
61 collapsible: false,
62 resizable:false,
63 defaults: {
64 border: false
65 },
66 buttonAlign: 'center',
67 buttons: [
68 { text: '关于' },
69 { text: '登陆' }
70 ],
71 layout: 'column',
72 items:
73 [
74 {
75 columnWidth:1,
76 items: Ext.getCmp("loginLogo")
77
78 },
79 {
80 columnWidth: 1,
81 items: Ext.getCmp("loginForm")
82 }
83 ]
84 }),
85
86 //初始化
87 init: function() {
88 this.LoginWin.show();
89 }
90 });
91
92 //程序入口
93 Ext.onReady(function() {
94 var loginFrame = new XQH.ExtJs.Frame.app();
95 loginFrame.init();
96 });
97
三 使用心得
1./// <reference path="http://www.cnblogs.com/Resources/ExtJs/vswd-ext_2.0.2.js" />这句为ext自动提示功能源文件
2.关于ext界面布局常用的有border,column,fit这几种，详细用法以后再作介绍
3.关于ext使用，其实大部分就是window,panel里面镶嵌自己需要的内容，如formpanel(表单)。
4.要理解{object config},其实大部分ext配置项都是基于这种形式的，{名称:值},如按钮{text:'l登陆'}
5.书写ext代码最好规范化,这样可以减少出错率。
大概形式：
{
id:'',(最好写上)
配置信息,
(如果是最外层的别忘了写layout，布局模式)
}
PS：欢迎大家补充，提意思。