Ext JS添加子組件的誤區(qū)探討
更新時間:2013年06月28日 17:49:33 作者:
多人都習(xí)慣在渲染子組件的時候?qū)ird渲染到容器內(nèi)的一個div里,為什么那么多人喜歡使用這種方式來添加子組件呢,下面為大家詳細(xì)介紹下
經(jīng)常會有人問我,為什么我的Grid不能歲窗口的變得而自動調(diào)整。了解后,發(fā)現(xiàn)很多人都習(xí)慣在渲染子組件的時候?qū)ird渲染到容器內(nèi)的一個div里,而這正是問題的所在。
在Ext JS的布局系統(tǒng)中,能控制到的是容器的子組件,而對于渲染到容器中一個DIV的Grid,它并不知道在這容器里添加了一個Grid,當(dāng)調(diào)整大小的時候,也就無法去調(diào)整Grid的大小了,而這也就是為什么Grid不會隨容器的改變而改變了。
為什么那么多人喜歡使用這種方式來添加子組件呢?我想原因主要有以下兩點(diǎn):
1.不知道如何在容器內(nèi)添加子組件,
2.習(xí)慣了使用JQuery等其他框架的開發(fā)方法,一時無法改變
第一個原因,只要是動態(tài)添加Grid,搞到很多初學(xué)者束手無策,譬如,我的Grid要從遠(yuǎn)程返回后才知道怎么創(chuàng)建,我怎么去拿這個腳本和添加到容器呢?筆者在學(xué)習(xí)Ext JS也犯過這樣的錯誤,可以理解。所以,本文的作用就是來解惑的。
辦法有兩個:一是,使用Ajax把整個Grid(或其他組件的配置對象)加載到本地,然后使用容器的add方法就可以將組件添加到容器;一是直接使用容器的load功能,直接加載子組件并渲染,返回的數(shù)據(jù)就是子組件的配置對象。
第二個原因是習(xí)慣問題,只能自己去修正了,盡快熟悉Ext JS的開發(fā)模式就可以很容易改掉這個習(xí)慣。
如果是使用Ext JS 4的MVC做開發(fā),基本不會出現(xiàn)這么尷尬的情況了,因而可以將子組件做成視圖,然后在控制器中將視圖添加到容器中就可以了。
在Ext JS的布局系統(tǒng)中,能控制到的是容器的子組件,而對于渲染到容器中一個DIV的Grid,它并不知道在這容器里添加了一個Grid,當(dāng)調(diào)整大小的時候,也就無法去調(diào)整Grid的大小了,而這也就是為什么Grid不會隨容器的改變而改變了。
為什么那么多人喜歡使用這種方式來添加子組件呢?我想原因主要有以下兩點(diǎn):
1.不知道如何在容器內(nèi)添加子組件,
2.習(xí)慣了使用JQuery等其他框架的開發(fā)方法,一時無法改變
第一個原因,只要是動態(tài)添加Grid,搞到很多初學(xué)者束手無策,譬如,我的Grid要從遠(yuǎn)程返回后才知道怎么創(chuàng)建,我怎么去拿這個腳本和添加到容器呢?筆者在學(xué)習(xí)Ext JS也犯過這樣的錯誤,可以理解。所以,本文的作用就是來解惑的。
辦法有兩個:一是,使用Ajax把整個Grid(或其他組件的配置對象)加載到本地,然后使用容器的add方法就可以將組件添加到容器;一是直接使用容器的load功能,直接加載子組件并渲染,返回的數(shù)據(jù)就是子組件的配置對象。
第二個原因是習(xí)慣問題,只能自己去修正了,盡快熟悉Ext JS的開發(fā)模式就可以很容易改掉這個習(xí)慣。
如果是使用Ext JS 4的MVC做開發(fā),基本不會出現(xiàn)這么尷尬的情況了,因而可以將子組件做成視圖,然后在控制器中將視圖添加到容器中就可以了。
相關(guān)文章
ExtJS下 Ext.Direct加載和提交過程排錯小結(jié)
基礎(chǔ)夯實(shí)一點(diǎn),會有好處的,排錯的時候就體現(xiàn)出來了,下面就Ext.Direct做一些排錯筆記與大家一一分享,感興趣的朋友可以參考下哈2013-04-04Ext4.2的Ext.grid.plugin.RowExpander無法觸發(fā)事件解決辦法
這篇文章主要介紹了Ext4.2的Ext.grid.plugin.RowExpander無法觸發(fā)事件解決辦法,本文中的事件指collapsebody和expandbody事件,需要的朋友可以參考下2014-08-08ExtJS4 動態(tài)生成的grid導(dǎo)出為excel示例
解決了一個表格不能重復(fù)下載的小BUG,一個使用grid初始化發(fā)生的BUG,需要的朋友可以參考下2014-05-05ExtJS4中使用mixins實(shí)現(xiàn)多繼承示例
在ExtJS4中使用mixins來實(shí)現(xiàn)多繼承,下面有個不錯的示例,感興趣的朋友可以參考下2013-12-12Extjs學(xué)習(xí)筆記之五 一個小細(xì)節(jié)renderTo和applyTo的區(qū)別
Extjs的組件有兩個看起來類似的配置項,applyTo和renderTo,這兩個配置項都是用來指定將該extjs組件加載到什么位置。那他們到底有什么區(qū)別呢,網(wǎng)上搜了下,有兩篇博文也是關(guān)于這個的。2010-01-01Extjs學(xué)習(xí)筆記之二 初識Extjs之Form
form恐怕是Web開發(fā)中最常用的控件了,Extjs對普通的html form進(jìn)行了一些封裝,使其具有基本的外觀和一些簡便的和服務(wù)器進(jìn)行通信的方法。2010-01-01