Ext JS添加子组件的误区探讨
更新时间：2013年06月28日 17:49:33 作者：
多人都习惯在渲染子组件的时候将Gird渲染到容器内的一个div里，为什么那么多人喜欢使用这种方式来添加子组件呢，下面为大家详细介绍下
经常会有人问我，为什么我的Grid不能岁窗口的变得而自动调整。了解后，发现很多人都习惯在渲染子组件的时候将Gird渲染到容器内的一个div里，而这正是问题的所在。
在Ext JS的布局系统中，能控制到的是容器的子组件，而对于渲染到容器中一个DIV的Grid，它并不知道在这容器里添加了一个Grid，当调整大小的时候，也就无法去调整Grid的大小了，而这也就是为什么Grid不会随容器的改变而改变了。
为什么那么多人喜欢使用这种方式来添加子组件呢？我想原因主要有以下两点：
1.不知道如何在容器内添加子组件，
2.习惯了使用JQuery等其他框架的开发方法，一时无法改变
第一个原因，只要是动态添加Grid，搞到很多初学者束手无策，譬如，我的Grid要从远程返回后才知道怎么创建，我怎么去拿这个脚本和添加到容器呢？笔者在学习Ext JS也犯过这样的错误，可以理解。所以，本文的作用就是来解惑的。
办法有两个：一是，使用Ajax把整个Grid（或其他组件的配置对象）加载到本地，然后使用容器的add方法就可以将组件添加到容器；一是直接使用容器的load功能，直接加载子组件并渲染，返回的数据就是子组件的配置对象。
第二个原因是习惯问题，只能自己去修正了，尽快熟悉Ext JS的开发模式就可以很容易改掉这个习惯。
如果是使用Ext JS 4的MVC做开发，基本不会出现这么尴尬的情况了，因而可以将子组件做成视图，然后在控制器中将视图添加到容器中就可以了。
在Ext JS的布局系统中，能控制到的是容器的子组件，而对于渲染到容器中一个DIV的Grid，它并不知道在这容器里添加了一个Grid，当调整大小的时候，也就无法去调整Grid的大小了，而这也就是为什么Grid不会随容器的改变而改变了。
为什么那么多人喜欢使用这种方式来添加子组件呢？我想原因主要有以下两点：
1.不知道如何在容器内添加子组件，
2.习惯了使用JQuery等其他框架的开发方法，一时无法改变
第一个原因，只要是动态添加Grid，搞到很多初学者束手无策，譬如，我的Grid要从远程返回后才知道怎么创建，我怎么去拿这个脚本和添加到容器呢？笔者在学习Ext JS也犯过这样的错误，可以理解。所以，本文的作用就是来解惑的。
办法有两个：一是，使用Ajax把整个Grid（或其他组件的配置对象）加载到本地，然后使用容器的add方法就可以将组件添加到容器；一是直接使用容器的load功能，直接加载子组件并渲染，返回的数据就是子组件的配置对象。
第二个原因是习惯问题，只能自己去修正了，尽快熟悉Ext JS的开发模式就可以很容易改掉这个习惯。
如果是使用Ext JS 4的MVC做开发，基本不会出现这么尴尬的情况了，因而可以将子组件做成视图，然后在控制器中将视图添加到容器中就可以了。
相关文章
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Extjs的组件有两个看起来类似的配置项，applyTo和renderTo，这两个配置项都是用来指定将该extjs组件加载到什么位置。那他们到底有什么区别呢，网上搜了下，有两篇博文也是关于这个的。2010-01-01
上个系列中，我们用到了Ext.fly来获得一个Element对象，其实Ext.fly是Ext.Element.fly的简写形式。类似的方法还有一个Ext.get，是Ext.Element.get的简写。这两个方法都可以用使用Dom元素或者Dom元素的id作为参数来获得一个Element对象。2009-10-10
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
这篇文章主要介绍了Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法,本文中的事件指collapsebody和expandbody事件,需要的朋友可以参考下2014-08-08
把省份与城市以树的形式输出的Ext.XTemplate的实例代码，需要的朋友可以参考下2012-03-03
ExtJS4终于出了正式版，体验一下面官方推荐的向对象编程最佳实践 过去的做法是new对象或者Ext.create一个对象，每个对象都要先实例化才能使用2011-05-05
Ext中下拉列表ComboBox组件store数据格式用法介绍
本文为大家详细介绍下Ext中下拉列表ComboBox组件store数据格式的基本用法，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
extjs3 combobox取value和text案例详解
使用combobox时，它有一个hiddenName的属性，专门用于提交combobox中value的值,接下来介绍extjs3 combobox如何取value和text值,感兴趣的朋友可以不要错过了啊2013-02-02
当需要为ComboBox加载数据后进行赋初始选中项的话，如果是写在store.load()之后2012-03-03
在Ext中直接使用DWR2009-03-03
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
由于开发过程中大多用chrome来调试，很少在ie中调试（现在两者都要兼顾），导致最后在ie中页面不能正常加载，当时那个囧啊，看到ie报的错，我都想哭，连出错的堆栈信息都没有（这一点，ie做的真不好），无从下手啊2013-01-01
最新评论