duansky'weblog

          導航

          <2008年3月>
          2425262728291
          2345678
          9101112131415
          16171819202122
          23242526272829
          303112345

          公告

          隨筆分類

          文章分類

          收藏夾

          隨筆檔案

          文章檔案

          統計

          留言簿(3)

          友情鏈接

          閱讀排行榜

          評論排行榜

          使用Ext2.0制作漂亮的登陸面板

          PS:最近迷上了uucall免費網絡電話,最多可以送60分鐘話費,用電腦打市話、長途都不要錢!實際上,因為我經常聯系的人也不多,用UUCall可以省不了多少錢,關鍵是覺得很好玩兒 :)拿電腦跟人家打電話,用起來音質蠻好的!大家都去下一個,電腦對電腦是不要錢的,還有的送。不用白不用。http://account.uucall.com/c/27967316.html


          參照網上一個Ext2.0富客戶端項目的登陸面板代碼而寫的,文字性的東西就不多說,代碼里有完整的注釋.如還不明白,歡迎討論http://www.easyjf.com/.

          源碼下載地址: http://www.easyjf.com/Ext_EasyJF.rar?? 或QQ群:52317037共享里也提供下載。

          效果如下圖所示:


          login.html代碼:

          < html? xmlns ="http://www.w3.org/1999/xhtml" ? >
          < head >
          < meta? http-equiv ="Content-Type" ?content ="text/html;?charset=utf-8" ? />
          < title > 登錄系統 </ title >
          < link? rel ="stylesheet" ?type ="text/css" ?href ="plugins/extjs/ext-2.0/resources/css/ext-all.css" ? />
          < link? rel ="stylesheet" ?type ="text/css" ?href ="ext-patch.css" ? />

          < script? type ="text/javascript" ?src ="plugins/extjs/ext-2.0/adapter/ext/ext-base.js" ></ script >
          < script? type ="text/javascript" ?src ="plugins/extjs/ext-2.0/ext-all.js" ></ script >
          < script? type ="text/javascript" ?src ="plugins/extjs/ext-2.0/examples/ext-lang-zh_CN.js" ></ script >
          < script? type ="text/javascript" >
          ????????Ext.BLANK_IMAGE_URL?
          = ?'plugins / extjs / ext - 2.0 / resources / images / default / s.gif';
          ????????Ext.QuickTips.init();
          // 初始化鼠標停留時的顯示框
          ????????Ext.form.Field.prototype.msgTarget? = ?'side';

          </ script >
          < style? type ="text/css" >
          ????.user
          { ?background : url(images/user.gif)?no-repeat?1px?2px ; ? }
          ????.key
          { ?background : url(images/key.gif)?no-repeat?1px?2px ; ?? }
          ????.key,.user
          {
          ????????background-color
          : #FFFFFF ;
          ????????padding-left
          : 20px ;
          ????????font-weight
          : bold ;
          ????????color
          : #000033 ;
          ????
          }

          </ style >
          </ head >

          < body >
          < script? src ="javascript/adminLogin.js" ?type ="text/javascript" ></ script >
          < div? id ="win" ?class ="x-hidden" ></ div >
          </ body >
          </ html >

          adminLogin.js代碼

          /**
          ?*?@author?冷雨?HTTP://WWW.EasyJF.Com
          ?*?
          ?*?使用Ext2.0構造一個客戶登陸面板
          ?
          */

          LoginPanel?
          =?function()?{
          ????
          var?win,?f;
          ????
          var?buildForm?=?function()?{
          ????????
          //?構建一個表單面板容器
          ????????f?=?new?Ext.form.FormPanel(?{
          ????????????
          //?給面板的body元素指定自定義的CSS樣式信息
          ????????????bodyStyle?:?'padding-top:6px',
          ????????????
          //?容器中元素的默認類型
          ????????????defaultType?:?'textfield',
          ????????????
          //?標簽的默認對齊方式
          ????????????labelAlign?:?'right',
          ????????????
          //?指定標簽的默認長度
          ????????????labelWidth?:?55,
          ????????????
          //?標簽與字段錄入框之間的空白
          ????????????labelPad?:?0,
          ????????????
          //?窗口是否顯示背景色
          ????????????frame?:?true,
          ????????????
          //?容器中組件默認統一配置選項
          ????????????defaults?:?{
          ????????????????
          //?驗證字段是否能為空
          ????????????????allowBlank?:?false,
          ????????????????
          //?字段寬度
          ????????????????width?:?158
          ????????????}
          ,
          ????????????
          //?指定容器中的元素
          ????????????items?:?[?{
          ????????????????
          //?給元素添加CSS樣式
          ????????????????????cls?:?'user',
          ????????????????????
          //?元素的名稱
          ????????????????????name?:?'userName',
          ????????????????????
          //?指定字段的標簽
          ????????????????????fieldLabel?:?'帳號',
          ????????????????????
          //?為空時提示信息
          ????????????????????blankText?:?'帳號不能為空'
          ????????????????}
          ,?{
          ????????????????????cls?:?'key',
          ????????????????????name?:?'password',
          ????????????????????fieldLabel?:?'密碼',
          ????????????????????blankText?:?'密碼不能為空',
          ????????????????????inputType?:?'password'
          ????????????????}
          ]
          ????????}
          );
          ????}
          ;
          ????
          var?buildWin?=?function()?{
          ????????
          //?構建一個窗口面板容器
          ????????win?=?new?Ext.Window(?{
          ????????????
          //?把該面板綁定于win這個DIV對象上
          ????????????el?:?'win',
          ????????????
          //?窗口面板標題
          ????????????title?:?'登陸系統',
          ????????????
          //?窗口面板寬度
          ????????????width?:?265,
          ????????????
          //?高度
          ????????????height?:?140,
          ????????????
          //?該面板布局類型
          ????????????layout?:?'column',
          ????????????
          //?面板是否可以關閉及打開
          ????????????collapsible?:?true,
          ????????????defaults?:?
          {
          ????????????????
          //?容器內元素是否顯示邊框
          ????????????????border?:?false
          ????????????}
          ,
          ????????????items?:?
          {
          ????????????????
          //?指定內部元素所占寬度1表示100%?.5表示50%
          ????????????????columnWidth?:?1,
          ????????????????
          //?把表單面板容器增加入其中,使之成為窗口面板容器的子容器
          ????????????????items?:?f
          ????????????}
          ,
          ????????????
          //?面板中按鈕的排列方式
          ????????????buttonAlign?:?'left',
          ????????????
          //?面板底部的一個或多個按鈕對象
          ????????????buttons?:?[?{
          ????????????????
          //?按鈕上需顯示的文本
          ????????????????????text?:?'登陸',
          ????????????????????
          //?單擊按鈕時響應的動作
          ????????????????????handler?:?login
          ????????????????}
          ,?{
          ????????????????????text?:?'重置',
          ????????????????????handler?:?reset
          ????????????????}
          ,?{
          ????????????????????text?:?'注冊',
          ????????????????????handler?:?link
          ????????????????}
          ]
          ????????}
          );
          ????}
          ;
          ????
          //?單擊按鈕時執行登陸操作
          ????var?login?=?function()?{
          ????????
          //?執行當前表單面板的submit
          ????????f.form.submit(?{
          ????????????
          //?動作發生期間顯示的文本信息
          ????????????????waitMsg?:?'正在登錄',
          ????????????????
          //?submit發生時指向的地址
          ????????????????url?:?'portal.ejf?cmd=adminLogin',
          ????????????????
          //?表單提交方式
          ????????????????method?:?'POST',
          ????????????????
          //?數據驗證通過時發生的動作
          ????????????????success?:?function(form,?action)?{
          ????????????????????window.location.href?
          =?'manage.ejf';
          ????????????????}
          ,
          ????????????????
          //?反之
          ????????????????failure?:?function(form,?action)?{
          ????????????????????reset();
          ????????????????????
          if?(action.failureType?==?Ext.form.Action.SERVER_INVALID)
          ????????????????????????Ext.MessageBox.alert('警告',?action.result.errors.msg);
          ????????????????}

          ????????????}
          );
          ????}
          ;
          ????
          //?清空當前表單面板內的數據
          ????var?reset?=?function()?{
          ????????f.form.reset();
          ????}
          ;
          ????
          //?注冊按鈕指向的地址
          ????var?link?=?function()?{
          ????????window.open('http:
          //easyjf.com/user.ejf?cmd=registerPU',?'_blank')
          ????}
          ;
          ????
          return?{
          ????????init?:?
          function()?{
          ????????????buildForm();
          ????????????buildWin();
          ????????????
          //?最后把窗口面板顯示出來
          ????????????win.show();
          ????????}

          ????}

          }
          ();
          //?當當前頁面DOM加載完畢后,在LoginPanel作用域內執行LoginPanel.init.
          Ext.onReady(LoginPanel.init,?LoginPanel);

          轉自:http://blog.csdn.net/maoweiwer/archive/2008/01/20/2054011.aspx

          posted on 2008-03-14 18:07 duansky 閱讀(2513) 評論(0)  編輯  收藏 所屬分類: Ext

          主站蜘蛛池模板: 保定市| 长岛县| 龙泉市| 大邑县| 石泉县| 应城市| 汉中市| 乌海市| 丰顺县| 柳州市| 钟山县| 博爱县| 广德县| 浏阳市| 龙泉市| 奈曼旗| 平谷区| 巍山| 宜宾市| 洞口县| 西丰县| 三河市| 富源县| 景德镇市| 邯郸县| 九龙县| 清苑县| 湘潭市| 札达县| 富裕县| 南投县| 江门市| 台中县| 密山市| 三门县| 微山县| 金门县| 胶州市| 东山县| 海盐县| 鸡西市|