<html pageEncoding="utf-8">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../../ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-2.2/ext-all-debug.js"></script>
<script>
Ext.onReady(function(){
var tb = new Ext.Toolbar('north-div');//创建一个工具条
tb.add(new Ext.Toolbar.SplitButton({
text: '文件',
cls: 'x-btn-text-icon blist',
menu: {
items: [{
text: '新建',
handler: onItemClick
}, {
text: '保存',
handler: onItemClick
}, {
text: '加载',
handler: onItemClick
}]
}
}), new Ext.Toolbar.MenuButton({
text: '编辑',
cls: 'x-btn-text-icon blist',
menu: {
items: [{
text: '复制',
handler: onItemClick
}, {
text: '粘贴',
handler: onItemClick
}]
}
}));
var viewport = new Ext.Viewport({
layout: 'border',
items: [{
border: false,
region: 'north',
contentEl: 'north-div',
tbar: tb,
height: 26
}, new Ext.TabPanel({
region: 'center',
deferredRender: false,
activeTab: 0,
items: [{
contentEl: 'center-div',
title: '内容',
closable: true,
autoScroll: true
}]
}), {
region: 'south',
contentEl: 'south-div',
height: 28,
margins: '0 0 0 0'
}]
});
function onItemClick(item){
alert(item.text);
}
})
</script>
</head>
<body>
<div id="north-div">
</div>
<div id="center-div">
内容
</div>
<div id="south-div">
状态栏
</div>
</body>
</html>
效果图:
- 大小: 15.4 KB
分享到:
相关推荐
本节介绍 Ext的Border布局以及如何创建一个Viewport。 1、Viewport介绍: Viewport 是一类特殊的容器。它创建后会自动填充到整个页面区域,并能自动适应页面缩放。一般作为用用程序全局容器使用。 2、Border布局...
ext2+,树,tree,布局,border
EXT制作的布局,使用border layout, 稍做改动即可添加到自己的项目里, 简单实用。让你感受EXT的强大
ExtJS2.0一共包含十种布局,常用的布局有border 、 column 、 fit 、 form 、 card 、 tabel等布局
第一步:Ext需要支持AIR的支持。下载并安装 ...第二步: 安装Ext的核心安装包xds_preview.air; 第三步汉化: 解压Ext Designer Preview.rar,...附:以处提供两个教程:Border布局.7z,Combobox.7z,请下载7z格式解压包查看
一、Border布局由类Ext.layout.BorderLayout定义,布局名称为border。该布局把容器分成东南西北中五个区域,分别由east,south, west,north, cente来表示,在往容器中添加子元素的时候,我们只需要指定这些子元素...
Ext可视化http://www.screencast.com/users/JackSlocum 安装和汉化的步骤 第一步:Ext需要支持AIR的支持。下载并安装 ...附:以处提供两个教程:Border布局.7z,Combobox.7z,请下载7z格式解压包查看
Border布局由类Ext.layout.BorderLayout定义,布局名称为border。
官方的EXT ide开发工具,提供完整安装包工具和破解汉化文件。 安装和汉化的步骤 第一步:Ext需要支持AIR的支持。 安装压缩包里德AdobeAIRInstaller.exe 第二步: 安装Ext的核心安装包xds_...1、Combobox 2、Border布局
1、Ext版本:3.2.1; 2、运行环境:VS 2008 以上; 3、远程加载数据,数据在程序中生成,无需连接数据库或XML文件; 4、运用Viewport管理页面布局 5、GridPanel的各种功能和特效
9.4.9 边框布局:ext.layout.container.border / 451 9.4.10 自动布局:ext.layout.container.auto / 453 9.4.11 表格布局:ext.layout.container.table / 454 9.4.12 列布局:ext.layout.container.column / ...
介绍ext的一些基本知识以及border布局
EXTJS4自学手册——EXT容器布局(Fit,Card,Border) EXTJS4自学手册——EXT组件布局 四、Extjs页面控件 EXTJS4自学手册——页面控件(表格) EXTJS4自学手册——页面控件(表格的特性属性) EXTJS4自学手册——页面...
ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 该文件含ext3.2.0压缩版,可直接运行哦...
ext js的mvc框架 ,分页展示,vtype验证,border布局。新手学习ext js 不错的项目
我只说一下安装和汉化的步骤 ,需要下载的都已经下载在资源里面了! 第一步:Ext需要支持AIR的支持。下载并安装 ... ...附:以处提供两个教程:Border布局.7z,Combobox.7z,请下载7z格式解压包查看
那个深入浅出ext作者比我还懒 viewport存放Ext.panel对象,其容器中的成员可以以borderlayout方式布局
5.2.1 0Border边框布局 5.2.1 1Box盒布局 5.3 使用ViewPort 5.4 Ext.tab.Panel页签 5.5 本章小结 第6章 常用工具类与函数 6.1 非常有用的Ext.core.Element 6.2 Ext常用函数 6.2.1 Ext.onReady() 6.2.2 ...
第九章 Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件 72 一、面板控件 Ext.Panel 72 二、窗口控件 Ext.window.Window 74 三、布局控件 Ext.container.Viewport 77 第十章 ...