【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和图片方面的代码文件,这里就不提供了,仅供记录,了解怎么用就挺好!
【ExtJS】contentEl的使用的更多相关文章
- ExtJS学习之路第七步:contentEl与renderTo的区别
上回在Panel的应用中我们应该能大致区分开conteEl和renderTo,这回我们从定义中区分. 在Panel的API中, contentEl:String指定一个现有的HTML元素或者id作为此 ...
- 使用Extjs组件实现Top-Left-Main布局并且增加事件响应
每次在毕业答辩会上,看到同专业的同学只要是XXX管理系统,就是下图所示的界面,看来这中布局还是很受欢迎的(偷笑).接下来进入我们正题,在web项目无论是前端还是后台管理比较常见的布局就是Top-Lef ...
- Extjs Window用法详解
今天我们来介绍一下Extjs中一个常用的控件Window.Window的作用是在页面中创建一个窗口,这个窗口作为容器,可以在它里面加入grid.form等控件,从而来实现更加复杂的界面逻辑. 本文的示 ...
- ExtJS入门教程01,Window如此简单,你怎能不会?
这是一系列ExtJS教程,今天的是第一篇,主要介绍ExtJS中Window的基本用法.希望大家能够支持! 来吧,创建一个漂亮的弹出窗 var win = Ext.create("Ext.Wi ...
- ExtJS学习之路第六步:深入讨论组件Panel用法
Panel加载页面 var myPanel=Ext.create('Ext.panel.Panel',{ bodyPadding: "15px 10px 0 10px", titl ...
- ExtJS学习之路第五步:认识最常见组件Panel
文档中描述 Panel(面板)是一个容器,它具有特定的功能和结构部件,这使它成为面向应用用户界面的完美基石.面板,继承自Ext.container.Container,能够配置布局以及子组件(Chil ...
- extjs 选项卡
yufenghou extjs 选项卡 <%@ page language="java" import="java.util.*" pageEncodin ...
- ExtJs之Panel基本布局
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...
- extjs笔记
1. ExtJs 结构树.. 2 2. 对ExtJs的态度.. 3 3. Ext.form概述.. 4 4. Ext.TabPanel篇.. 5 5. Functio ...
随机推荐
- Spring Cache介绍和使用
Spring Cache 缓存是实际工作中非经常常使用的一种提高性能的方法, 我们会在很多场景下来使用缓存. 本文通过一个简单的样例进行展开,通过对照我们原来的自己定义缓存和 spring 的基于凝视 ...
- struts2下面如何同时使用servlet,就是如何实现struts与servlet共存
转载 原文链接:https://blog.csdn.net/u013358115/article/details/20706607 问题 项目要求struts2和servlet能够共存,就是strut ...
- PyCharm社区版+Django搭建web开发环境-2
接上一篇:PyCharm社区版+Django搭建web开发环境-1 1. 创建好django项目并建立app应用:web 2. setting.py:配置app应用 INSTALLED_APPS = ...
- ibatis 参数之模糊查询
因项目需要最近使用ibatis,在使用查询语句的时候,想着通用性所以没有在配置文件里用N多的and 语句,而是如下: <select id="getUsersList" re ...
- How to design a product table for many kinds of product where each product has many parameters
https://stackoverflow.com/questions/695752/how-to-design-a-product-table-for-many-kinds-of-product-w ...
- Wait--查看等待
--清除等待统计 --===================================================== --清除等待统计 DBCC SQLPERF (N'sys.dm_os_ ...
- map的回调函数
问题:--js (['1','2','3']).map(parseInt) 第一眼看到这个题目的时候,脑海跳出的答案是 [1, 2, 3],但是真正的答案是[1, NaN, NaN]. 首先让我们 ...
- Log4net日志
log4net简介(摘抄于百度百科): log4net库是Apache log4j框架在Microsoft .NET平台的实现,是一个帮助程序员将日志信息输出到各种目标(控制台.文件.数据库 ...
- CancellationTokenSource 取消任务
using System; using System.Threading; using System.Threading.Tasks; namespace ConsoleApp1 { class Pr ...
- Android 打开URL中的网页和拨打电话、发送短信功能
拨打电话需要的权限 <uses-permission android:name="android.permission.CALL_PHONE"/> 为了省事界面都写一起 ...