`

Ext.DomHelper类的使用示例（内容操作）

    博客分类：
  • Ajax
EXTHTMLJavaScriptIDEA 
阅读更多

 Ext.DomHelper类的使用示例（内容操作） 

 

  1. <mce:script type="text/javascript" ><!--  
  2. Ext.DomHelper.append 内容追加  
  3.         var panel = new Ext.Panel({  
  4.             title : 'Ext.DomHelper示例',  
  5.             width : '280px',  
  6.             renderTo : 'sub1',  
  7.             html : '<div id="div1" style="height:160px;padding:5px">原文本</div>'  
  8.         });  
  9.         Ext.DomHelper.append(Ext.get("div1"),"<br>新追加了文本",true);  
  10.           
  11. Ext.DomHelper.applyStyles 样式追加  
  12.                 var panel = new Ext.Panel({  
  13.             title : 'Ext.DomHelper示例',  
  14.             width : '280px',  
  15.             renderTo : 'sub1',  
  16.             html : '<div id="div1" style="height:160px;padding:5px">原文本</div>'  
  17.         });  
  18.         //给id为div1的元素指定一个样式表  
  19.         //其样式表的形式可以是直接用文本,如:font-size:18px  
  20.         //也可以用文本表示的对象,如:{font-size:18px;}  
  21.         Ext.DomHelper.applyStyles(Ext.get("div1"),"font-size:18px;color:green;font-weight:bold;");  
  22.           
  23.         var str = Ext.get("div1").dom.outerHTML;  
  24.         //由于Ext.Msg.alert会展示alert里的html  
  25.         //所以我们特意用文本框来展示应用了样式表后的div效果字符串  
  26.         Ext.Msg.alert('DomHelper示例','<textarea rows="6" cols="35">'+str+'</textarea>');  
  27.           
  28. Template.append 追加模板内容  
  29.         var panel = new Ext.Panel({  
  30.             title : 'Ext.DomHelper示例',  
  31.             width : '280px',  
  32.             renderTo : 'sub1',  
  33.             html : '<div id="div1" style="height:160px;padding:5px">原文本</div>'  
  34.         });  
  35.         //首先通过DomHelper.createTemplate创建一套模板  
  36.         var test = Ext.DomHelper.createTemplate('<div name="{id}">'+  
  37.             '<span class="{cls}">{name:trim} {value:ellipsis(10)}<br>第二行文本</span>'+  
  38.             '</div>');  
  39.         //通过定义的模板替换模板中的变量,然后追加在div的id为div1的div里面进行展现  
  40.         test.append(Ext.get("div1"),{id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'},true);  
  41.   
  42. Ext.DomHelper.insertAfter 后插新内容  
  43.         var panel = new Ext.Panel({  
  44.             title : 'Ext.DomHelper示例',  
  45.             width : '280px',  
  46.             renderTo : 'sub1',  
  47.             html : '<div id="div1" style="height:60px;padding:5px;background-color:#D4D4D4">我是原来的Div对象</div>'  
  48.         });  
  49.         //给指定的div1在其后插入一个新的div  
  50.         Ext.DomHelper.insertAfter(Ext.get("div1"),"<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div对象</div>");  
  51.     });  
  52.       
  53. Ext.DomHelper.insertBefore 前插新内容  
  54.         //给指定的div1在其后插入一个新的div  
  55.         Ext.DomHelper.insertBefore(Ext.get("div1"),"<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div对象</div>");  
  56.           
  57. Ext.DomHelper.insertFirst 追加为第一个子元素  
  58.         var panel = new Ext.Panel({  
  59.             title : 'Ext.DomHelper示例',  
  60.             width : '280px',  
  61.             renderTo : 'sub1',  
  62.             html : '<div id="div1" style="height:160px;padding:5px;><div id="sub1">我是原来的Div的第一个子对象</div></div>'  
  63.         });  
  64.         //给指定的div1在其后插入一个新的div  
  65.         Ext.DomHelper.insertFirst(Ext.get("div1"),"<div id='div2' style='height:60px;padding:5px;background-color:#D4D4D4'>我是新追加的Div对象</div>");  
  66.     });  
  67.       
  68. Ext.DomHelper.insertHtml 插入HTML内容  
  69.         var panel = new Ext.Panel({  
  70.             title : 'Ext.DomHelper示例',  
  71.             width : '280px',  
  72.             renderTo : 'sub1',  
  73.             html : '<div style="height:160px;padding:5px;"><div id="div1" >我是原来的Div的第一个子对象</div></div>'  
  74.         });  
  75.         //给指定的div1在之前插入一个新的html  
  76.         Ext.DomHelper.insertHtml("beforeBegin",document.getElementById("div1"),"我是新插入的Html文本");  
  77.           
  78. Ext.DomHelper.overwrite 替换内容  
  79.     Ext.onReady(function(){  
  80.         var panel = new Ext.Panel({  
  81.             title : 'Ext.DomHelper示例',  
  82.             width : '220px',  
  83.             renderTo : 'sub1',  
  84.             html : '<div style="height:160px;padding:5px;"><div id="div1" >我是原来的Div的内容</div></div>'  
  85.         });  
  86.         //给指定的div1在之前插入一个新的html  
  87. line-height: 18px; color: black; background
    分享到：
    | Ext.XTemplate
    评论
    1 楼 zzh200411 2010-08-24  
    outerHTML
    发表评论

    您还没有登录,请您登录后再发表评论

相关推荐

    Ext中文版手册最新版

    通过`Ext.Element`类，开发者能够以更加统一和便捷的方式访问和操作DOM元素，避免了跨浏览器兼容性问题。 `Ext.Element`提供的方法广泛，涵盖CSS和样式的设置（如`setStyle`, `addClass`）、DOM查询（如`query`, `...

    Ext_Core手册.pdf

    **Ext.Element** 类是 ExtCore 的一个重要组成部分，用于封装浏览器原生的 HTMLElement 对象，从而简化 DOM 操作并提高跨浏览器兼容性。主要功能包括： - **CSS 和样式管理**：例如 `setStyle` 方法用于设置样式，`...

    ExtJS 设计模式之一.docx

    通过这种方式，ExtJS确保了像`Ext.DomHelper`和`Ext.DomQuery`这样的工具类在整个应用中只被初始化一次，从而提高了性能并减少了内存消耗。 #### 四、单例模式的优点 - **唯一性**：确保在整个应用中只有一个实例...

    Ext Core手册

    接着使用 `Ext.DomHelper.append` 向页面添加了一个带有特定类名的 `&lt;p&gt;` 元素，并使用 `Ext.select` 和 `.update` 方法更新该元素的内容。 #### 四、手册作者与翻译 - **作者**：Tommy Maintz、Aaron Conran、...

    Ext2.1API中文文档

    例如，`Ext.DomHelper`用于创建和操作DOM元素，`Ext.fx.Anim`则支持复杂的动画效果。 在API文档中，每个类都有详细的说明，包括构造函数、公共方法、属性、事件以及配置选项。例如，`Ext.Component`是所有UI组件的...

    精通JS脚本之ExtJS框架.part1.rar

    12.2.2 Ext.Updater.update操作示例 12.3 利用Ajax优化Web应用框架 12.3.1 多级联动菜单 12.3.2 Ajax修改用户密码 12.3.3 自动保存的网络记事本 12.3.4 网页计算器 第13章 设计数据驱动模式 13.1 XML/JSON...

    轻松搞定ExtJS

    - **Ext.DomHelper类**：展示了如何使用Ext.DomHelper类来简化DOM操作。 - **Ext.XTemplate**：解释了XTemplate的工作原理及其在数据绑定中的作用。 #### 第七章：格式化 - **用户需要优秀体验的内容**：强调了良好...

    EXT3.0中文API文档

    7. **工具和辅助函数**：EXT3.0还提供了一些实用工具类和辅助函数，如Ext.util.CSS用于处理CSS样式，Ext.DomHelper用于动态创建DOM元素，以及Ext.Date用于日期时间操作等。 在阅读EXT3.0中文API文档时，开发者应该...

    extjs核心api详解

    这一系列章节详细介绍了如何使用Ext.data.Connection、Ext.data.Ajax进行异步数据请求，如何使用Ext.data.Record、Ext.data.DataProxy、Ext.data.DataReader和Ext.data.Store来管理和操作数据。 七、Ext.widgets...

    ext_core_manual_zhcn.pdf

    - **说明**：这段代码展示了如何使用 ExtCore 在页面加载完成后添加一个带有特定类名的 `p` 元素，并更新其文本内容。 #### 五、关于文档 - **作者**：Tommy Maintz、Aaron Conran、James Donaghue、Jamie Avins 和...

    精通JS脚本之ExtJS框架.part2.rar

    12.2.2 Ext.Updater.update操作示例 12.3 利用Ajax优化Web应用框架 12.3.1 多级联动菜单 12.3.2 Ajax修改用户密码 12.3.3 自动保存的网络记事本 12.3.4 网页计算器 第13章 设计数据驱动模式 13.1 XML/JSON...

    Extjs中文教程2.x

    - **示例**: 使用 `Ext.Fx` 和 `Ext.Element` 类中的动画函数实现动态效果。 #### 五、元素操作与模板 **5.1 元素操作** - **工具**: `Ext.DomHelper` 类提供了创建、操作 DOM 元素的方法。 - **示例**: `Ext....

    ext_core_中文手册

    ExtCore中的`Ext.Element`类用于封装浏览器中复杂的HTMLElement对象，提供了一系列方便的API进行DOM操作。其主要功能分类包括： - **CSS与样式**：如`setStyle`、`addClass`等方法，用于修改元素的样式属性。 - **...

    ext_core_manual_zhcn

    Ext.Element是ExtCore中一个极其重要的类，它封装了原生的HTMLElement对象，提供了一系列高级的DOM操作方法。主要包括： - **CSS与样式**：如`setStyle`用于设置元素的样式，`addClass`用于添加CSS类。 - **DOM查询...

    ExtJs 中文文档

    - **Ext.DomHelper 类**：用于帮助创建和操作 DOM 元素。 - **Ext.XTemplate**：这是一种模板引擎，用于动态生成 HTML 内容。 #### 七、格式化 - **Ext.util.Format 类**：提供了一系列用于格式化文本的方法，如...

    extjs学习资源

    Ext.DomQuery/DomHelper/Template - **DOM查询**: `Ext.DomQuery`提供了类似jQuery的语法来选择DOM元素。 - **模板引擎**: `Ext.Template`允许开发者使用模板字符串创建HTML，并可以方便地插入数据。 ```...

    Extjs中文教程

    - **Ext.DomHelper类** - 提供了一系列用于创建和操作DOM元素的方法。 - 例如：`Ext.DomHelper.append('elId', {tag: 'div', cls: 'className'})`。 - **Ext.XTemplate** - 是Extjs内置的一个轻量级模板引擎，...

Magicbox
Global site tag (gtag.js) - Google Analytics