Ext applyTo和renderTo的区别和用法「建议收藏」

Ext applyTo和renderTo的区别和用法「建议收藏」extjs中经常会用到renderTo或applyTo配置选项。这里,我就比较下两者的区别与用法。1、renderTo与render方法对应2、applyTo与applyToMarkup方法对应一、applyTo的使用:1、applyTo所指向的el元素必须要有父节点。2、applyTo所指向的el元素实际上是充当了对象要渲染的模板,对象是渲染在其父节点内。即对象实例化后所

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
extjs中经常会用到renderTo或applyTo配置选项。这里,我就比较下两者的区别与用法。

1、renderTo与render方法对应

2、applyTo与applyToMarkup方法对应

一、applyTo的使用:

1、applyTo所指向的el元素必须要有父节点。

2、applyTo所指向的el元素实际上是充当了对象要渲染的模板,对象是渲染在其父节点内。即对象实例化后所产生的html代码是插入在el元素的父节点内,而el元素本身将只作为模板,并不作为真正的在其位置上的元素,既然作为模板,只是利用其标签内的部分style和class,就不应该包含子节点(包括文本)。

3、这个作为模板的el元素很重要,必须是要存在的。

4、示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>applyTo与renderTo的区别</title>  
<link rel="stylesheet" type="text/css" href="../scripts/ext/resources/css/ext-all.css"/>  
<script type="text/javascript" src="../scripts/ext/adapter/ext/ext-base.js"></script>  
<script type="text/javascript" src="../scripts/ext/ext-all.js"></script>  
<script type="text/javascript">  
    Ext.onReady(function(){  
        var _panel = new Ext.Panel({  
            title:"个人信息",  
            width:300,  
            height:300,  
            frame:true,  
            applyTo:"appConId"  
        });  
    });  
</script>  
</head>  
<body>  
    <div id="appId" style="padding:30px;width:500px;height:400px;background-color: blue;">  
        <div id="appConId" style="width:400px;height:400px;background-color:green;"></div>  
    </div>  
</body>  
</html> 

5、效果图:


Ext applyTo和renderTo的区别和用法「建议收藏」

此时,appConId元素作为了模板,其width样式并没有被应用上,而其他的height和background-color样式被应用上了。就相当于这个div被替换或改造了。

二、renderTo的使用:

1、可以有el配置选项。

2、如果有el配置选项,则其指向的el元素充当了模板,并且必须存在。

3、renderTo所指向的el元素将作为对象渲染的入口,即render所产生的html代码将作为renderTo所指向的el元素的子节点。

4、如果有el配置选项,那么render会将el配置选项所指向的el元素作为模板然后产生html代码作为renderTo所指向的el元素的子节点。

5、示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>applyTo与renderTo的区别</title>  
<link rel="stylesheet" type="text/css" href="../scripts/ext/resources/css/ext-all.css"/>  
<script type="text/javascript" src="../scripts/ext/adapter/ext/ext-base.js"></script>  
<script type="text/javascript" src="../scripts/ext/ext-all.js"></script>  
<script type="text/javascript">  
    Ext.onReady(function(){  
        var _panel = new Ext.Panel({  
            title:"个人信息",  
            width:300,  
            height:300,  
            frame:true,  
            el:"elId",  
            renderTo:"appConId"  
        });  
    });  
</script>  
</head>  
<body>  
    <div id="appId" style="padding:30px;width:500px;height:400px;background-color: blue;">  
        <div id="appConId" style="width:400px;height:400px;background-color:green;"></div>  
    </div>  
    <div id="elId" style="width:500px;height:400px;background-color:red;">  
    </div>  
</body>  
</html> 

6、效果图:


Ext applyTo和renderTo的区别和用法「建议收藏」

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164716.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 深入理解Java虚拟机——JVM垃圾回收机制和垃圾收集器详解

    深入理解Java虚拟机——JVM垃圾回收机制和垃圾收集器详解说起垃圾回收(GarbageCollection,GC),很多人就会自然而然地把它和Java联系起来。在Java中,程序员不需要去关心内存动态分配和垃圾回收的问题,顾名思义,垃圾回收就是释放垃圾占用的空间,这一切都交给了JVM来处理。本文主要解答三个问题:1、哪些内存需要回收?(对象是否可以被回收的两种经典算法:引用计数法和可达性分析算法) 2、如何回收?

  • Java开发手册之代码格式

    Java开发手册之代码格式Java开发手册之代码格式

  • java JDBC连接数据库步骤及代码

    java JDBC连接数据库步骤及代码JDBC连接数据库,包含7个步骤(1)加载JDBC驱动程序在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机),这通过java.lang.Class类的静态方法forName(StringclassName)实现,成功加载后,会将Driver类的实例注册到DriverManager类中。代码如下:static{ try{ …

  • acwing-396. 矿场搭建(Tarjan点双连通分量)「建议收藏」

    acwing-396. 矿场搭建(Tarjan点双连通分量)「建议收藏」煤矿工地可以看成是由隧道连接挖煤点组成的无向图。为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条出路逃到救援出口处。于是矿主决定在某些挖煤点设立救援出口,使得无论哪一个挖煤点坍塌之后,其他挖煤点的工人都有一条道路通向救援出口。请写一个程序,用来计算至少需要设置几个救援出口,以及不同最少救援出口的设置方案总数。输入格式输入文件有若干组数据,每组数据的第一行是一个正整数 N,表示工地的隧道数。接下来的 N 行每行是用空格隔开的两个整数 S 和 T,表示挖煤点 S 与挖煤点 T 由隧道直接连

  • gp数据库查看建表语句_gp数据库常用命令

    gp数据库查看建表语句_gp数据库常用命令常用建表结构,根据需求自行更改即可使用!droptableifexistsrpt.rpt_bill_m;createtablerpt.rpt_bill_m(user_idSERIAL,—-自增序列acct_monthvarchar(6),bill_feenumeric(16,2),user_infotext)WITH(app…

  • 如何查看CentOS操作系统版本「建议收藏」

    如何查看CentOS操作系统版本「建议收藏」1、如何查看已安装的CentOS版本信息:第一种方式:cat/proc/version第二种方式:uname-a第三种方式:uname-rLinuxversion3.10.0-1127.el7.x86_64(mockbuild@kbuilder.bsys.centos.org)(gccversion4.8.520150623(RedHat4.8.5-39)(GCC))#1SMPTueMar3123:36:51UTC20202.、如何查看linu

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号