第十四讲：ExtJS常用工具类和函数(中)

太过爱你忘了你带给我的痛 2022-04-11 14:38 198阅读 0赞

Ext.DomHelper。

1.append( Mixed el, Object/String o, \[Boolean returnElement\] ) : HTMLElement/Ext.Element  
创建一个新的DOM元素并添加到el  
参数 o 是一个DOM对象或一个原始html块

<table style="width:426.1pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:426.1pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.onReady(</span><strong><span style="color:#7f0055;"><strong>function</strong></span></strong><span style="color:#000000;">(){ </span></p> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.DomHelper.append(</span><span style="color:#000000;">Ext</span><span style="color:#000000;">.</span><span style="color:#ff0000;">get</span><span style="color:#000000;">(</span><span style="color:#2a00ff;">"test"</span><span style="color:#000000;">),</span><span style="color:#2a00ff;">"hello"</span><span style="color:#000000;">);</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">});</span></p> </td> 
  </tr> 
 </tbody> 
</table>

<table style="width:426.1pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:426.1pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.onReady(</span><strong><span style="color:#7f0055;"><strong>function</strong></span></strong><span style="color:#000000;">(){ </span></p> <p style="margin-left:0pt;"><strong><span style="color:#7f0055;"><strong>new</strong></span></strong>&nbsp;<span style="color:#000000;">Ext</span><span style="color:#000000;">.Panel({ </span></p> <p style="margin-left:0pt;"><span style="color:#000000;">id:</span><span style="color:#2a00ff;">"myPanel"</span><span style="color:#000000;">,</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">title:</span><span style="color:#2a00ff;">"myPanel"</span><span style="color:#000000;">,</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">width:200,</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">height:200,</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">html:</span><span style="color:#2a00ff;">"&lt;div id='hello'&gt;hello&lt;/div&gt;"</span><span style="color:#000000;">,</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">renderTo:</span><span style="color:#2a00ff;">"test"</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">});</span></p> <p style="margin-left:0pt;">&nbsp;</p> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.DomHelper.append(</span><span style="color:#000000;">Ext</span><span style="color:#000000;">.</span><span style="color:#ff0000;">get</span><span style="color:#000000;">(</span><span style="color:#2a00ff;">"hello"</span><span style="color:#000000;">),</span><span style="color:#2a00ff;">",world!"</span><span style="color:#000000;">);</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">});</span></p> </td> 
  </tr> 
 </tbody> 
</table>

2. applyStyles( String/HTMLElement el, String/Object/Function styles ) : void

应用样式styles到对象el，样式的对象表示方法见Ext.Element

<table style="width:426.1pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:426.1pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.onReady(</span><strong><span style="color:#7f0055;"><strong>function</strong></span></strong><span style="color:#000000;">(){ </span></p> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.DomHelper.applyStyles(</span><span style="color:#000000;">Ext</span><span style="color:#000000;">.</span><span style="color:#ff0000;">get</span><span style="color:#000000;">(</span><span style="color:#2a00ff;">"test"</span><span style="color:#000000;">),</span><span style="color:#2a00ff;">"font-size:20px;color:red"</span><span style="color:#000000;">);</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">});</span></p> </td> 
  </tr> 
 </tbody> 
</table>

<table style="width:426.1pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:426.1pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.onReady(</span><strong><span style="color:#7f0055;"><strong>function</strong></span></strong><span style="color:#000000;">(){ </span></p> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.DomHelper.applyStyles(</span><span style="color:#000000;">Ext</span><span style="color:#000000;">.</span><span style="color:#ff0000;">get</span><span style="color:#000000;">(</span><span style="color:#2a00ff;">"test"</span><span style="color:#000000;">),{ </span><span style="color:#2a00ff;">"font-size"</span><span style="color:#000000;">:</span><span style="color:#2a00ff;">"</span><span style="color:#2a00ff;">2</span><span style="color:#2a00ff;">0px"</span><span style="color:#000000;">,</span><span style="color:#2a00ff;">"color"</span><span style="color:#000000;">:</span><span style="color:#2a00ff;">"red"</span><span style="color:#000000;">});</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">});</span></p> </td> 
  </tr> 
 </tbody> 
</table>

3. createTemplate( Object o ) : Ext.Template，由o创建一个新的Ext.Template对象。

<table style="width:426.1pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:426.1pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.onReady(</span><strong><span style="color:#7f0055;"><strong>function</strong></span></strong><span style="color:#000000;">(){ </span></p> <p style="margin-left:0pt;"><strong><span style="color:#7f0055;"><strong>var</strong></span></strong><span style="color:#000000;">&nbsp;tmp = </span><span style="color:#000000;">Ext</span><span style="color:#000000;">.DomHelper.createTemplate(</span><span style="color:#2a00ff;">'&lt;div id="{id}"&gt;world&lt;/div&gt;'</span><span style="color:#000000;">);</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">tmp.append(</span><span style="color:#000000;">Ext</span><span style="color:#000000;">.</span><span style="color:#ff0000;">get</span><span style="color:#000000;">(</span><span style="color:#2a00ff;">"test"</span><span style="color:#000000;">),{id:</span><span style="color:#2a00ff;">"myid"</span><span style="color:#000000;">});</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">});</span></p> </td> 
  </tr> 
 </tbody> 
</table>

<table style="width:426.1pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:426.1pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.onReady(</span><strong><span style="color:#7f0055;"><strong>function</strong></span></strong><span style="color:#000000;">(){ </span></p> <p style="margin-left:0pt;"><strong><span style="color:#7f0055;"><strong>var</strong></span></strong><span style="color:#000000;">&nbsp;tmp = </span><span style="color:#000000;">Ext</span><span style="color:#000000;">.DomHelper.createTemplate(</span><span style="color:#2a00ff;">'&lt;div id="{id}"&gt;{value}&lt;/div&gt;'</span><span style="color:#000000;">);</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">tmp.append(</span><span style="color:#000000;">Ext</span><span style="color:#000000;">.</span><span style="color:#ff0000;">get</span><span style="color:#000000;">(</span><span style="color:#2a00ff;">"test"</span><span style="color:#000000;">),{id:</span><span style="color:#2a00ff;">"myid"</span><span style="color:#000000;">,value:</span><span style="color:#2a00ff;">"world"</span><span style="color:#000000;">});</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">});</span></p> </td> 
  </tr> 
 </tbody> 
</table>

4.insertAfter( Mixed el, Object o, \[Boolean returnElement\] ) : HTMLElement/Ext.Element

创建一个新的DOM对象o并将他们插入到在el之后

<table style="width:426.1pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:426.1pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.onReady(</span><strong><span style="color:#7f0055;"><strong>function</strong></span></strong><span style="color:#000000;">(){ </span></p> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.DomHelper.insertAfter(</span><span style="color:#000000;">Ext</span><span style="color:#000000;">.</span><span style="color:#ff0000;">get</span><span style="color:#000000;">(</span><span style="color:#2a00ff;">"test4"</span><span style="color:#000000;">),</span><span style="color:#2a00ff;">'&lt;div id="test6"&gt;hello6&lt;/div&gt;'</span><span style="color:#000000;">)</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">});</span></p> </td> 
  </tr> 
 </tbody> 
</table>

5.insertBefore( Mixed el, Object/String o, \[Boolean returnElement\] ) : HTMLElement/Ext.Element  
创建一个新的DOM对象o并将他们插入在el之前。

<table style="width:426.1pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:426.1pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.onReady(</span><strong><span style="color:#7f0055;"><strong>function</strong></span></strong><span style="color:#000000;">(){ </span></p> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.DomHelper.insertBefore(</span><span style="color:#000000;">Ext</span><span style="color:#000000;">.</span><span style="color:#ff0000;">get</span><span style="color:#000000;">(</span><span style="color:#2a00ff;">"test4"</span><span style="color:#000000;">),</span><span style="color:#2a00ff;">'&lt;div id="test6"&gt;hello6&lt;/div&gt;'</span><span style="color:#000000;">)</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">});</span></p> </td> 
  </tr> 
 </tbody> 
</table>

6. insertFirst( Mixed el, Object/String o, \[Boolean returnElement\] ) :  
创建一个新的DOM元素并做为第一个子节点添加到el (看了这个insertFirst，建议将append取一个别名insertLast:))。

<table style="width:426.1pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:426.1pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.onReady(</span><strong><span style="color:#7f0055;"><strong>function</strong></span></strong><span style="color:#000000;">(){ </span></p> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.DomHelper.insertFirst(</span><span style="color:#000000;">Ext</span><span style="color:#000000;">.</span><span style="color:#ff0000;">get</span><span style="color:#000000;">(</span><span style="color:#2a00ff;">"test1"</span><span style="color:#000000;">),</span><span style="color:#2a00ff;">",World!"</span><span style="color:#000000;">);</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">});</span></p> <p style="margin-left:0pt;">&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

7. insertHtml( String where, HTMLElement el, String html ) : HTMLElement

where 可选值beforeBegin/afterBegin/beforeEnd/afterEnd

将html代码插入到el附近

<table style="width:426.1pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:426.1pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.onReady(</span><strong><span style="color:#7f0055;"><strong>function</strong></span></strong><span style="color:#000000;">(){ </span></p> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.DomHelper.insertHtml(</span><span style="color:#2a00ff;">"afterEnd"</span><span style="color:#000000;">,</span><span style="color:#000000;">Ext</span><span style="color:#000000;">.getDom(</span><span style="color:#2a00ff;">"test1"</span><span style="color:#000000;">),</span><span style="color:#2a00ff;">"Hello"</span><span style="color:#000000;">)</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">});</span></p> <p style="margin-left:0pt;">&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

8. markup( Object o ) : String  
返回DOM对象o对应的html代码

<table style="width:426.1pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:426.1pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.onReady(</span><strong><span style="color:#7f0055;"><strong>function</strong></span></strong><span style="color:#000000;">(){ </span></p> <p style="margin-left:0pt;"><span style="color:#000000;">alert(</span><span style="color:#000000;">Ext</span><span style="color:#000000;">.DomHelper.markup(</span><span style="color:#000000;">Ext</span><span style="color:#000000;">.</span><span style="color:#ff0000;">get</span><span style="color:#000000;">(</span><span style="color:#2a00ff;">"test1"</span><span style="color:#000000;">)));</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">alert(</span><span style="color:#000000;">Ext</span><span style="color:#000000;">.DomHelper.markup(</span><span style="color:#000000;">Ext</span><span style="color:#000000;">.</span><span style="color:#ff0000;">get</span><span style="color:#000000;">(</span><span style="color:#2a00ff;">"test1"</span><span style="color:#000000;">).dom));</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">});</span></p> <p style="margin-left:0pt;">&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

9. overwrite( Mixed el, Object/String o, \[Boolean returnElement\] ) :  
创建一个新的DOM元素o并用它重写el的内容

<table style="width:426.1pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:426.1pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.onReady(</span><strong><span style="color:#7f0055;"><strong>function</strong></span></strong><span style="color:#000000;">(){ </span></p> <p style="margin-left:0pt;"><span style="color:#000000;">Ext</span><span style="color:#000000;">.DomHelper.overwrite(</span><span style="color:#000000;">Ext</span><span style="color:#000000;">.</span><span style="color:#ff0000;">get</span><span style="color:#000000;">(</span><span style="color:#2a00ff;">"test1"</span><span style="color:#000000;">),</span><span style="color:#2a00ff;">"Hello,World"</span><span style="color:#000000;">);</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">});</span></p> <p style="margin-left:0pt;">&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

发表评论取消回复

表情：

评论列表（有 0 条评论，198人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript 中常用和必备的一些工具类函数

目录 1、判断是否为数值函数 isNumber 2、计算字符串长度 calculateStrLengh 3、转换日期格式 changeDateFormat 4、节流函数

偏执的太偏执、/ 2023年09月24日 14:09/ 0 赞/ 47 阅读

相关 Extjs常用函数介绍：

Extjs常用函数介绍： Ext.util.Format类： Ext.util.Format.capitalize(testStr);//将首字符串的第一个

偏执的太偏执、/ 2022年07月18日 04:08/ 0 赞/ 315 阅读

相关 scala第十四讲：Map

Map(映射)是一种可迭代的键值对（key/value）结构。特点： 1）Map的键是唯一的 2）Map的类型分可变和不可变，默认是不可变的一：定义：

矫情吗；*/ 2022年06月01日 23:26/ 0 赞/ 355 阅读

相关 ExtJS基础第四讲学习

第四讲：工具栏和菜单栏一、头部工具栏。准备工作，创建一个Panel，代码如下。 <table style="width:426.1pt;"> <tbody>

心已赠人/ 2022年04月17日 00:28/ 0 赞/ 224 阅读

相关第十三讲：ExtJS常用工具类和函数(上)

常用工具类和函数。 1. Ext.onReady() <table style="width:426.1pt;"> <tbody> <tr> <td st

以你之姓@/ 2022年04月14日 07:17/ 0 赞/ 200 阅读

相关第十讲：ExtJS组件之FormPanel(下)

TimeField时间选择框示例一：简单应用。 <table style="width:426.1pt;"> <tbody> <tr> <td styl

- 日理万妓/ 2022年04月14日 06:28/ 0 赞/ 235 阅读

相关第十五讲：ExtJS常用工具类和函数(下)

Ext.DomQuery 示例一：简单的应用 <table style="width:426.1pt;"> <tbody> <tr> <td style=

今天药忘吃喽~/ 2022年04月11日 14:44/ 0 赞/ 159 阅读

相关第十四讲：ExtJS常用工具类和函数(中)

Ext.DomHelper。 1.append( Mixed el, Object/String o, \[Boolean returnElement\] ) : HTMLE

太过爱你忘了你带给我的痛/ 2022年04月11日 14:38/ 0 赞/ 199 阅读

相关第十九讲：ExtJS与服务器交互

一、向服务器发送请求。 1.通过Ext.Ajax.request向服务器发送请求。 2.通过url属性来指定发送请求的地址。 3.通过params属性来设置请求参数。（参

今天药忘吃喽~/ 2022年04月05日 11:22/ 0 赞/ 210 阅读

相关第十七讲：ExtJS组件之GridPanel(中)

1.记录类型。示例一：当数据为二维数组时 <table style="width:426.1pt;"> <tbody> <tr> <td style="

r囧r小猫/ 2022年04月05日 10:51/ 0 赞/ 245 阅读