Ext JS添加子组件的误区探讨


Posted in Javascript onJune 28, 2013

经常会有人问我,为什么我的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做开发,基本不会出现这么尴尬的情况了,因而可以将子组件做成视图,然后在控制器中将视图添加到容器中就可以了。

Javascript 相关文章推荐
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
javascript事件处理模型实例说明
May 31 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 #Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 #Javascript
js实时获取系统当前时间实例代码
Jun 28 #Javascript
js复制到剪切板的实例方法
Jun 28 #Javascript
Javascript无阻塞加载具体方式
Jun 28 #Javascript
Extjs4 类的定义和扩展实例
Jun 28 #Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 #Javascript
You might like
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
python使用循环实现批量创建文件夹示例
2014/03/25 Python
跟老齐学Python之数据类型总结
2014/09/24 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
房屋所有权证明
2014/10/20 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
关于长城的导游词
2015/01/30 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技