ExtJs简单的登录界面制作

前言：接触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：欢迎大家补充，提意思。