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 相关文章推荐
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
JS常用函数使用指南
Nov 23 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 Javascript
html实现随机点名器的示例代码
Apr 02 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
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
vue v-model的用法解析
2020/10/19 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
python基础练习之几个简单的游戏
2017/11/10 Python
实例介绍Python中整型
2019/02/11 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
《孔子拜师》教学反思
2014/02/24 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript