简介:记录一下ExtJS的一些简单使用的方法.备忘...
开始...
在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不一致,但又有相同特征的时候,可以通过选择器来进行获取,比如要获取页面上所有的<p>标签,则可以使用:
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!');
});
});
分享到:
相关推荐
ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS...ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门
ExtJs-4.1.1a-gpl+中午手册+入门教程
EXTJS4.2学习入门教程 EXTJS4.2学习入门教程 EXTJS4.2学习入门教程
ExtJS快速入门--传智播客--蔡世友
extjs入门 extjs入门 extjs入门 extjs入门 extjs入门
ExtJS4.2入门案例 博客:http://blog.csdn.net/coco2d_x2014/article/details/52986835
javascript 写的 用于在客户端创建丰富多彩的 web 应用程序界面 ExtJS 可以用来开发 RIA Rich Internet Application 富互联网应用系统 的 开源 AJAX 应用框架 使用的开源协 议是 GPL ExtJS 是一个用 javascript 写...
Ext JS 5.0 Beta版 , 新鮮出爐, 歡迎下載;
ExtJS快速入门指南.pdf ExtJS快速入门指南.pdf
ExtJs入门实例ExtJs入门实例ExtJs入门实例
ExtJs的入门电子资料,ExtJs2.0 学习系列
ExtJs4.0入门教程,详细介绍ExtJs4.0。
extjs4-教程搭建 ExtJS 入门学习、可视化开发环境、布局详解 、文档阅读
extjs-4-入门 extjs-4-类系统介绍 extjs-4-数据详解 extjs-4-组件详解 extjs-4-Grids详解 extjs-4-布局和容器 ExtJS 4 表单 ExtJS 4 树 extjs-MVC架构讲解 个人学习资料收集
ExtJS入门教程(超级详细).pdf
新手特别适合 ,快速入门Extjs 之书
ExtJS入门教程-超级详细-共36页 完整版 PDF,电子书方便阅读和分享。