Ext JS添加子組件的誤區(qū)探討
更新時間：2013年06月28日 17:49:33 作者：
多人都習慣在渲染子組件的時候?qū)ird渲染到容器內(nèi)的一個div里，為什么那么多人喜歡使用這種方式來添加子組件呢，下面為大家詳細介紹下
經(jīng)常會有人問我，為什么我的Grid不能歲窗口的變得而自動調(diào)整。了解后，發(fā)現(xiàn)很多人都習慣在渲染子組件的時候?qū)ird渲染到容器內(nèi)的一個div里，而這正是問題的所在。
在Ext JS的布局系統(tǒng)中，能控制到的是容器的子組件，而對于渲染到容器中一個DIV的Grid，它并不知道在這容器里添加了一個Grid，當調(diào)整大小的時候，也就無法去調(diào)整Grid的大小了，而這也就是為什么Grid不會隨容器的改變而改變了。
為什么那么多人喜歡使用這種方式來添加子組件呢？我想原因主要有以下兩點：
1.不知道如何在容器內(nèi)添加子組件，
2.習慣了使用JQuery等其他框架的開發(fā)方法，一時無法改變
第一個原因，只要是動態(tài)添加Grid，搞到很多初學者束手無策，譬如，我的Grid要從遠程返回后才知道怎么創(chuàng)建，我怎么去拿這個腳本和添加到容器呢？筆者在學習Ext JS也犯過這樣的錯誤，可以理解。所以，本文的作用就是來解惑的。
辦法有兩個：一是，使用Ajax把整個Grid（或其他組件的配置對象）加載到本地，然后使用容器的add方法就可以將組件添加到容器；一是直接使用容器的load功能，直接加載子組件并渲染，返回的數(shù)據(jù)就是子組件的配置對象。
第二個原因是習慣問題，只能自己去修正了，盡快熟悉Ext JS的開發(fā)模式就可以很容易改掉這個習慣。
如果是使用Ext JS 4的MVC做開發(fā)，基本不會出現(xiàn)這么尷尬的情況了，因而可以將子組件做成視圖，然后在控制器中將視圖添加到容器中就可以了。
在Ext JS的布局系統(tǒng)中，能控制到的是容器的子組件，而對于渲染到容器中一個DIV的Grid，它并不知道在這容器里添加了一個Grid，當調(diào)整大小的時候，也就無法去調(diào)整Grid的大小了，而這也就是為什么Grid不會隨容器的改變而改變了。
為什么那么多人喜歡使用這種方式來添加子組件呢？我想原因主要有以下兩點：
1.不知道如何在容器內(nèi)添加子組件，
2.習慣了使用JQuery等其他框架的開發(fā)方法，一時無法改變
第一個原因，只要是動態(tài)添加Grid，搞到很多初學者束手無策，譬如，我的Grid要從遠程返回后才知道怎么創(chuàng)建，我怎么去拿這個腳本和添加到容器呢？筆者在學習Ext JS也犯過這樣的錯誤，可以理解。所以，本文的作用就是來解惑的。
辦法有兩個：一是，使用Ajax把整個Grid（或其他組件的配置對象）加載到本地，然后使用容器的add方法就可以將組件添加到容器；一是直接使用容器的load功能，直接加載子組件并渲染，返回的數(shù)據(jù)就是子組件的配置對象。
第二個原因是習慣問題，只能自己去修正了，盡快熟悉Ext JS的開發(fā)模式就可以很容易改掉這個習慣。
如果是使用Ext JS 4的MVC做開發(fā)，基本不會出現(xiàn)這么尷尬的情況了，因而可以將子組件做成視圖，然后在控制器中將視圖添加到容器中就可以了。
相關文章
Extjs學習筆記之五 一個小細節(jié)renderTo和applyTo的區(qū)別
Extjs的組件有兩個看起來類似的配置項，applyTo和renderTo，這兩個配置項都是用來指定將該extjs組件加載到什么位置。那他們到底有什么區(qū)別呢，網(wǎng)上搜了下，有兩篇博文也是關于這個的。2010-01-01
上個系列中，我們用到了Ext.fly來獲得一個Element對象，其實Ext.fly是Ext.Element.fly的簡寫形式。類似的方法還有一個Ext.get，是Ext.Element.get的簡寫。這兩個方法都可以用使用Dom元素或者Dom元素的id作為參數(shù)來獲得一個Element對象。2009-10-10
Ext4.2的Ext.grid.plugin.RowExpander無法觸發(fā)事件解決辦法
這篇文章主要介紹了Ext4.2的Ext.grid.plugin.RowExpander無法觸發(fā)事件解決辦法,本文中的事件指collapsebody和expandbody事件,需要的朋友可以參考下2014-08-08
把省份與城市以樹的形式輸出的Ext.XTemplate的實例代碼，需要的朋友可以參考下2012-03-03
ExtJS4 組件化編程，動態(tài)加載，面向?qū)ο螅珼irect
ExtJS4終于出了正式版，體驗一下面官方推薦的向?qū)ο缶幊套罴褜嵺` 過去的做法是new對象或者Ext.create一個對象，每個對象都要先實例化才能使用2011-05-05
Ext中下拉列表ComboBox組件store數(shù)據(jù)格式用法介紹
本文為大家詳細介紹下Ext中下拉列表ComboBox組件store數(shù)據(jù)格式的基本用法，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
extjs3 combobox取value和text案例詳解
使用combobox時，它有一個hiddenName的屬性，專門用于提交combobox中value的值,接下來介紹extjs3 combobox如何取value和text值,感興趣的朋友可以不要錯過了啊2013-02-02
Extjs中ComboBox加載并賦初值的實現(xiàn)方法
當需要為ComboBox加載數(shù)據(jù)后進行賦初始選中項的話，如果是寫在store.load()之后2012-03-03
在Ext中直接使用DWR2009-03-03
解決ExtJS在chrome或火狐中正常顯示在ie中不顯示的瀏覽器兼容問題
由于開發(fā)過程中大多用chrome來調(diào)試，很少在ie中調(diào)試（現(xiàn)在兩者都要兼顧），導致最后在ie中頁面不能正常加載，當時那個囧啊，看到ie報的錯，我都想哭，連出錯的堆棧信息都沒有（這一點，ie做的真不好），無從下手啊2013-01-01