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)
blank

相关推荐

  • Echarts网格颜色渐变 + 折线图折线发光高亮效果

    Echarts网格颜色渐变 + 折线图折线发光高亮效果series:里面定义折线发光高亮的效果网格颜色的渐变附上封住代码

    2022年10月23日
  • html 转换为cshtml,使用Html而不是csHtml

    html 转换为cshtml,使用Html而不是csHtml我想使用纯HTML页面而不是使用MVC.net的cshtml.但是当我通过右键单击索引添加视图时,我只能看到两个选项.publicclassHomeController:Controller{////GET:/Home/publicActionResultIndex(){returnView();}}Cshtml(剃刀)Aspx论坛但仍无济于事.我仍然没有看到添加ht…

  • Mybatis中Like 的使用方式以及一些注意点

    做一个积极的人编码、改bug、提升自己我有一个乐园,面向编程,春暖花开!模糊查询在项目中还是经常使用的,本文就简单整理Mybatis中使用Like进行模糊查询的几种写法以及一些常见的问题。使用Springboot简单配置一下Mybatis,然后进行说明。Springboot集成Mybatis这里就不做介绍了。初始数据方式一在Mybatis中的第一种写法: <!–有sq…

  • form表单提交的几种方式

    表单提交方式一:直接利用form表单提交html页面代码:<!DOCTYPEhtml><html><head><metacharset=”UTF-8″/><title>Inserttitlehere</title></head><body><formaction=”h…

  • 合成控制法原理

    合成控制法原理合成控制法反事实思维是**鲁宾反事实分析框架(Rubin’scounterfactualframework)**下进行思考,本质思想是为处理组(treatedgroup)找到一个合适的控制组(controlgroup)。合成控制法的思想是对于处理组,选择与处理组具有相似特征且未受到政策干预的控制组。通过对若干个控制区进行线性组合,构造一个近似处理组的合成控制区域(syntheticcontrolregion).对于未受政策影响的潜在控制组(donorpool),通过权重向量给控制组内每

  • 云服务器搭建_免费云服务器

    云服务器搭建_免费云服务器在前一篇的基础上,现在对服务器进行环境搭建,其实就是安装你需要的软件,配置环境变量,然后安装tomcat。环境搭建1、gitbash连接服务器(或者XShell等工具)2、搭建mysql环境

发表回复

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

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