tesia
- 浏览: 32781 次
- 性别:
- 来自: 广州
-
最新评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用ViewPort(可视窗口区域)</title>
<link rel="stylesheet" href="ext-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.container.Viewport',{
//也可以写成 Ext.create('Ext.Viewport',{
layout:'border',//表格布局
items:[{
title:'north Panel',
html:'上边',
region:'north',//指定子面板所在区域为north
height:100
},
{
title:'west Panel',
html:'左边',
region:'west',//指定子面板所在区域为west
width:50
},
{
title:'Main Content',
html:'中间',
region:'center'//指定子面板所在区域为center
}
]
});
});
</script>
</head>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用ViewPort(可视窗口区域)</title>
<link rel="stylesheet" href="ext-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.container.Viewport',{
//也可以写成 Ext.create('Ext.Viewport',{
layout:'border',//表格布局
items:[{
title:'north Panel',
html:'上边',
region:'north',//指定子面板所在区域为north
height:100
},
{
title:'west Panel',
html:'左边',
region:'west',//指定子面板所在区域为west
width:50
},
{
title:'Main Content',
html:'中间',
region:'center'//指定子面板所在区域为center
}
]
});
});
</script>
</head>
<body>
</body>
</html>
分享到：
发表评论
-
Ext.data.TreeStore 分级异步加载树节点示例
2013-07-10 15:36 2050Ext.data.TreeStore远程加载树节点有两种常用方 ... -
Ext.Ajax.request提交JSON数据
2013-07-10 09:29 1342JSON作为轻量级的数据传输格式，在很多时候可以作为XML文件 ... -
Ext.Ajax.request提交XML数据示例
2013-07-09 16:51 917服务器端：loginServerXml.jsp 在lib下要有 ... -
Ext.Ajax.request异步提交表单示例
2013-07-09 16:10 1038服务器端代码：loginServer.jsp <%@ ... -
树形面板Ext.tree.Panel
2013-07-05 15:19 624<!DOCTYPE html PUBLIC " ... -
relayEvents传播分发事件
2013-07-04 14:17 673<!DOCTYPE html PUBLIC " ... -
Extjs自定义事件
2013-07-04 10:54 421<!DOCTYPE html PUBLIC " ... -
改变文档样式风格示例
2013-07-04 10:55 763<!DOCTYPE html PUBLIC " ... -
ExtJS事件绑定方式示例
2013-07-04 10:55 651<!DOCTYPE html PUBLIC " ... -
Ext.util.JSON编码和解码JSON对象
2013-07-03 15:27 927<script type="text/java ... -
Ext.util.Format提供的常用格式化方法
2013-07-03 14:57 1301<!DOCTYPE html PUBLIC " ... -
Ext.util.ClickRepeater 事件的配置和触发
2013-07-03 11:55 729Ext.util.ClickRepeater 继承Ext.ut ... -
样式表的创建和规则获取示例
2013-07-03 10:44 506<!DOCTYPE html PUBLIC " ... -
Ext.KeyNav为元素提供简单的按键处理方法示例
2013-07-03 09:46 835<!DOCTYPE html PUBLIC " ... -
Ext常用函数
2013-07-01 16:42 615函数一：Ext.onReady（） Ext的Dom都是动态生成 ... -
水平盒布局HBox
2013-07-01 15:43 469<!DOCTYPE html PUBLIC " ... -
表格布局
2013-07-01 15:18 508<!DOCTYPE html PUBLIC " ... -
Ext.layout.container.Column布局
2013-07-01 15:18 707<script type="text/java ... -
Absolute绝对位置布局示例
2013-07-01 14:35 386Ext.layout.container.Absolute对应 ... -
Card 卡片式布局
2013-06-28 16:40 940<!DOCTYPE html PUBLIC " ...
相关推荐
Ext.container.Viewport.add(uploadPanel); ``` 总的来说，`Ext.ux.SwfUploadPanel.js`是一个强大而灵活的文件上传解决方案，它结合了ExtJS的组件化和SwfUpload的高级上传功能，使得在Web应用中实现多文件上传变得...
9.4.11 表格布局：ext.layout.container.table / 454 9.4.12 列布局：ext.layout.container.column / 455 9.4.13 自适应布局：ext.layout.container.abstractfit与ext.layout.container.fit / 456 9.4.14 卡片...
**1.5 Container (Ext.Container)** - **xtype**: `container` - **功能描述**：Container 是一个可以包含其他组件的容器，可以定义布局和其他高级属性。 - **主要用途**：用作布局管理器，组织和管理子组件。 ###...
Ext.Viewport.add(panel); } }); ``` 5. **交互控制**： 在EXTJS应用中，你可以通过事件监听来控制音频播放。例如，添加按钮来播放或暂停音频： ```javascript var playButton = Ext.create('Ext.button....
10.12 表格与树形的结合——Ext.ux.tree.ColumnTree 第11章 其他布局类简介 11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 ...
10.12 表格与树形的结合——Ext.ux.tree.ColumnTree 第11章 其他布局类简介 11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 ...
Ext.create('Ext.container.Viewport', { style: { backgroundColor: 'red' }, // ... }); ``` - 对于更复杂的样式更改，可以使用`cls`（class）属性添加自定义CSS类，然后在CSS文件中定义这些类。 3. **...
5. **`container`** - `Ext.Container`，容器组件，用于包含其他组件，并控制它们的布局。 6. **`panel`** - `Ext.Panel`，面板组件，一种高级容器，可以有标题、边框等特性。 7. **`tabpanel`** - `Ext....
Ext.create('Ext.container.Viewport', { layout: 'fit', // 使用fit布局，让表格填满整个视口 items: [{ xtype: 'grid', // 创建表格组件 title: '双表头示例', store: { fields: ['name', 'email', 'phone'...
- **Ext.container.Viewport**：全屏容器，用于包裹整个应用界面。 - **Ext.tab.Panel**：页签面板，用于展示多个页面内容，每个页面作为一个单独的Tab。 6. **Tree 组件** - **Ext.tree.Panel**：用于展示树形...
Ext.create('Ext.container.Viewport', { layout: 'fit', // 全屏布局 items: [grid] }); ``` 在上述代码中，`data.json`应替换为实际的数据接口，返回JSON格式的数据，包含`data`属性，其值是一个数组，表示当前...
- **Viewport**: `Ext.ViewPort`，视口组件，通常作为整个页面的主要容器。 - **Window**: `Ext.Window`，弹出窗口。 2. **工具栏组件** - **Toolbar**: `Ext.Toolbar`，工具栏组件。 - **Button**: `Ext....
1. **用户界面**：ExtJS提供了多种组件，如`Ext.container.Viewport`用于全屏布局，`Ext.window.Window`用于创建弹出窗口，`Ext.panel.Panel`用于创建面板，以及`Ext.form.field.Text`和`Ext.form.field.TextArea`...
extend: 'Ext.container.Viewport', layout: 'fit', // 使用适应性布局 items: [{ xtype: 'panel', // 使用预定义的Panel组件 title: 'Hello, World!', html: '这是我的第一个Ext JS应用' }] }); ``` 这里...
启动函数内，我们创建了一个全屏的容器（`Ext.container.Viewport`），并在其中放置了一个面板（`Ext.container.Panel`）展示“Hello Ext”和欢迎信息。同时，创建一个`helloworld.html`文件，引入必要的CSS和...
- 使用 Ext.container.Viewport 或 Ext.container.Window 创建应用程序的基本容器。 - 定义页面布局，例如使用 fit 布局将所有内容适应容器大小。 2. **创建表单组件**： - 使用 Ext.form.Panel 创建包含用户名...
Ext.Panel是ExtJS中最基本的面板组件，它可以扩展自Ext.Container，并且可以进一步扩展出更强大的面板。标准的Ext.Panel组件由以下几个部分组成： - 底部工具栏 (`bottomtoolbars`) - 顶部工具栏 (`toptoolbars`)...
Ext.create('Ext.container.Viewport', { layout: 'fit', // 全屏布局 items: [{ xtype: 'colorfield', // 使用颜色选择组件 fieldLabel: '选择颜色', listeners: { select: function (component, newValue) ...
Ext.container.Viewport.add(myGrid); } else { // 重新加载数据 myGrid.store.loadData(newData); } } ``` 在这个例子中，`initGrid`函数会检查`myGrid`是否已经存在，如果不存在则创建一个新的GridPanel实例...