小细节--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 ...
随机推荐
- 小米2s的座充，看看这个是什么芯片？ - 电池&综合DIY(Flashlight Electronics-Batteries Include - 手电大家谈-手电筒爱好者之家
小米2s的座充,看看这个是什么芯片? - 电池&综合DIY(Flashlight Electronics-Batteries Include - 手电大家谈-手电筒爱好者之家 小米2s的座充, ...
- VC问题 IntelliSense:“没有可用的附加信息”，[请参见“C++项目 IntelliSense 疑难解答”，获得进一步的帮助]
当出现以上的问题时,若按照网上所说的解决方法: 1.安装VA(Visual_AssistX) 2.安装Microsoft SQL Server Compact 3.5 3.更改设置“工具-选项-文本编 ...
- centos下yum安装crontab+mysql自动备份
参考博文: centos下yum安装crontab yum install vixie-cron crontabs //安装 chkconfig crond on ...
- memcache 在php存取中的应用
当用户刷新网页或有大量用户访问网站时,就会产生大量数据库查询进程,这不但拖慢了网页打开速度,同时也给服务器带来了很大压力. 作为php菜鸟,今天刚刚接触到了 memcache 这个东东,于是自己跟着文 ...
- ZooKeeper - Perl bindings for Apache ZooKeeper Perl绑定用于 Apache ZooKeeper
ZooKeeper - Perl bindings for Apache ZooKeeper Perl绑定用于 Apache ZooKeeper 监控 master/slave 需要使用zk的临时节点 ...
- poi操作officePOI操作excel中的数据格式（日期类型）
7.3.3 POI中Excel文件Cell的类型 在读取每一个Cell的值的时候,通过getCellType方法获得当前Cell的类型,在Excel中Cell有6种类型,如表7-3所示. 表7-3 C ...
- malloc & free
动态分配内存 #include<stdio.h> #include<stdlib.h> int compare_integers(void const *a,void cons ...
- 04-Foundation-NSSet、NSDictionary、block
目录: 一.NSSet集合 二.NSDictionary字典 三.block代码块 回到顶部 一.NSSet集合 1 NSSet是一个无序的,管理对个对象的集合类,最大特点是集合中不允许出现重复对象, ...
- MUI AJAX Raw请求数据
提交接口数据,接口方提供的是post请求,body - raw ; 我尝试过JQuery ajax raw 的方式,但是始终无法成功 然后我回想到我用的是mui我就开始考虑用mui.ajax结果就成功 ...
- 如何查询一个库文件属于哪个rpm包
1.如果这个库文件已经存在 使用rpm命令: # rpm -qf /file/path (绝对路径) 例如: # rpm -qf /lib/libm.so.6 glibc-2.12-1.47.el ...