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 相关文章推荐
javascript编程起步(第五课)
Jan 10 Javascript
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
原生JS实现小小的音乐播放器
Oct 16 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
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编写PDF文档生成器
2006/10/09 PHP
转PHP手册及PHP编程标准
2006/12/17 PHP
PHP中echo和print的区别
2014/08/28 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
python dict 相同key 合并value的实例
2019/01/21 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
python的scipy实现插值的示例代码
2019/11/12 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
副总经理工作职责
2013/11/28 职场文书
创业计划书六个要素
2013/12/26 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
婚礼主持词
2014/03/13 职场文书
安全目标责任书
2014/07/22 职场文书
违反交通法规检讨书
2014/09/10 职场文书
学习计划书怎么写
2014/09/15 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
网站出售协议书范文
2014/10/10 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js