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('信息提示', '已保存');
}
}
});
到这里，程序已经可以运行了,源码：http://pan.baidu.com/s/1i3rBS8X