ExtJS入门实例
一、去官网下载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
ExtJS入门实例的更多相关文章
- 无废话ExtJs 入门教程二十一[继承：Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
- 无废话ExtJs 入门教程十六[页面布局：Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
- 无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]
无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...
- 无废话ExtJs 入门教程十三[上传图片：File]
无废话ExtJs 入门教程十三[上传图片:File] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程二十[数据交互：AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程十七[列表：GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
- React 入门实例教程(转载)
本人转载自: React 入门实例教程
- struts入门实例
入门实例 1 .下载struts-2.3.16.3-all .不摆了.看哈就会下载了. 2 . 解压 后 找到 apps 文件夹. 3. 打开后将 struts2-blank.war ...
随机推荐
- 基本TCP套接字编程
1.listen函数 将主动套接字转换成一个被动套接字 backlog指定相应套接字连接队列的大小. 监听套接字有2个队列: (1)未完成连接队列,接收客户SYN,发出SYN.ACK,等待完成三次握手 ...
- SQL select 语法(转)
SQL 里面最常用的命令是 SELECT 语句,用于检索数据.语法是: SELECT [ ALL | DISTINCT [ ON ( expression [, ...] ) ] ] * | expr ...
- ViewPager如下效果你研究过吗？
1:ViewPager实现欢迎页面动画效果 ViewPager实现欢迎页面动画滑动切换view效果,页面切换添加优美的动画, //主要代码实现 public void animateSecondScr ...
- Quartus II中的Waring（转）
1.Found clock-sensitive change during active clock edge at time <time> on register "<n ...
- 转王波洋，SQL语句中的 for XML Path('')
FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...
- unity 3d孤岛求生案例代码解析
这是第一人称控制器脚本,如果把摄像机放在胶囊体后面感觉就是第三人称了啊. #pragma strict var speed : float = 6.0; var jumpspeed: float = ...
- try--catch--finally中return返回值执行的顺序（区别）
1.try块中没有抛出异常,try.catch和finally块中都有return语句 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 public static int ...
- linux系统数据盘挂载教程
将数据盘挂载为/www命令:#mkdir /www & mount /dev/sdb1 /www ----------------------------------------------- ...
- 理解View与Model分离
说实话MV*架构中,Model与View分离已经听人谈了好久,但是以前始终没太弄懂什么意思,最近终于稍微懂了一些,虽然不一定很对,暂且先记录下来. 谈Model与View分离,首先要弄懂页面在前端渲染 ...
- cinder节点部署
其实看基础理论篇大家也可以看出来,cinder跟nova流程比较像,是这样的,nova为云主机提供了虚拟资源,cinder则是提供存储相关的资源,cinder的小伙伴叫swift,不过这个一般没人用了 ...