首頁 > 開發者 > JavaScript
EXTJS入門執行個體
最近瞭解了下EXTJS，想記錄下來自己的成果，希望對剛入門EXT的同學有點協助，首先來做個簡單的執行個體。 一、去官網下載EXTJS包extjs5,這裡採用的是5.0版本，下面就正式開啟吧！ 二、解壓extjs包，找到 ext-all.js基礎包（\ext-5.0.0\build）； ext-all-debug.js基礎包，開發的時候使用，報錯會詳細些（\ext-5.0.0\build）； 選一個合適的主題，這裡我使用crisp，找到ext-theme-crisp-all.css和images檔案（\packages\ext-theme-crisp\build\resources） 三、建立index.html頁面並引用ext-all-debug.js、ext-theme-crisp-all.css，建立index.js應用啟動設定檔案、建立app檔案夾放controller/view/model/store index.html <!DOCTYPE HTML><html><head> <title>demo</title> <link href="../Ext/ext-theme-crisp-all.css" rel="stylesheet" type="text/css" /> <script src="../Ext/ext-all-debug.js" type="text/javascript"></script> <script src="index.js?v=20140721017" type="text/javascript"></script></head><body></body></html> index.js 複製代碼Ext.Loader.setConfig({ enabled: true}); Ext.application({ name: 'Demo1', appFolder: 'app', models: [ ], stores: [ ], controllers: [ 'MyController' ], views: [ 'MyViewport' ], launch: function () { var app = new Demo1.view.MyViewport(); }});複製代碼 四、建立視圖、控制器 在view檔案夾下添加視圖MyViewport.js,下面我在視圖裡面加了個簡單的表單 MyViewport.js Ext.define('Demo1.view.MyViewport', { extend: 'Ext.container.Viewport', initComponent: function () { var me = this; Ext.applyIf(me, { items: [ { xtype: 'form', title: '使用者修改密碼', width: 300, bodyPadding: 10, defaultType: 'textfield', border: false, items: [ { allowBlank: false, id: 'txtPwdOld', fieldLabel: '原密碼', name: 'pwdOld', labelWidth: 100, emptyText: '原密碼', inputType: 'password' }, { allowBlank: false, id: 'txtPwdNew', fieldLabel: '新密碼', name: 'pwdNew', labelWidth: 100, emptyText: '新密碼', inputType: 'password' }, { allowBlank: false, id: 'txtPwdNew2', fieldLabel: '再次輸入新密碼', name: 'pwdNew2', labelWidth: 100, emptyText: '再次輸入新密碼', inputType: 'password' } ], buttons: [ { text: '儲存', id:'btnSavePwd' } ] } ] }); this.callParent(arguments); } });在controller檔案夾下添加控制器MyController.js,程式碼都可以寫在控制器裡面，用得最多的就是監聽控制項事件，下面簡單舉例，對錶單中的儲存按鈕監聽點擊事件 MaController.js Ext.define('Demo1.controller.MyController', { extend: 'Ext.app.Controller', init: function (application) { this.control({ '[id=btnSavePwd]': { click: this.onOK } }); }, //儲存 onOK: function (obj) { var form = obj.up('form').getForm(); if (form.isValid()) { Ext.Msg.alert('資訊提示', '已儲存'); } }});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
