Ext.onReady(function() {
var win = new Ext.Window({// 创建窗口对象
applyTo:'mydiv',//applyTo应用节点的id,或是DOM节点，又或者是与DIV相当的现有元素
title : "hello",//标题
width : 300,
height : 200,
//modal:true,
html : '<h1>Hello World</h1>'//显示的html的内容
})
win.show();//显示组件
//win.renderTo(Ext.getBody());//renderTo指添加到某个位置
var obj={
renderTo:"mydiv",//等价于 panel.render("mydiv");
title:"hello",
width:300,
height:200,
html:'<h1>hello world</h1>'
};
var panel=new Ext.Panel(obj);//创建面板对象
// panel.render("mydiv");//render参数表示页面id
var panel = new Ext.TabPanel({// 创建选项卡面板
renderTo : 'mydiv',
width : 300,
height : 200,
items : [{//容器控件中的子元素
title : "面板一",
height : 30
}, {
title : "面板二",
height : 30
}, {
title : "面板三",
height : 30
}]
})
// panel.render("mydiv");
var button = new Ext.Button({// 创建按钮对象
renderTo : 'mydiv',
text : "添加",// 显示文本
pressed : true,// 显示按下的状态
height : 30,
handler : Ext.emptyFn()
})
})
<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<%
request.setAttribute("base", request.getContextPath());
%>
<!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=gb2312">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="${base}/script/ext/resources/css/ext-all.css">
<script type="text/javascript"
src="${base}/script/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${base}/script/ext/ext-all.js"></script>
<script type="text/javascript" src="${base}/script/sample/first.js"></script>
</head>
<body>
<div id='mydiv'></div>
</body>
</html>
分享到：
相关推荐
在EXTJS 4.x框架中，`tabpanel`是用于创建多标签界面的组件，它可以方便地组织和切换多个视图。动态加载panel和HTML到tabpanel是提高应用性能和用户体验的有效方式，因为它允许按需加载内容，减少初始页面加载时间。...
- **获取Panel对象**：通过`getPanel`方法可以获取到已创建的Panel对象，以便于进一步的定制操作。 #### 第六章 TabPanel 页签容器 - **TabPanel容器简介**：TabPanel是一种特殊的Panel容器，主要用于实现多页签的...
Efs支持创建简单的Tabpanel容器，同时也支持创建具有更复杂配置的Tabpanel容器。 #### 第七章 Grid网格容器 - **GridPanel构造**：GridPanel是一种用于展示表格数据的容器，可以通过配置数据源和列模型来定制其...
动态添加菜单项或工具栏按钮，可以使用C#代码在程序运行时动态创建`MenuItem`或`Button`对象，并将其添加到对应的容器中，例如： ```csharp // 创建新的菜单项 MenuItem menuItem = new MenuItem { Header = "新...
<div xtype="tabpanel-item" title="Tab 2">Content for Tab 2 ``` #### 第七章：GRID 网格容器 **GRIDPANEL** 用于创建表格形式的数据展示。GRIDPANEL 支持多种配置选项，包括数据源、列模式等。 - **构造 ...
1. **步骤一：定义数据** - 创建一个数据存储对象来装载表格的数据。 ```javascript var store = new Ext.data.JsonStore({ url: 'data.json', root: 'rows', id: 'id', fields: ['name', 'email', 'phone'] ...
- **对象创建**: 使用`new`关键字来实例化类。 - **构造器函数**: 定义类的构造器来初始化对象的状态。 - **方法共享**: 可以将公用的方法定义在原型链上以节省内存。 #### 15. EXT中的继承 - **继承** 是EXT中...
### EXT中文手册知识点总结 ... - 使用构造函数创建对象。 - 共享方法的实现。 以上知识点总结了EXT中文手册中的核心内容，覆盖了从安装到具体使用的各个方面，帮助开发者快速掌握EXT框架的基本用法和高级技巧。
TabPanel组件是EXT提供的一个高级组件，用于创建标签页式的用户界面。它允许用户通过点击不同的标签来切换显示不同的内容区域。 **Step1: 创建HTML骨架** 首先需要定义一个容器元素，作为TabPanel的容器。 **...
- 对象创建 - 使用构造器函数 - 方法共享 #### 十九、表单组件入门 - **概念**: 表单是Web应用中常见的交互组件。 - **步骤**: - 创建表单体 - 添加表单字段 - 提交表单数据 #### 二十、EXT中的继承 - **...
- **表单及元素组件**：Editor、EditorGridPanel、GridPanel、PagingToolbar、Panel、ProgressBar、SplitButton、TabPanel、TreePanel和Window等。 6. **组件的使用**： 创建组件时，需要指定其配置参数，如尺寸...
7. **`tabpanel`** - `Ext.TabPanel`，选项面板，用于创建带标签页的面板，每个标签页可以包含不同的内容。 8. **`treepanel`** - `Ext.tree.TreePanel`，树型面板，用于展示层级结构的数据。 9. **`flash`** - ...
`Ext.Button` 是用于创建按钮的组件。它支持各种配置选项，如图标、提示文本等。 **10.3 Toolbar 综合应用例子** `Ext.toolbar.Toolbar` 是用于创建工具栏的组件。它通常包含按钮、分隔符、文本框等控件。下面是一...
- **对象创建**：介绍了如何创建和使用对象。 - **构造器函数**：展示了如何定义构造器函数来创建对象实例。 - **方法共享**：介绍了如何让对象共享相同的方法，提高代码复用性。 #### 17. 表单组件入门 - **表单...
2. **`splitbutton`:** 这是一种带有下拉菜单的按钮组件。该组件通过`Ext.SplitButton`类实现。 3. **`cycle`:** 此组件提供了一个带有下拉选项菜单的按钮，由`Ext.CycleButton`类实现。 4. **`buttongroup`:** ...
7. **选项卡（TabPanel）** - `xtype: 'tabpanel'` 对应的类是 `Ext.tab.Panel`。选项卡组件用于展示多个页面内容，每个页面是一个单独的选项卡。 8. **树（Tree）** - `xtype: 'tree'` 对应的类是 `Ext.tree....
- **类设计**：讲解EXT中的面向对象编程思想，包括对象创建、构造器函数、方法共享等概念。 - **表单组件入门**：表单是Web应用中常见元素，EXT提供了丰富的表单组件，如文本框、复选框等。 - **EXT中的继承**：...