ExtJS 入门


Posted in Javascript onOctober 29, 2010

开始...
在ExtJS里最常用的,应该就是Ext.onReady这个方法了,而且它也可能是你学习ExtJS所接触的第一个方法,这个方法在当前的DOM加载完毕后自动调用,保证页面内的所有元素都能被Script所引用.可以尝试在这个方法中添加一条语句,看看页面打开后是什么反映:

Ext.onReady(function() { 
alert('hello world!'); 
});

上面的代码将在页面加载完毕后弹出一对话框,打印出'hello world!'字样.
获取元素
还有一个常用的方法,就是获取页面上的元素了,ExtJS提供了一个get方法,可以根据ID取到页面上的元素:
var myDiv = Ext.get('myDiv');
会取到页面上ID为'myDiv'的元素.如果使用Element.dom的方法,则可以直接操作底层的DOM节点,Ext.get返回的则是一个Element对象.
在不能使用这种方式来获取多个DOM的节点,或是要获取一些ID不一致,但又有相同特征的时候,可以通过选择器来进行获取,比如要获取页面上所有的
标签,则可以使用:
var ps = Ext.select('p');
这样你就可以对所要获取的元素进行操作了,select()方法返回的是Ext.CompositeElement对象,可以通过其中的each()方法对其所包含的节点进行遍历:
ps.each(function(el) { 
el.highlight(); 
});

当然,如果你要是对获取的所有元素进行相同的操作,可以直接应用于CompositeElement对象上,如:
ps.highlight();
或是:
Ext.select('p').highlight();
当然,select参数还可以更复杂一些,其中可以包括W3C Css3Dom选取器,基本的XPath,HTML属性等,详细情况,可以查看DomQuery API的文档,来了解细节.
事件响应
获取到了元素,则可能会对一些元素的事件进行一些处理,比如获取一个按钮,我们为它添加一个单击事件的响应:
Ext.onReady(function() { 
Ext.get('myButton').on('click', function() { 
alert('You clicked the button!'); 
}); 
});

当然,你可以把事件的响应加到通过select()方法获取到的元素上:
Ext.select('p').on('click', function() { 
alert('You clicked a paragraph!'); 
});

Widgets
ExtJS还提供了丰富的UI库来供大家使用.
消息窗口
将前面的alert()方法替换一种ExtJS提供的方案:
Ext.onReady(function() { 
Ext.get('myButton').on('click', function() { 
alert('You clicked the button!'); 
}); 
});
Javascript 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
javascript针对DOM的应用实例(一)
Apr 15 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
js原生日历的实例(推荐)
Oct 31 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
js 弹出框 替代浏览器的弹出框
Oct 29 #Javascript
javascript天然的迭代器
Oct 29 #Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 #Javascript
js类型检查实现代码
Oct 29 #Javascript
JavaScript继承方式实例
Oct 29 #Javascript
拖动布局之保存布局页面cookies篇
Oct 29 #Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 #Javascript
You might like
PHP图片上传类带图片显示
2006/11/25 PHP
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php下载远程文件类(支持断点续传)
2008/11/14 PHP
php 静态化实现代码
2009/03/20 PHP
PHP实现验证码校验功能
2017/11/16 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
在python win系统下 打开TXT文件的实例
2018/04/29 Python
Python 统计字数的思路详解
2018/05/08 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
如何利用find命令查找文件
2015/02/07 面试题
三年级数学教学反思
2014/01/31 职场文书
个人承诺书
2014/03/26 职场文书
党支部活动策划方案
2014/08/18 职场文书
医学检验专业自荐信
2014/09/18 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
党员检讨书范文
2014/12/27 职场文书
索赔员岗位职责
2015/02/15 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python