Ext.DomHelper类的使用示例(内容操作)
<mce:script type="text/javascript" ><!-- Ext.DomHelper.append 内容追加 var panel = new Ext.Panel({ title : 'Ext.DomHelper示例', width : '280px', renderTo : 'sub1', html : '<div id="div1" style="height:160px;padding:5px">原文本</div>' }); Ext.DomHelper.append(Ext.get("div1"),"<br>新追加了文本",true); Ext.DomHelper.applyStyles 样式追加 var panel = new Ext.Panel({ title : 'Ext.DomHelper示例', width : '280px', renderTo : 'sub1', html : '<div id="div1" style="height:160px;padding:5px">原文本</div>' }); //给id为div1的元素指定一个样式表 //其样式表的形式可以是直接用文本,如:font-size:18px //也可以用文本表示的对象,如:{font-size:18px;} Ext.DomHelper.applyStyles(Ext.get("div1"),"font-size:18px;color:green;font-weight:bold;"); var str = Ext.get("div1").dom.outerHTML; //由于Ext.Msg.alert会展示alert里的html //所以我们特意用文本框来展示应用了样式表后的div效果字符串 Ext.Msg.alert('DomHelper示例','<textarea rows="6" cols="35">'+str+'</textarea>'); Template.append 追加模板内容 var panel = new Ext.Panel({ title : 'Ext.DomHelper示例', width : '280px', renderTo : 'sub1', html : '<div id="div1" style="height:160px;padding:5px">原文本</div>' }); //首先通过DomHelper.createTemplate创建一套模板 var test = Ext.DomHelper.createTemplate('<div name="{id}">'+ '<span class="{cls}">{name:trim} {value:ellipsis(10)}<br>第二行文本</span>'+ '</div>'); //通过定义的模板替换模板中的变量,然后追加在div的id为div1的div里面进行展现 test.append(Ext.get("div1"),{id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'},true); Ext.DomHelper.insertAfter 后插新内容 var panel = new Ext.Panel({ title : 'Ext.DomHelper示例', width : '280px', renderTo : 'sub1', html : '<div id="div1" style="height:60px;padding:5px;background-color:#D4D4D4">我是原来的Div对象</div>' }); //给指定的div1在其后插入一个新的div Ext.DomHelper.insertAfter(Ext.get("div1"),"<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div对象</div>"); }); Ext.DomHelper.insertBefore 前插新内容 //给指定的div1在其后插入一个新的div Ext.DomHelper.insertBefore(Ext.get("div1"),"<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div对象</div>"); Ext.DomHelper.insertFirst 追加为第一个子元素 var panel = new Ext.Panel({ title : 'Ext.DomHelper示例', width : '280px', renderTo : 'sub1', html : '<div id="div1" style="height:160px;padding:5px;><div id="sub1">我是原来的Div的第一个子对象</div></div>' }); //给指定的div1在其后插入一个新的div Ext.DomHelper.insertFirst(Ext.get("div1"),"<div id='div2' style='height:60px;padding:5px;background-color:#D4D4D4'>我是新追加的Div对象</div>"); }); Ext.DomHelper.insertHtml 插入HTML内容 var panel = new Ext.Panel({ title : 'Ext.DomHelper示例', width : '280px', renderTo : 'sub1', html : '<div style="height:160px;padding:5px;"><div id="div1" >我是原来的Div的第一个子对象</div></div>' }); //给指定的div1在之前插入一个新的html Ext.DomHelper.insertHtml("beforeBegin",document.getElementById("div1"),"我是新插入的Html文本"); Ext.DomHelper.overwrite 替换内容 Ext.onReady(function(){ var panel = new Ext.Panel({ title : 'Ext.DomHelper示例', width : '220px', renderTo : 'sub1', html : '<div style="height:160px;padding:5px;"><div id="div1" >我是原来的Div的内容</div></div>' }); //给指定的div1在之前插入一个新的html Ext.DomHelper.overwrite(document.getElementById("div1"),"我是新替换的Html文本"); // --></mce:script>
转载于:https://www.cnblogs.com/johan/archive/2010/04/05/1947978.html
Ext.DomHelper类的使用示例(内容操作)相关推荐
- aspx mysql类_aspx中的mysql操作类sqldatasource使用示例分享
复制代码 代码如下: /p> "http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> asp.net to mysql asp. ...
- php分页操作,PHP实现适用于文件内容操作的分页类
本文实例为大家分享了PHP实现文件内容操作的分页类,强调一下只针对文件的操作,供大家参考,具体内容如下 class StrPage { private $current; //当前页 private ...
- 支持向量机python代码_用TensorFlow实现多类支持向量机的示例代码
这篇文章主要介绍了用TensorFlow实现多类支持向量机的示例代码,现在分享给大家,也给大家做个参考.一起过来看看吧 本文将详细展示一个多类支持向量机分类器训练iris数据集来分类三种花. SVM算 ...
- 基于 Thingsboard 平台自定义 RPC 控制类小部件示例
基于 Thingsboard 平台自定义 RPC 控制类小部件示例 1. 小部件介绍 2. 创建小部件 3. 部件编辑器 3.1 简介 3.2 资源 / HTML / CSS 3.3 JavaScri ...
- 利用OpenCV的VideoWriter类实现视频的写操作
图像处理开发需求.图像处理接私活挣零花钱,请加微信/QQ 2487872782 图像处理开发资料.图像处理技术交流请加QQ群,群号 271891601 就不多介绍VideoWriter类了,大家一看代 ...
- java定义一个类计算圆的半径,C++编程:定义一个圆类要求属性为半径,操作为计算圆的周长和面积...,java编程:定义一个圆类,属性为半径,方法为对输入的半径计...
导航:网站首页 > C++编程:定义一个圆类要求属性为半径,操作为计算圆的周长和面积...,java编程:定义一个圆类,属性为半径,方法为对输入的半径计 C++编程:定义一个圆类要求属性为半径, ...
- Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作
Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作 Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作 1>. 创建一个控制台程序 2 ...
- php rss xml,php 一个完全面向对象的RSS/XML类的简单示例
这篇文章主要为大家详细介绍了php 一个完全面向对象的RSS/XML类的简单示例,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编罗X来看看吧. 经测试代码如下: ...
- java文件操作和_JAVA文件操作类和文件夹的操作
JAVA文件操作类和文件夹的操作 package com.gamvan.tools; import java.io.BufferedReader; import java.io.File; impor ...
最新文章
- web网页获取,cookie 的管理,post和get方式的模拟。
- kafka和mqtt的区别是什么?
- 视觉SLAM总结——LSD SLAM中关键知识点总结
- 6.set ff=unix;设置Linux中文件中每行后又尖括号的情况
- 解决Linux下音乐乱码的问题:
- 微信小程序INC自增自减MUL自乘问题
- hbase组合rowkey_「从零单排HBase 11」HBase二级索引解决方案
- 用画小狗的方法来解释Java中的值传递
- uva 437——The Tower of Babylon
- AFNetworking网络请求与图片上传工具(POST)
- Python 内置模块之 random
- scala java混合_Scala特性混合
- 虚拟环境下对SQL Server安全性的考虑
- OpenGL 坐标变换(2)
- iOS开发之--NSPredicate
- x线计算机体层成像设备教案,医学影像设备学第4章-数字X线设备ppt课件
- 极客时间java高级(第二次课程)
- UE4 坐标系 坐标轴旋转轴
- 记录docker镜像中证书验证失败导致更新不成功
- win10安装红警运行出现FATALString Manager failed to initilaized properly
热门文章
- 北斗导航 | GPS原理与接收机设计——琉璃剑(GPS概述)
- 软件测试实验4白盒测试,软件测试实验报告白盒测试
- java struts 框架_java struts 框架编程
- C语言面向对象编程(三):虚函数与多态
- java catch 空指针异常_关于Java:捕获空指针异常
- Python 保存数据到 Exel
- 香帅的北大金融学课笔记11 -- 资产配置
- 【Python】我的Pandas学习经历及动手实践
- 【数据分析】年纪轻轻却突然猝死?数据分析告诉你“猝死”离我们到底有多近?...
- 【深度学习】迁移学习理论与实践