注册登录

【ExtJS】ExtJS 入门-入门

时间:2016-02-12 13:18 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【ExtJS 入门】，下面是详细的讲解！

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不一致,但又有相同特征的时候,可以通过选择器来进行获取,比如要获取页面上所有的
标签,则可以使用:
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视频教程1(上).avi http://dl.vmall.com/c0ubbdxakh ExtJs视频教程1(下).avi http://dl.vmall.com/c05tezhwon ExtJs视频教程10(上).avi http://dl.vmall.com/c009bcd6dk ExtJs视频教程10(下).avi http://dl.vmall.com/c0fp5fs6oi ExtJs视频... >>详细

　　相关问题：转：新手如何学习ExtJS 4

　　答：最近运营ExtJS交流群的时候，感触颇深，我感觉作为一个老手，我有必要介绍一下如何学习这种基础性问题。新手如何学习ExtJS4？如何入门ExtJS4？如何快速学习ExtJS4？1.仔细阅读新手教程新手教程是指ExtJS官方文档中Guides那一系列文章，因为是英... >>详细

　　相关问题：本人extjs入门，现在正在学习用Extjs4,我想问一下e...

　　答：JSON可以理解为JavaScript的对象序列化的字符串, 你看下JSON的内容, 会发现和代码中写的对象字面量基本一样, 所以使用eval方法即可将JSON转换为对象. Ext仅仅是简单的封装eval方法, 以适应不同标准的JSON 源代码: Ext.util.JSON.decode = functi... >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

【ExtJS】ExtJS 入门-入门

ExtJS 入门

关于ExtJS 入门的用户互动如下：

第一章 JavaScript （基础）

第二章 JavaScript（高级）