【ExtJS】contentEl的使用

　contentEl

　　指定一个已存在的HTML元素, 或者一个已存在HTML元素的 id , 它们将被用作当前组件的内容。

　　此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中, 使它成为该组件的内容。

---

　　首先在html文件的body里写一个div块，设置其ID为'contentEl_id':

<div id="contentEl_id">

    <table border="0">
      <tr>
      <td align="right">
        <label for="doc">Document:</label>
        <select id="doc" size="1">
          <option value="javascript">JavaScript Document</option>
          <option value="html">HTML Document</option>
          <option value="css">CSS Document</option>
          <option value="coffee">CoffeeScript Document</option>
          <option value="python">Python Document</option>
          <option value="ruby">Ruby Document</option>
          <option value="perl">Perl Document</option>
          <option value="php">PHP Document</option>
          <option value="java">Java Document</option>
          <option value="csharp">C# Document</option>
          <option value="c_cpp">C++ Document</option>
          <option value="svg">SVG Document</option>
          <option value="textile">Textile Document</option>
          <option value="text">Text Document</option>
        </select>
      </td>
      <td align="right">
        <label for="theme">Theme:</label>
        <select id="theme" size="1">
          <option value="textmate">TextMate</option>
          <option value="eclipse">Eclipse</option>
          <option value="dawn">Dawn</option>
          <option value="idle_fingers">idleFingers</option>
          <option value="pastel_on_dark">Pastel on dark</option>
          <option value="twilight">Twilight</option>
          <option value="clouds">Clouds</option>
          <option value="clouds_midnight">Clouds Midnight</option>
          <option value="kr_theme">krTheme</option>
          <option value="mono_industrial">Mono Industrial</option>
          <option value="monokai">Monokai</option>
          <option value="merbivore">Merbivore</option>
          <option value="merbivore_soft">Merbivore Soft</option>
          <option value="vibrant_ink">Vibrant Ink</option>
        </select>
      </td>
      <td align="right">
        <label for="fontsize">Font Size:</label>
        <select id="fontsize" size="1">
          <option value="10px">10px</option>
          <option value="11px">11px</option>
          <option value="12px" selected="selected">12px</option>
          <option value="14px">14px</option>
          <option value="16px">16px</option>
          <option value="20px">20px</option>
          <option value="24px">24px</option>
        </select>
      </td>
      <td></td>
      <td align="right" valign="top" rowspan="4">
        <img src="logo.png">
      </td>
      </tr>
      <tr>
      <td align="right">
        <label for="mode">Mode:</label>
        <select id="mode" size="1">
          <option value="text">Text</option>
          <option value="javascript">JavaScript</option>
          <option value="xml">XML</option>
          <option value="html">HTML</option>
          <option value="css">CSS</option>
          <option value="python">Python</option>
          <option value="php">PHP</option>
          <option value="java">Java</option>
          <option value="ruby">Ruby</option>
          <option value="c_cpp">C/C++</option>
          <option value="coffee">CoffeeScript</option>
          <option value="perl">Perl</option>
          <option value="csharp">C-Sharp</option>
          <option value="svg">SVG</option>
          <option value="textile">Textile</option>
        </select>
      </td>
      <td align="right">
        <label for="keybinding">Key Binding:</label>
        <select id="keybinding" size="1">
          <option value="ace">Ace</option>
          <option value="vim">Vim</option>
          <option value="emacs">Emacs</option>
          <option value="custom">Custom</option>
        </select>
      </td>
      <td align="right">
        <label for="soft_wrap">Soft Wrap:</label>
        <select id="soft_wrap" size="1">
          <option value="off">Off</option>
          <option value="40">40 Chars</option>
          <option value="80">80 Chars</option>
          <option value="free">Free</option>
        </select>
      </td>
      <td></td>
      </tr>
      <tr>
      <td align="right">
        <label for="select_style">Full Line Selection</label>
        <input type="checkbox" name="select_style" id="select_style" checked>
      </td>
      <td align="right">
        <label for="highlight_active">Highlight Active Line</label>
        <input type="checkbox" name="highlight_active" id="highlight_active" checked>
      </td>
      <td align="right">
        <label for="show_hidden">Show Invisibles</label>
        <input type="checkbox" name="show_hidden" id="show_hidden">
      </td>
      <td align="right">
        <label for="show_hscroll">Persistent HScroll</label>
        <input type="checkbox" name="show_hscroll" id="show_hscroll">
      </td>
      </tr>
      <tr>
      <td align="right">
        <label for="show_gutter">Show Gutter</label>
        <input type="checkbox" id="show_gutter" checked>
      </td>
      <td align="right">
        <label for="show_print_margin">Show Print Margin</label>
        <input type="checkbox" id="show_print_margin" checked>
      </td>
      <td align="right">
        <label for="highlight_selected_word">Highlight selected word</label>
        <input type="checkbox" id="highlight_selected_word" checked>
      </td>
      <td></td>
      </tr>
    </table>

</div>

　　随后在写好的ExtJS布局中将该div块渲染到指定组件内：

Ext.define('My.aceEditor',{
    extend: 'Ext.panel.Panel',
    xtype: 'aceeditor',
    layout: 'border',
    items: [{
        region: 'north',
        title: 'AceEditor Tests',
        height: 143,
        margin: '2 2 1 2',
        collapsible: true,
        collapsed: false,
        layout: "fit",
        contentEl: "contentEl_id"
    },{
        region: 'center',
        layout: 'fit',
        border: 0,
        margin: '1 2 2 2',
        items:[]        
    }]
});

　　这样在north组件中就将div块内容渲染了进去。

　　效果：

　　其他关于css和图片方面的代码文件，这里就不提供了，仅供记录，了解怎么用就挺好！