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实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
javascript 获取select下拉列表值的代码
Sep 07 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 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
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
php实现评论回复删除功能
2017/05/23 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
Javascript中的相等与不等运算
2010/04/25 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
Python过滤列表用法实例分析
2016/04/29 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
python如何使用unittest测试接口
2018/04/04 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
做一个有道德的人演讲稿
2014/05/14 职场文书
数学系毕业生求职信
2014/05/29 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
2015年教师国培感言
2015/08/01 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python