说到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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</i></td>

            </tr>

        </tbody>

    </table>

</body>

小细节--Extjs中，renderTo 和applyTo的区别的更多相关文章

  1. Android Studio ---------------- 软件使用小细节(更新中。。。。。。)

    ###鼠标放到相关类或方法等上,没有提示. *解决方法:File----Setting-----Editor-----General------Show quik documentation on m ...

  2. ExtJs4学习（四）：Extjs 中id与itemId的区别

       为了方便表示或是指定一个组件的名称,我们通常会使用id或者itemId进行标识命名.(推荐尽量使用itemId,这样可以减少页面唯一标识而产生的冲突) id:   id是作为整个页面的Compo ...

  3. 【转载】Extjs 中id与itemId的区别

    为了方便表示或是指定一个组件的名称,我们通常会使用id或者itemId进行标识命名.(推荐尽量使用itemId,这样可以减少页面唯一标识而产生的冲突) id:        id是作为整个页面的Com ...

  4. 17.EXTJs 中icon 与iconCls的区别及用法！

    转自:https://blog.csdn.net/u013890437/article/details/38315717?utm_source=blogxgwz7

  5. ASP.NET MVC 自定义路由中几个需要注意的小细节

    本文主要记录在ASP.NET MVC自定义路由时,一个需要注意的参数设置小细节. 举例来说,就是在访问 http://localhost/Home/About/arg1/arg2/arg3 这样的自定 ...

  6. C++在使用Qt中SLOT宏须要注意的一个小细节

    大家都知道C++虚函数的机制,对于基类定义为虚函数的地方,子类假设覆写,在基类指针或者引用来指向子类的时候会实现动态绑定. 但假设指针去调用非虚函数,这个时候会调用C++的静态绑定,去推断当前的指针是 ...

  7. C++在使用Qt中SLOT宏需要注意的一个小细节

    大家都知道C++虚函数的机制,对于基类定义为虚函数的地方,子类如果覆写,在基类指针或者引用来指向子类的时候会实现动态绑定. 但如果指针去调用非虚函数,这个时候会调用C++的静态绑定,去判断当前的指针是 ...

  8. ArrayList中的一些小细节@JDK8

    ArrayList中的一些小细节@JDK8 protected transient int modCount = 0; 该变量用于记录ArrayList的版本号,不可被序列化,每次对ArrayList ...

  9. Extjs中Store小总结

    http://blog.csdn.net/without0815/article/details/7798170 1.什么是store? Store类似于一个本地仓库(即数据存储器),包括有 Arra ...

随机推荐

  1. Android Texting（2）Testing Fundamentals 测试基础篇

    Testing Fundamentals The Android testing framework, an integral part of the development environment, ...

  2. Swift入门Hello World! Swift.

    苹果公司推出新的开发语言Swift,随着关于趋势,外观和OC什么是不一样的地方. 前提条件:已安装Xcode6-Beta(这个过程是不表) 1.打开Xcode6-Beta,第二选择Create a n ...

  3. Ruby学习-第一章

    第一章 字符串,数字,类和对象 为了证明Ruby真的好用,hello world也能写的如此简洁: puts 'hello world' 1.输入/输出 print('Enter your name' ...

  4. 【行业干货】2013中国零售商排名 - 课程公告板 - 京东内部论坛 - Powered by Discuz!

    [行业干货]2013中国零售商排名 - 课程公告板 - 京东内部论坛 - Powered by Discuz! [行业干货]2013中国零售商排名 [复制链接]     bjpanzhoulan   ...

  5. vector的成员函数解析

    vector是线性容器,它的元素严格的依照线性序列排序,和动态数组非常相似,和数组一样,它的元素存储在一块连续的存储空间中,这也意味着我们不仅能够使用迭代器(iterator)訪问元素,还能够使用指针 ...

  6. winform判断输入是否是数字

    private bool IsNum(string str) { try { foreach (char c in str) { if (char.IsDigit(c)) return true; r ...

  7. iOS开发中关于本地数据中SQLite数据库常用的SQL语句

    创建表 CREATE TABLE IF NOT EXISTS "student" ("number" INTEGER PRIMARY KEY AUTOINCRE ...

  8. Matlab中S函数建立与应用

    function [sys,x0,str,ts] = sfuntmpl(t,x,u,flag) % SFUNTMPL 是M-文件 S函数模板 %  通过剪裁,用户可以生成自己的S函数,不过一定要重新命 ...

  9. netbeans 将项目打包生成单个可执行的 jar

    原文:netbeans 打包生成 jar 文件页里找到build.xml文件,打开在</project>前 加入以下代码保存之 <target name="package- ...

  10. android handler looper thread

    在线程中调用包含创建handler方法的时候,会报错,提示: “need call Looper.prepare()” -- 在创建之前,调用Looper.prepare()方法来创建一个looper ...