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 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
详细讲解JS节点知识
Jan 31 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
Bootstrap表单布局
Jul 19 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
如何在vue中使用jointjs过程解析
May 29 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
YB217、YB235、YB400浅听
2021/03/02 无线电
使用eAccelerator加密PHP程序
2008/10/03 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
php绘制一条弧线的方法
2015/01/24 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
JavaScript中常见陷阱小结
2010/04/27 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
python @property的用法及含义全面解析
2018/02/01 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
Python sys模块常用方法解析
2020/02/20 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
机关财务管理制度
2014/01/17 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
厨师长岗位职责
2014/03/02 职场文书
小学生环保标语
2014/06/13 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
入党团支部推荐意见
2015/06/02 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang