小细节--Extjs中,renderTo 和applyTo的区别
说到web前端框架,extjs绝对算是非常优秀的一个。
extjs中,两个方法很像,renderTo和applyTo,我在网上也搜了很多相关的内容,在这里举例为大家进行区分,欢迎大家交流指正。
主要区分内容:比较renderTo和applyTo在显示和渲染生成代码上的异同。
使用方法:使用嵌套的div层,分别用renderTo和applyTo方法进行渲染。
js代码:
<script type="text/javascript">
Ext.onReady(function () {
var button1 = new Ext.Button({
renderTo: 'top',
text: 'top'
});
var button2 = new Ext.Button({
applyTo: 'center',
text: 'center'
});
var button3 = new Ext.Button({
applyTo: 'bottom1',
text: 'bottom1'
});
})
</script>
HTML代码:
<body>
<div id="top" style=" background-color:red; width:100px;height:100px; ">top</div>
<div id="center" style=" background-color:Blue; width:100px;height:100px; ">center</div>
<div id="bottom" style=" background-color:Green; width:100px;height:100px; " >bottom
<div id="bottom1" style="background-color:Yellow; width:60px;height:20px;">bottom1</div>
<div id="bottom2" style="background-color:Orange;width:60px;height:20px;">bottom2</div>
</div>
</body>
网页效果:
简单总结:
由生成的效果我们可以看出:
1.renderTo生成的控件,是在指定的节点下生成,并且顺序排列在此节点内所有的元素之后。
2.applyTo生成的控件,是在指定的节点的父节点下生成,并且顺序排列在此节点的父节点所有元素之后。
代码验证:
生成的页面代码:
<body class=" ext-safari" id="ext-gen13">
<div id="top" style=" background-color:red; width:100px;height:100px; ">top
<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap x-btn" id="ext-comp-1001" style="width: auto;">
<tbody>
<tr>
<td class="x-btn-left"><i> </i></td><td class="x-btn-center">
<em unselectable="on"><button class="x-btn-text" type="button" id="ext-gen7">top</button></em>
</td><td class="x-btn-right"><i> </i></td>
</tr>
</tbody>
</table> </div> <div id="center" style=" background-color:Blue; width:100px;height:100px; ">center</div>
<div id="bottom" style=" background-color:Green; width:100px;height:100px; ">bottom
<div id="bottom1" style="background-color:Yellow; width:60px;height:20px;">bottom1</div>
<div id="bottom2" style="background-color:Orange;width:60px;height:20px;">bottom2</div>
<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap x-btn" id="ext-comp-1003" style="width: auto;">
<tbody>
<tr>
<td class="x-btn-left"><i> </i></td><td class="x-btn-center">
<em unselectable="on"><button class="x-btn-text" type="button" id="ext-gen22">bottom1</button></em>
</td><td class="x-btn-right"><i> </i></td>
</tr>
</tbody>
</table>
</div> <table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap x-btn" id="ext-comp-1002" style="width: auto;">
<tbody>
<tr>
<td class="x-btn-left"><i> </i></td><td class="x-btn-center">
<em unselectable="on"><button class="x-btn-text" type="button" id="ext-gen15">center</button></em>
</td><td class="x-btn-right"><i> </i></td>
</tr>
</tbody>
</table>
</body>
小细节--Extjs中,renderTo 和applyTo的区别的更多相关文章
- Android Studio ---------------- 软件使用小细节(更新中。。。。。。)
###鼠标放到相关类或方法等上,没有提示. *解决方法:File----Setting-----Editor-----General------Show quik documentation on m ...
- ExtJs4学习(四):Extjs 中id与itemId的区别
为了方便表示或是指定一个组件的名称,我们通常会使用id或者itemId进行标识命名.(推荐尽量使用itemId,这样可以减少页面唯一标识而产生的冲突) id: id是作为整个页面的Compo ...
- 【转载】Extjs 中id与itemId的区别
为了方便表示或是指定一个组件的名称,我们通常会使用id或者itemId进行标识命名.(推荐尽量使用itemId,这样可以减少页面唯一标识而产生的冲突) id: id是作为整个页面的Com ...
- 17.EXTJs 中icon 与iconCls的区别及用法!
转自:https://blog.csdn.net/u013890437/article/details/38315717?utm_source=blogxgwz7
- ASP.NET MVC 自定义路由中几个需要注意的小细节
本文主要记录在ASP.NET MVC自定义路由时,一个需要注意的参数设置小细节. 举例来说,就是在访问 http://localhost/Home/About/arg1/arg2/arg3 这样的自定 ...
- C++在使用Qt中SLOT宏须要注意的一个小细节
大家都知道C++虚函数的机制,对于基类定义为虚函数的地方,子类假设覆写,在基类指针或者引用来指向子类的时候会实现动态绑定. 但假设指针去调用非虚函数,这个时候会调用C++的静态绑定,去推断当前的指针是 ...
- C++在使用Qt中SLOT宏需要注意的一个小细节
大家都知道C++虚函数的机制,对于基类定义为虚函数的地方,子类如果覆写,在基类指针或者引用来指向子类的时候会实现动态绑定. 但如果指针去调用非虚函数,这个时候会调用C++的静态绑定,去判断当前的指针是 ...
- ArrayList中的一些小细节@JDK8
ArrayList中的一些小细节@JDK8 protected transient int modCount = 0; 该变量用于记录ArrayList的版本号,不可被序列化,每次对ArrayList ...
- Extjs中Store小总结
http://blog.csdn.net/without0815/article/details/7798170 1.什么是store? Store类似于一个本地仓库(即数据存储器),包括有 Arra ...
随机推荐
- BZOJ 1622: [Usaco2008 Open]Word Power 名字的能量
题目 1622: [Usaco2008 Open]Word Power 名字的能量 Time Limit: 5 Sec Memory Limit: 64 MB Submit: 349 Solved ...
- CentOS中使用shell的命令补全
习惯debian的用户都知道shell中的自动补全功能非常实用,其中在CentOS中也可以有同样的功能. 只需要安装 bash-completion 包即可. rpm -ivh http://www. ...
- codeblock快捷键
一款开源的C/C++ IDE(集成开发环境),基于wxWidgets GUI体系,跨平台支持. 从别处粘贴的,方便以后看,啦啦啦…… 编辑器 快捷键 功能 Ctrl+Z 恢复上一次操作 Ctrl+Sh ...
- C#学习之在辅助线程中修改UI控件----invoke方法
Invoke and BeginInvoke 转载地址:http://www.cnblogs.com/worldreason/archive/2008/06/09/1216127.html 在Invo ...
- OpenSSL命令---req
用途: 本指令用来创建和处理PKCS#10格式的证书.它还能够建立自签名证书,做Root CA. 用法: openssl req [-inform PEM|DER] [-outform PEM|DER ...
- win7 php 配置多个网站
1.在C:\WINDOWS\system32\drivers\etc目录下,打开Hosts 添加A站和B站的DNS映射,如127.0.0.1 local.zhengxin.com127.0.0.1 l ...
- Python 第十二篇:HTML基础
一:基础知识: HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可 ...
- Codeforces 486B - OR in Matrix
矩阵的 OR ,也是醉了. 题目意思很简单,就是问你有没有这么一个矩阵,可以变化,得到输入的矩阵. 要求是这个矩阵每行都可以上下任意移动,每列都可以左右任意移动. 解题方法: 1.也是导致我WA 的原 ...
- WebApp模版并运行
WebApp模版并运行 ASP.NET Core 运行原理剖析1:初始化WebApp模版并运行 核心框架 ASP.NET Core APP 创建与运行 总结 之前两篇文章简析.NET Core 以及与 ...
- AzureDev 社区活动获奖者公布
今天,我们高兴地宣布 AzureDev社区活动的获奖者,并向这 5 个非盈利技术教育组织发放 10 万美元奖金.在 2013 年的Build大会上宣布的 AzureDev 活动专注于通过代码改变世界, ...