使用extjs寫一個登錄界面

  • 時間:2018-07-09 22:24 作者:程序員小新人學習 來源:程序員小新人學習 閱讀:170
  • 掃一掃,手機訪問
摘要:先上效果圖:這是一個使用ext3.2.0、js、html、css寫的一個還算好看的登錄界面。源代碼已上傳,下載地址請點擊:點擊打開鏈接其主要難點在如何用extjs來畫一個界面,接下來我們就主要看一下其中的html和js吧: 登錄界面 這里面主要是導入頁面所需的js和css文件,當然還

先上效果圖:

使用extjs寫一個登錄界面

這是一個使用ext3.2.0、js、html、css寫的一個還算好看的登錄界面。

源代碼已上傳,下載地址請點擊:點擊打開鏈接

其主要難點在如何用extjs來畫一個界面,接下來我們就主要看一下其中的html和js吧:


  1. 登錄界面
  2. 广东11选5今天开奖

這里面主要是導入頁面所需的js和css文件,當然還有一個亮點就是body標簽上的 onkeydown事件屬性,主要使用于監聽鍵盤實現我們js中的enter鍵提交功可以。而后看一下extjs的語言風格吧:


  1. Ext.onReady(function () {
  2. // 創立“登錄”面板
  3. var loginPanel = new Ext.Panel({
  4. // 設置面板的位置、寬高、樣式
  5. // 注意:此處我使用的是相對布局relative(使用于比較兩者的區別)
  6. id: 'loginPan',
  7. x: 363,
  8. y: 0,
  9. width: 396,
  10. height: 480,
  11. baseCls: '',
  12. defaults: {
  13. border: false
  14. },
  15. // 增加面板里面的物品
  16. items: [
  17. {
  18. // 第一件:logo圖
  19. id: 'loginLogo',
  20. height: 160,
  21. frame: false,
  22. bodyStyle: 'padding-top:10px',
  23. html: ''
  24. },
  25. {
  26. // 第二件:登錄的表單
  27. id: 'loginForm',
  28. defaultType: 'textfield',
  29. frame: false,
  30. defaults: {
  31. allowBlank: false
  32. },
  33. // 增加表單里面的物品:兩個輸入框
  34. items: [
  35. {
  36. id: "username",
  37. cls: "text_field",
  38. inoutType: 'text',
  39. width: 330,
  40. height: 28,
  41. blankText: '賬號不可以為空',
  42. emptyText: '請輸入賬號',
  43. },
  44. {
  45. id: "password",
  46. cls: "text_field",
  47. inputType: 'password',
  48. width: 330,
  49. height: 28,
  50. emptyText: '請輸入密碼',
  51. blankText: '密碼不可以為空',
  52. }]
  53. },
  54. {
  55. // 第三件:不記得密碼
  56. id: 'loginForget',
  57. html: "不記得密碼?",
  58. },
  59. {
  60. // 第四件:登錄按鈕
  61. id: 'loginBtn',
  62. html: '',
  63. }
  64. ],
  65. });
  66. // 創立“注冊”面板
  67. var registerPanel = new Ext.Panel({
  68. // 設置面板的位置、寬高、樣式
  69. // 注意:此處我使用的是絕對布局absolute(使用于比較兩者的區別)
  70. id: 'registerPan',
  71. x: 0,
  72. y: 46,
  73. width: 800,
  74. height: 389,
  75. baseCls: '',
  76. layout: 'absolute',
  77. defaults: {
  78. border: false
  79. },
  80. // 增加面板里面的物品
  81. items: [
  82. {
  83. // 第一件:標題
  84. id: 'registerTitleLabel',
  85. xtype: 'label',
  86. x: 47,
  87. y: 50,
  88. text: '還沒有賬號?',
  89. }, {
  90. // 第二件:正文
  91. id: 'registerContentLabel',
  92. xtype: 'label',
  93. x: 47,
  94. y: 135,
  95. text: '這是在注冊面板下面的正文內容。里面的內容能隨意寫,比方當前我們再一個窗口下面建立了兩個面板。而兩個面板的布局是分別使用相對布局和絕對布局來實現的。相比較而言,我覺得使用絕對布局會簡單粗暴,更直接,更方便。總之,你們自己體會一下吧。',
  96. }, {
  97. // 第三件:注冊按鈕
  98. id: 'registerBtn',
  99. xtype: 'button',
  100. x: 47,
  101. y: 280,
  102. html: ''
  103. }],
  104. });
  105. // 創立窗口,從而讓內容達到居中效果
  106. var centerWindow = new Ext.Window({
  107. baseCls: '',
  108. width: 800,
  109. height: 480,
  110. layout: 'absolute',
  111. closable: false,
  112. draggable: false,
  113. resizable: false,
  114. shadow: false,
  115. border: false,
  116. items: [registerPanel, loginPanel],
  117. });
  118. // 顯示窗口
  119. centerWindow.show();
  120. // 增加瀏覽器縮放自動居中效果
  121. Ext.EventManager.onWindowResize(function () {
  122. centerWindow.center();
  123. });
  124. });

這里要說的是:1、注意給屬性加標記,可以使用id就使用id,cls只是一個封裝過的class,和原生的class還是有區別的,比方給一個cls元素的height、padding定義樣式并不起作使用。詳見:關于extjs中的cls ≠ class

2、在ext中建議使用絕對定位,因為它底層是一個個的table、div塊,假如使用相對定位的話偶爾是有偏差的,所以還是絕對定位方便直接啊。

3、window自帶居中效果,能利使用這一點讓元素在屏幕中居中。但是當瀏覽器縮放的時候,這個window并不會動,每次都需要重新刷新一下才會改變一下。所以,在以上代碼的最后我們使用給這個centerWindow增加了一個窗口自適應居中的效果。

  • 全部評論(0)
最新發布的資訊信息
【系統環境|服務器應用】在CentOS 7上如何安裝Gogs 0.11.53(2020-02-10 10:14)
【系統環境|】淘碼庫,據消息稱已被調查。淘碼庫源碼網,已經無法訪問!(2020-01-14 04:13)
【系統環境|服務器應用】Discuz隱藏后臺admin.php網址修改路徑(2019-12-16 16:48)
【系統環境|服務器應用】2020新網站如何讓百度快速收錄網站首頁最新方法,親測有用!免費(2019-12-16 16:46)
【系統環境|服務器應用】Discuz發布帖子時默認顯示第一個主題分類的修改方法(2019-12-09 00:13)
【系統環境|軟件環境】Android | App內存優化 之 內存泄漏 要點概述 以及 處理實戰(2019-12-04 14:27)
【系統環境|軟件環境】MySQL InnoDB 事務(2019-12-04 14:26)
【系統環境|軟件環境】vue-router(單頁面應用控制中心)常見用法(2019-12-04 14:26)
【系統環境|軟件環境】Linux中的Kill命令(2019-12-04 14:26)
【系統環境|軟件環境】Linux 入門時必學60個文件解決命令(2019-12-04 14:26)
手機二維碼手機訪問領取大禮包
返回頂部