当前位置： 代码迷 >> Web前端 >> Ext.DomHelper种的使用示例（内容操作）
  详细解决方案

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

热度：551   发布时间：2012-10-27 10:42:25.0
Ext.DomHelper类的使用示例（内容操作）

?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
    1 楼 zzh200411 2010-08-24  
    outerHTML
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.