Extjs入门

 

1、index.html页面

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script src="../Ext/ext-all-debug.js"></script>
  7.     <script src="../Ext/ext-all.js"></script>
  8.     <script src="../Ext/ext-locale-zh_CN.js"></script>
  9.     <link href="../Ext/ext-theme-crisp-all.css" rel="stylesheet" />
  10.     <script src="app/index.js"></script>
  11. </head>
  12. <body></body>
  13. </html>

2、index.js

  1. Ext.Loader.setConfig({
  2.     enabled: true
  3. });
  4. Ext.application({
  5.     name: 'Demo1',
  6.     appFolder: 'app',
  7.     models: [ ],
  8.     stores: [ ],
  9.     controllers: [ 'MyController'],
  10.     views: [
  11.         'MyViewport'
  12.     ],
  13.     launch: function () {
  14.         var app = new Demo1.view.MyViewport();
  15.     }
  16. });

3、MyViewport.js

  1. Ext.define('Demo1.view.MyViewport', {
  2.     extend: 'Ext.container.Viewport',
  3.     initComponent: function () {
  4.         var me = this;
  5.         Ext.applyIf(me, {
  6.             items: [
  7.                 {
  8.                     xtype: 'form',
  9.                     title: '用户修改密码',
  10.                     width: 300,
  11.                     bodyPadding: 10,
  12.                     defaultType: 'textfield',
  13.                     border: false,
  14.                     items: [
  15.                         {
  16.                             allowBlank: false,
  17.                             id: 'txtPwdOld',
  18.                             fieldLabel: '原密码',
  19.                             name: 'pwdOld',
  20.                             labelWidth: 100,
  21.                             emptyText: '原密码',
  22.                             inputType: 'password'
  23.                         },
  24.                         {
  25.                             allowBlank: false,
  26.                             id: 'txtPwdNew',
  27.                             fieldLabel: '新密码',
  28.                             name: 'pwdNew',
  29.                             labelWidth: 100,
  30.                             emptyText: '新密码',
  31.                             inputType: 'password'
  32.                         },
  33.                         {
  34.                             allowBlank: false,
  35.                             id: 'txtPwdNew2',
  36.                             fieldLabel: '再次输入新密码',
  37.                             name: 'pwdNew2',
  38.                             labelWidth: 100,
  39.                             emptyText: '再次输入新密码',
  40.                             inputType: 'password'
  41.                         }
  42.                     ],
  43.                     buttons: [
  44.                         {
  45.                             text: '保存',
  46.                             id:'btnSavePwd'
  47.                         }
  48.                     ]
  49.                 }
  50.             ]
  51.         });
  52.         this.callParent(arguments);
  53.     }
  54. });

4、MyController.js

  1. Ext.define('Demo1.controller.MyController', {
  2.     extend: 'Ext.app.Controller',
  3.     init: function (application) {
  4.         this.control({
  5.             '[id=btnSavePwd]': {
  6.                 click: this.onOK
  7.             }
  8.         });
  9.     },
  10.     //保存
  11.     onOK: function (obj) {
  12.         var form = obj.up('form').getForm();
  13.         if (form.isValid()) {
  14.             Ext.Msg.alert('信息提示', '已保存');
  15.         }
  16.     }
  17. });

原文出处：http://www.cnblogs.com/taylorchen/p/3813993.html

posted @   Fujijill  阅读(70)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手