ExtJS 入門
開始...
在ExtJS里最常用的,應(yīng)該就是Ext.onReady這個(gè)方法了,而且它也可能是你學(xué)習(xí)ExtJS所接觸的第一個(gè)方法,這個(gè)方法在當(dāng)前的DOM加載完畢后自動(dòng)調(diào)用,保證頁面內(nèi)的所有元素都能被Script所引用.可以嘗試在這個(gè)方法中添加一條語句,看看頁面打開后是什么反映:
Ext.onReady(function() {
alert('hello world!');
});
上面的代碼將在頁面加載完畢后彈出一對話框,打印出'hello world!'字樣.
獲取元素
還有一個(gè)常用的方法,就是獲取頁面上的元素了,ExtJS提供了一個(gè)get方法,可以根據(jù)ID取到頁面上的元素:
var myDiv = Ext.get('myDiv');
會(huì)取到頁面上ID為'myDiv'的元素.如果使用Element.dom的方法,則可以直接操作底層的DOM節(jié)點(diǎn),Ext.get返回的則是一個(gè)Element對象.
在不能使用這種方式來獲取多個(gè)DOM的節(jié)點(diǎn),或是要獲取一些ID不一致,但又有相同特征的時(shí)候,可以通過選擇器來進(jìn)行獲取,比如要獲取頁面上所有的
標(biāo)簽,則可以使用:
var ps = Ext.select('p');
這樣你就可以對所要獲取的元素進(jìn)行操作了,select()方法返回的是Ext.CompositeElement對象,可以通過其中的each()方法對其所包含的節(jié)點(diǎn)進(jìn)行遍歷:
ps.each(function(el) {
el.highlight();
});
當(dāng)然,如果你要是對獲取的所有元素進(jìn)行相同的操作,可以直接應(yīng)用于CompositeElement對象上,如:
ps.highlight();
或是:
Ext.select('p').highlight();
當(dāng)然,select參數(shù)還可以更復(fù)雜一些,其中可以包括W3C Css3Dom選取器,基本的XPath,HTML屬性等,詳細(xì)情況,可以查看DomQuery API的文檔,來了解細(xì)節(jié).
事件響應(yīng)
獲取到了元素,則可能會(huì)對一些元素的事件進(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)加到通過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!');
});
});
相關(guān)文章
extjs DataReader、JsonReader、XmlReader的構(gòu)造方法
DataReader、JsonReader、XmlReader的構(gòu)造方法,需要的朋友可以參考下。2009-11-11Extjs4 Treegrid 使用心得分享(經(jīng)驗(yàn)篇)
最近調(diào)試EXTJS 4的treegrid實(shí)例,看了很多水友的文章,以及官方的demo,沒一個(gè)可靠的,于是乎自己折騰中...感興趣的朋友可以了解下本文或許對你有所幫助2013-07-07ExtJS4 動(dòng)態(tài)生成的grid導(dǎo)出為excel示例
解決了一個(gè)表格不能重復(fù)下載的小BUG,一個(gè)使用grid初始化發(fā)生的BUG,需要的朋友可以參考下2014-05-05JavaScript的ExtJS框架中數(shù)面板TreePanel的使用實(shí)例解析
TreePanel為ExtJS提供了一個(gè)方便的樹結(jié)構(gòu)數(shù)據(jù)展示,尤其是在處理JSON格式數(shù)據(jù)時(shí)十分常用,接下來我們就來看兩則JavaScript的ExtJS框架中數(shù)面板TreePanel的使用實(shí)例解析2016-05-05extjs中g(shù)rid中嵌入動(dòng)態(tài)combobox的應(yīng)用
今天需要在grid中嵌入combobox,在網(wǎng)上找了好久也沒有找到一個(gè)正確可行的方法,可能是版本問題(我版本是extjs 3.0),沒有繼續(xù)研究其原因,自己查找資料,終于實(shí)現(xiàn)功能?,F(xiàn)在分享一下代碼。2011-01-01Extjs Ext.MessageBox.confirm 確認(rèn)對話框詳解
顯示一個(gè)確認(rèn)對話框,用來代替JavaScript標(biāo)準(zhǔn)的confirm()方法,具有兩個(gè)按鈕“是”和“否”如果為其提供一個(gè)回調(diào)函數(shù),則該函數(shù)將在單擊按鈕后被調(diào)用(包括右上角的推出按鈕),所單擊按鈕的id將被作為唯一的參數(shù)傳遞到回調(diào)函數(shù)中。2010-04-04ExtJS TabPanel beforeremove beforeclose使用說明
ExtJS 關(guān)閉TabPanel內(nèi)的Panel時(shí)使用TabPanel的'beforeremove’和其內(nèi)的Panel的'beforeclose’事件彈出關(guān)閉確認(rèn)提示對話框2010-03-03