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