ExtJS 入門(mén)
開(kāi)始...
在ExtJS里最常用的,應(yīng)該就是Ext.onReady這個(gè)方法了,而且它也可能是你學(xué)習(xí)ExtJS所接觸的第一個(gè)方法,這個(gè)方法在當(dāng)前的DOM加載完畢后自動(dòng)調(diào)用,保證頁(yè)面內(nèi)的所有元素都能被Script所引用.可以嘗試在這個(gè)方法中添加一條語(yǔ)句,看看頁(yè)面打開(kāi)后是什么反映:
Ext.onReady(function() {
alert('hello world!');
});
上面的代碼將在頁(yè)面加載完畢后彈出一對(duì)話框,打印出'hello world!'字樣.
獲取元素
還有一個(gè)常用的方法,就是獲取頁(yè)面上的元素了,ExtJS提供了一個(gè)get方法,可以根據(jù)ID取到頁(yè)面上的元素:
var myDiv = Ext.get('myDiv');
會(huì)取到頁(yè)面上ID為'myDiv'的元素.如果使用Element.dom的方法,則可以直接操作底層的DOM節(jié)點(diǎn),Ext.get返回的則是一個(gè)Element對(duì)象.
在不能使用這種方式來(lái)獲取多個(gè)DOM的節(jié)點(diǎn),或是要獲取一些ID不一致,但又有相同特征的時(shí)候,可以通過(guò)選擇器來(lái)進(jìn)行獲取,比如要獲取頁(yè)面上所有的
標(biāo)簽,則可以使用:
var ps = Ext.select('p');
這樣你就可以對(duì)所要獲取的元素進(jìn)行操作了,select()方法返回的是Ext.CompositeElement對(duì)象,可以通過(guò)其中的each()方法對(duì)其所包含的節(jié)點(diǎn)進(jìn)行遍歷:
ps.each(function(el) {
el.highlight();
});
當(dāng)然,如果你要是對(duì)獲取的所有元素進(jìn)行相同的操作,可以直接應(yīng)用于CompositeElement對(duì)象上,如:
ps.highlight();
或是:
Ext.select('p').highlight();
當(dāng)然,select參數(shù)還可以更復(fù)雜一些,其中可以包括W3C Css3Dom選取器,基本的XPath,HTML屬性等,詳細(xì)情況,可以查看DomQuery API的文檔,來(lái)了解細(xì)節(jié).
事件響應(yīng)
獲取到了元素,則可能會(huì)對(duì)一些元素的事件進(jìn)行一些處理,比如獲取一個(gè)按鈕,我們?yōu)樗砑右粋€(gè)單擊事件的響應(yīng):
Ext.onReady(function() {
Ext.get('myButton').on('click', function() {
alert('You clicked the button!');
});
});
當(dāng)然,你可以把事件的響應(yīng)加到通過(guò)select()方法獲取到的元素上:
Ext.select('p').on('click', function() {
alert('You clicked a paragraph!');
});
Widgets
ExtJS還提供了豐富的UI庫(kù)來(lái)供大家使用.
消息窗口
將前面的alert()方法替換一種ExtJS提供的方案:
Ext.onReady(function() {
Ext.get('myButton').on('click', function() {
alert('You clicked the button!');
});
});
相關(guān)文章
基于ExtJs在頁(yè)面上window再調(diào)用Window的事件處理方法
下面小編就為大家?guī)?lái)一篇基于ExtJs在頁(yè)面上window再調(diào)用Window的事件處理方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
Extjs學(xué)習(xí)過(guò)程中新手容易碰到的低級(jí)錯(cuò)誤積累
新手在學(xué)習(xí)Extjs過(guò)程中的低級(jí)錯(cuò)誤積累2010-02-02
ExtJs縱坐標(biāo)值重復(fù)問(wèn)題的解決方法
做圖表的時(shí)候縱坐標(biāo)很多值都是一樣的,無(wú)意中發(fā)現(xiàn)下面的解決方法,其他版本沒(méi)測(cè)試過(guò)。有興趣的朋友可以自己測(cè)試2014-02-02
extjs 時(shí)間范圍選擇自動(dòng)判斷的實(shí)現(xiàn)代碼
這篇文章主要介紹了extjs 時(shí)間范圍選擇自動(dòng)判斷的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-06-06
Ext JS框架中日期函數(shù)的用法及日期選擇控件的實(shí)現(xiàn)
Ext JS中的Ext.Date可以看作是JavaScript中date的加強(qiáng)版,提供了許多進(jìn)階的日期操作函數(shù),下面我們就來(lái)看一下Ext JS框架中日期函數(shù)的用法及日期選擇控件的實(shí)現(xiàn)2016-05-05

