<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>Insert title here</title>
<link rel="stylesheet" href="../ext/resources/css/ext-all.css"></link>
<link rel="stylesheet" href="../css/button.css"></link>
<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" src="../ext/source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../ext/ExtJS.ux/UploadDialog/Ext.ux.UploadDialog.js"></script>
<script type="text/javascript" src="../js/jsloader.js"></script>
<script type="text/javascript" src="../ext/ext_group.js"></script>
<script>
Ext.onReady(function(){
Ext.get("div1").shift({width:800,height:500,x:200,y:10,opacity:1,duration:3});
var aa = function(){
return new Ext.form.FormPanel({
title:"panel",
width:600,
autoHeight:true,
height:300,
frame:true,
items:[{
layout:"column",
items:[
{
layout:"form",
xtype:"fieldset",
labelWidth:50,
autoHeight:true,
title:"fieldset",
columnWidth:.5,
items:[{
xtype:"textfield",
fieldLabel:"text1",
width:50
},{
xtype:"textfield",
fieldLabel:"text1",
width:50
}
]
},{
layout:"form",
labelWidth:50,
columnWidth:.5,
items:[{
xtype:"textfield",
fieldLabel:"text2",
width:200
}]
},{
layout:"form",
labelWidth:50,
columnWidth:.3,
items:[{
xtype:"ux-radiogroup",
fieldLabel:"radio",
horizontal:true,
radios:[{
boxLabel:"radio1",
value:1
},{
boxLabel:"radio2",
value:2
}
]
}]
},{
layout:"form",
labelWidth:50,
columnWidth:.4,
items:[
{
xtype:"textfield",
fieldLabel:"te1"
},{
xtype:"textfield",
fieldLabel:"te1"
},{
xtype:"textfield",
fieldLabel:"te1"
}
]
},{
layout:"form",
labelWidth:50,
columnWidth:.3,
items:[{
xtype:"ux-radiogroup",
fieldLabel:"radio",
horizontal:true,
radios:[{
boxLabel:"radio1",
value:1
},{
boxLabel:"radio2",
value:2
}
]
}]
},{
layout:"form",
labelWidth:50,
columnWidth:1,
autoHeight:true,
xtype:"fieldset",
title:"fieldset2",
items:[{
xtype:"ux-radiogroup",
fieldLabel:"radio",
horizontal:true,
radios:[{
boxLabel:"radio1",
value:1
},{
boxLabel:"radio2",
value:2
}
]
}]
},{
layout:"form",
xtype:"fieldset",
labelWidth:50,
autoHeight:true,
title:"fieldset",
columnWidth:.5,
items:[
{
layout:"column",
items:[
{
layout:"form",
items:[{
xtype:"textfield",
fieldLabel:"text1",
width:50
}]
},{
layout:"form",
items:[{
xtype:"textfield",
fieldLabel:"text1",
width:50
}]
}
]
}
]
}
]
}]
});
};
var cc = new Ext.TabPanel({
width:800,
autoHeight:true,
activeItem:0,
renderTo:"div1",
layoutOnTabChange:true,
items:[
{
title:"sky",
//layout:"fit",
layout:"fit",
// height:400,
autoHeight:true,
items: aa()
},{
title:"infi",
autoHeight:true,
//layout:"fit",
items: aa()
},{
title:"fly",
autoHeight:true,
//layout:"fit",
items: aa()
}
]
});
});
</script>
</head>
<body>
<div id="div1" style="background:pink"></div>
</body>
</html>
分享到：
相关推荐
ext布局和菜单设计整理
### EXT 布局 Layout 资料详解 #### 6.1 布局概述 在 Ext JS 中，布局（Layout）是一个重要的概念，它指的是容器组件内子元素的排列方式。Ext JS 的所有容器组件都支持布局操作，并且每个容器都有一个对应的布局...
### ExtJS 表格布局小例子详解 #### 一、简介 本文档旨在解析一个具体的 ExtJS 表格布局小例子，重点介绍其中涉及的数据存储、数据删除与添加的方法。ExtJS 是一款强大的 JavaScript 框架，用于构建交互式的前端...
ext做简单布局，ext简单布局，直接修改即可使用ext简单布局，直接修改即可使用ext简单布局，直接修改即可使用
EXT后台简单布局，很好的，好用！！！！
在Web开发中，界面布局设计是提升用户体验的关键因素之一。EXT框架提供了一套强大的布局管理机制，使得开发者能够轻松创建复杂且响应式的用户...熟练掌握EXT布局的使用，可以极大地提升Web应用的用户体验和开发效率。
3. **Card布局**：Card布局在一个容器中只显示一个子元素，常用于实现轮播效果或选项卡面板。 4. **Border布局**：Border布局是最常用的布局之一，它将容器分为五个区域：东(east)、南(south)、西(west)、北(north)...
主要讲的是EXT布局，使用这个布局，能让你学习更好的知识，我也在学习，咱们一起学习吧~~
在Ext JS这个强大的JavaScript框架中，布局管理是构建复杂用户界面的关键部分。本文将深入探讨“Ext table布局实例”以及“formpanel的table布局”，帮助开发者更好地理解和运用这两种布局方式。 首先，我们要理解...
在本文中，我们将深入探讨GWT-Ext框架中布局管理器的应用，这是一个基于Google Web Toolkit (GWT) 和 ExtJS 的强大控件库，用于快速开发富互联网应用程序。本系列文章的第三部分主要关注各种布局的实现和使用技巧，...
在Ext JS这个强大的JavaScript库中，布局管理是构建复杂用户界面的关键部分。布局决定了组件如何在容器内排列和适应不同的屏幕尺寸。本篇文章将深入探讨Ext中常用的两种布局：Fit布局和Border布局，为初学者提供详细...
EXT布局是一种强大的前端开发框架，用于构建富互联网应用程序（RIA）。在EXT中，布局管理器是核心组件之一，它负责处理容器中的子组件的排列和大小调整。以下是对EXT布局中几种常见布局方式的详细说明： 1. Column...
EXT3是EXT发展中的一个重要阶段，它引入了许多新特性，如改进的数据绑定、新的布局管理器、增强的图表功能等，极大地提升了开发效率和用户体验。 在EXT3中，一个显著的变化是EXT3.0的发布，这个版本带来了许多性能...
用Ext的Panel实现了简单布局，并在左侧显示树形菜单
以下是从给定代码片段中提取的EXT布局相关的重要知识点： 1. **Viewport布局**： - `Ext.Viewport` 是EXTJS中的一个全局对象，用于全屏布局，它会占据浏览器的整个视口。 - 在示例中，`viewport` 的布局有两种...
ext2.0 layout布局(使用viewport),将其部署到php服务器上，可以查看效果：适合一般的应该工作界面，有滑动菜单和树形菜单等，初步实现了一个不错的应用视图框架
以下将详细介绍EXT布局中的几种主要类型及其应用场景。 1. **Column布局**：此布局将容器划分为多列，每列的宽度可以通过`columnWidth`指定为百分比值。例如，设置`layout: "column"`后，可以分配列的相对宽度，...
Extjs 布局生成器，可以生产各布局查看布局代码
Ext.Window 通过DIV布局，通过DIV填充window内容，带Ext所需文件。