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 相关文章推荐
DOM 基本方法
Jul 18 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
vue总线机制(bus)知识点详解
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深入浅出介绍
2006/12/06 PHP
PHP中文汉字验证码
2007/04/08 PHP
php google或baidu分页代码
2009/11/26 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
Python原始套接字编程实例解析
2020/01/29 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
使用django自带的user做外键的方法
2020/11/30 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
加拿大时装零售商:Influence U
2018/12/22 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
大学生自荐信
2013/12/11 职场文书
会计学毕业生求职信
2014/06/25 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
教师节横幅标语
2014/10/08 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
优化Mysql查询的示例
2022/04/26 MySQL