天天看點

ExtJS入門教程01,Window如此簡單,你怎能不會?

這是一系列extjs教程,今天的是第一篇,主要介紹extjs中window的基本用法。希望大家能夠支援!

效果:

ExtJS入門教程01,Window如此簡單,你怎能不會?

小夥伴們注意了,如果不加autoshow:true的時候,window是不會顯示出來的,當然,我們可以使用win.show()方法來顯示一個視窗。

小夥伴們常常希望能夠在window中添加iframe,可以友善的将其它頁面顯示在視窗中,具體的做法是如下:

ExtJS入門教程01,Window如此簡單,你怎能不會?

(我這裡顯示了自己的網站,臭美一下~)

為window指定html屬性,這個屬性是要在window的body中顯示的html元素,可以是任意的html标簽(iframe也是html标簽),例如我們要顯示一段話:

效果如下:

ExtJS入門教程01,Window如此簡單,你怎能不會?

當然,小夥伴們的需求總是很多的,比如就有人說了,html屬性如果很長,這樣拼接字元串豈不是很醜?!

答案是肯定的,醜的不能再醜了~大家看一下iframe的那個代碼,已經是比較長了,編輯的時候經常要拖動下面的滾動條,這樣顯然是不友善的,并且還要經常寫屬性,引号、雙引号來回切換,簡直是煩透了,有沒有解決辦法呢?

額,辦法肯定是有的,小夥伴們,來試試contentel配置項吧。

contentel配置項允許我們将一個html元素指定為window要顯示的内容,也就是說,如果我們頁面上有一個如下的div:

我們可以在window的配置中來使用:

ExtJS入門教程01,Window如此簡單,你怎能不會?

contentel可以将頁面中現有的html元素添加到window中,需要注意的是一定要在頁面加載完成之後使用,否則頁面中的元素是不存在的。

這個時候,愛找麻煩的小夥伴又站了出來,小夥伴說頁面加載以後内容先在頁面中繪制了,會閃爍一下才顯示在window中,額,當然,這是一個問題,那麼該如何解決呢?

聰明的小夥伴這個時候自己想到一個辦法,就是先将div隐藏,加一個style屬性,把display設定為none;

愛動手的小夥伴驗證了聰明的小夥伴的想法,發現div在window中仍然是隐藏的,如果我們再添加一個額外的方法豈不是大費周章?

現在我們來看一看contentel的api吧,在api的最後一段,有這樣一句話:

add either the <code>x-hidden</code> or the <code>x-hide-display</code> css class to prevent a brief flicker of the content before it is rendered to the panel.

英語好的小夥伴們知道了吧,為我們的div添加一個x-hidden或者x-hide-display屬性就能簡單的解決内容閃爍的問題了。修改後的div如下:

看到了吧,window就是這麼簡單,我們可以很友善的來使用它。

通過ext.create來建立window對象,create方法的第二個參數為window的配置項,包括width、height等。

extjs window作為一個容器,可以在裡面添加其他的容器或元件,例如form、grid等,在添加extjs元件的時候可以使用items配置項來實作。

下面的代碼示範了如何向window中添加一個form,并在form中加入一些控件:

效果如圖:

ExtJS入門教程01,Window如此簡單,你怎能不會?

小夥伴們通常希望在window關閉的時候得到通知,例如重新整理現有的清單等,現在extjs中的事件是通過在配置項中添加listeners來完成,當然,如果是動态添加事件,就要使用on方法了。

我們先來一個通過listeners添加事件的例子:

當我們點選“确定”按鈕的時候将關閉視窗,試一下效果吧。

下面來一個通過on方法添加事件的例子:

好了,這就是extjs window的一些入門級用法,你還有别的不明白?告訴我,我來完善這篇文章。

如果認為此文對您有幫助,别忘了支援一下哦!

聲明:本部落格原創文字隻代表本人工作中在某一時間内總結的觀點或結論,與本人所在機關沒有直接利益關系。非商業,未授權,貼子請以現狀保留,轉載時必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接。

轉載:http://www.cnblogs.com/youring2/p/extjs-starter-01-window.html

繼續閱讀