说到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. poj 1056 IMMEDIATE DECODABILITY(KMP)

    题目链接:http://poj.org/problem?id=1056 思路分析:检测某字符串是否为另一字符串的前缀,数据很弱,可以使用暴力解法.这里为了练习KMP算法使用了KMP算法. 代码如下: ...

  2. android 项目中使用到的网络请求框架以及怎样配置好接口URL

    我们在做项目中一定少不了网络请求,如今非常多公司的网络请求这块好多都是使用一些比較好的开源框架,我项目中使用的是volley,如今讲讲一些volley主要的使用,假设想要具体的了解就要去看它的源代码了 ...

  3. HDU 5045 Contest(状压DP）

    Problem Description In the ACM International Collegiate Programming Contest, each team consist of th ...

  4. JavaScript 高级程序设计（第3版）笔记——chapter3：基本概念（函数部分）

    3.7函数 3.7.1 理解参数 ECMAScript 函数不介意传递进来多个参数,也不在乎传递进来的参数是什么数据类型.因为在 ECMAScript 中的参数在内部是用一个数组来表示的.在函数体内可 ...

  5. java字符串输出

    package mytest; public class Mycode { public static void main(String[] args){ String[]seasons = {&qu ...

  6. Android中弹出对话框，AlertDialog关键代码

    写在这里便于以后查看. Android中弹出对话框的关键代码: btn01.setOnClickListener(new OnClickListener() { @Override public vo ...

  7. POJ 1458 最长公共子序列 LCS

    经典的最长公共子序列问题. 状态转移方程为 : if(x[i] == Y[j]) dp[i, j] = dp[i - 1, j - 1] +1 else dp[i, j] = max(dp[i - 1 ...

  8. MySQL中关于日期、时间的数据类型和函数

    一.日期相关的数据类型 1.datetime 占用8字节,既显示了日期,又显示了时间.其表示的日期范围为“1000-01-01 00:00:00”到“9999-12-31 23:59:59” 2.da ...

  9. [Android] FileInputStream跟踪

    1. 源起 需要跟踪FileInputStream的Read的Nativie实现,开始走了弯路,Java工程下的FileInputStream实现与Android工程的实现不同.另外,http://b ...

  10. leetcode第一刷_Binary Tree Inorder Traversal

    递归实现当然太简单,也用不着为了ac走这样的捷径吧..非递归实现还挺有意思的. 树的非递归遍历一定要借助栈,相当于把原来编译器做的事情显式的写出来.对于中序遍历,先要訪问最左下的节点,一定是进入循环后 ...