<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Panel</title>
<link type="text/css" rel="stylesheet" href="../../ext/resources/css/ext-all.css">
<style type="text/css">
.contain{
/* 设置背景 */
background:#000;
/* 居中设置 */
margin:0 auto;
width:500px;
height:500px;
/* 外层div相对定位 */
position:relative;
}
.center{
/* 居中设置 */
margin:0 auto;
/* 内层div相对外层div绝对居中 */
position:absolute;
/* 指定内层div的位置 */
top:150px;
left:150px;
}
</style>
<script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var _panel = new Ext.Panel({
frame:true,
width:200,
height:200,
title:"面板"
});
_panel.addButton({text: "确 定"});
_panel.addButton(new Ext.Button({
text:"new Button",
minWidth:100
}));
/* 动态创建元素 DomHelper.append */
_panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{
tag:"div",
cls:"contain",
cn:[{
tag:"div",
cls:"center"
}]
}, true).child("div"));
});
</script>
</head>
<body>
</body>
</html>
这里在向页面中添加元素的时候用到了applyToMarkup()方法，该方法类似render()，简单的解释一下：
如果在构造参数中定义：
* renderTo:将当前对象放到renderTo指定的元素里面
* applyTo:直接在当前对象之上构建
在构造方法外部定义：
* render：等同于renderTo()
* applyToMarkup：等同于applyTo()
DomHelper.append是Ext中动态创建Dom对象的方式，也是经常用到的一个方法，来看API中的定义
DomHelper.append ( Mixed el , Object/String o , [Boolean returnElement ] ) : HTMLElement/Ext.Element
该方法创建了一个新的DOM元素，并且把它添加到第一个参数指定的DOM对象之中。
Parameters:
* el : 可以是多种形式的上下文元素
*
o : 对象或字符串类型，指定的DOM 对象或者HTML行级元素
*
returnElement : 可选，Boolean 类型，如果值为true，返回一个Ext对象元素，否则返回普通的HTML元素
Returns:
* HTMLElement/Ext.Element ：新的HTML节点
上面例子中第二个参数指定是的DIV对象
{
tag:"div",
cls:"contain",
cn:[{
tag:"div",
cls:"center"
}]
}
* tag：target，目标是DIV
* cls：class，指定CSS 样式
* cn：childNode，子节点
* []：中括号中可以动态生成多个子节点对象
* .child("div")：append到指定对象的子节点中第一个DIV上
分享到：
相关推荐
二、使用外部样式表 3 三、使用内联样式 4 四、使用setStyle()方法 4 五、脚本方法 4 Application组件样式属性 5 panel组件样式属性 5 color文本颜色 6 TabNavigator组件样式属性 7 color主体内容的文本颜色 8 color...
二、使用外部样式表 3 三、使用内联样式 4 四、使用setStyle()方法 4 五、脚本方法 4 Application组件样式属性 5 panel组件样式属性 5 color文本颜色 6 TabNavigator组件样式属性 7 color主体内容的文本颜色 8 color...
然后下载所有Node.js依赖项：$ npm install 最后但并非最不重要的一点是，通过运行以下命令启动应用程序：$ grunt serve:dist 此命令会缩小所有样式表和脚本，并在上启动应用程序。 我不会描述如何将Node.js应用程序...
添加样式表 后处理CSS 添加CSS预处理器（Sass，Less等） 添加图像，字体和文件 使用public文件夹 更改HTML 在模块系统之外添加资产 何时使用public文件夹 使用全局变量 添加引导程序使用自定义主题 增加流量 添加...
0396 将CSS样式表应用到页面中 222 0397 在页面的源码中直接定义样式表 222 0398 动态加载主题到页面中 223 0399 利用Table布局Web页面 223 0400 FrameSet框架的应用 224 0401 IFrame框架的应用 224 ...
12.4.2 创建CSS 层叠样式表 12.4.3 创建框架集 12.5 小结 第 13 章 ASP.NET 内置对象,应用程序配置和缓存 13.1 ASP.NET 内置对象 13.1.1 Request 传递请求对象 13.1.2 Response 请求响应对象 13.1.3 Application ...
12.4.2 创建CSS层叠样式表 12.4.3 创建框架集 12.5 小结 第13章 ASP.NET内置对象,应用程序配置和缓存 13.1 ASP.NET内置对象 13.1.1 Request传递请求对象 13.1.2 Response请求响应对象 13.1.3 Application状态对象 ...
12.4.2 创建CSS层叠样式表 12.4.3 创建框架集 12.5 小结 第13章 ASP.NET内置对象,应用程序配置和缓存 13.1 ASP.NET内置对象 13.1.1 Request传递请求对象 13.1.2 Response请求响应对象 13.1.3 Application状态对象 ...
12.4.2 创建CSS层叠样式表 12.4.3 创建框架集 12.5 小结 第13章 ASP.NET内置对象,应用程序配置和缓存 13.1 ASP.NET内置对象 13.1.1 Request传递请求对象 13.1.2 Response请求响应对象 13.1.3 Application状态对象 ...
12.4.2 创建CSS层叠样式表 12.4.3 创建框架集 12.5 小结 第13章 ASP.NET内置对象,应用程序配置和缓存 13.1 ASP.NET内置对象 13.1.1 Request传递请求对象 13.1.2 Response请求响应对象 13.1.3 Application状态对象 ...
12.4.2 创建CSS层叠样式表 12.4.3 创建框架集 12.5 小结 第13章 ASP.NET内置对象,应用程序配置和缓存 13.1 ASP.NET内置对象 13.1.1 Request传递请求对象 13.1.2 Response请求响应对象 13.1.3 Application状态对象 ...
将JSON编辑器样式表添加到index.html或同等版本； 例如： https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.3.0/jsoneditor.css(ns my-app (:require [re-jsoneditor.core :refer [jsoneditor]]))(defn panel ...
37.如何使用CSS文件定义控件的样式 38.如何启用和禁用ViewState保存状态信息的功能 39.如何应用IsPostBack控制页面的加载 41.如何使用Trace对象进行跟踪调试(页面级) 42.如何使用#Include语法将文件添加到页面 ...
4.2.2 使用层叠样式表改变样式 88 4.3 HTML服务器控件 93 4.3.1 HtmlControl基类 95 4.3.2 HtmlContainerControl类 96 4.3.3 所有的HTML类 96 4.3.4 使用HtmlGenericControl类 97 4.4 通过JavaScript处理页面...
如何使用CSS文件定义控件的样式 38.如何启用和禁用ViewState保存状态信息的功能 39.如何应用IsPostBack控制页面的加载 41.如何使用Trace对象进行跟踪调试(页面级) 42.如何使用#Include语法将文件...
4.2.2 使用层叠样式表 改变样式88 4.3 HTML服务器控件93 4.3.1 HtmlControl基类95 4.3.2 HtmlContainerControl类96 4.3.3 所有的HTML类96 4.3.4 使用HtmlGeneric Control类97 4.4 通过JavaScript处理页面和 ...
开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 jQuery EasyUI为提供了大多数UI控件的使用，如:accordion，combobox，menu，dialog，tabs，...
4.18 水平布面板——HorizontalPanel 4.19 垂直布局面板——VerticalPanel 4.20 绝对定位面板——AbsolutePanel 4.21 停靠面板——DockPanel 4.22 展开面板——DisclosurePanel 4.23 标签面板——TablePanel 4.24 ...
16 <br>0033 Return语句的使用 17 <br>0034 如何实现无限循环 17 <br>0035 巧用foreach语句控制控件 18 <br>0036 有效使用switch case语句 18 <br>2.3 运算符 19 <br>0037 如何使用...