<%@ 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 cc = new Ext.form.FormPanel({
title:"panel",
width:600,
renderTo:"div1",
autoHeight:true,
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
}]
}
]
}
]
}
]
}]
});
});
</script>
</head>
<body>
<div id="div1" style="background:pink"></div>
</body>
</html>
分享到：
相关推荐
ext布局和菜单设计整理
### EXT 布局 Layout 资料详解 #### 6.1 布局概述 在 Ext JS 中，布局（Layout）是一个重要的概念，它指的是容器组件内子元素的排列方式。Ext JS 的所有容器组件都支持布局操作，并且每个容器都有一个对应的布局...
displayMsg: 'ӵ{0},{1},{2}', emptyMsg: 'ûم¼', items: ['-', { text: '', handler: function () { win.show(); } }, '-', { text: '' }, '-', { text: 'ɾ', handler: function () { var count ...
ext做简单布局，ext简单布局，直接修改即可使用ext简单布局，直接修改即可使用ext简单布局，直接修改即可使用
EXT后台简单布局，很好的，好用！！！！
在Web开发中，界面布局设计是提升用户体验的关键因素之一。EXT框架提供了一套强大的布局管理机制，使得开发者能够轻松创建复杂且响应式的用户...熟练掌握EXT布局的使用，可以极大地提升Web应用的用户体验和开发效率。
2. **Column布局**：Column布局允许你在同一列中按比例或固定宽度分配子元素。通过`columnWidth`（百分比）或`width`（像素）属性来定义每个元素的宽度。 3. **Card布局**：Card布局在一个容器中只显示一个子元素，...
主要讲的是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...
1. **支持多种EXT文件系统**: Ext2Read不仅支持EXT2，还支持更先进的EXT3和EXT4文件系统。EXT4是目前Linux发行版广泛采用的文件系统，其特点是速度快、支持大文件和大量文件。 2. **查看与复制**: 用户可以像在...
用Ext的Panel实现了简单布局，并在左侧显示树形菜单
以下是从给定代码片段中提取的EXT布局相关的重要知识点： 1. **Viewport布局**： - `Ext.Viewport` 是EXTJS中的一个全局对象，用于全屏布局，它会占据浏览器的整个视口。 - 在示例中，`viewport` 的布局有两种...
ext2.0 layout布局(使用viewport),将其部署到php服务器上，可以查看效果：适合一般的应该工作界面，有滑动菜单和树形菜单等，初步实现了一个不错的应用视图框架
以下将详细介绍EXT布局中的几种主要类型及其应用场景。 1. **Column布局**：此布局将容器划分为多列，每列的宽度可以通过`columnWidth`指定为百分比值。例如，设置`layout: "column"`后，可以分配列的相对宽度，...
Extjs 布局生成器，可以生产各布局查看布局代码
2. Border布局：将容器分为五个区域（东、南、西、北、中），每个子组件可以指定在哪个区域内显示。 3. Column布局：将容器视为一列，并通过`columnWidth`或`width`属性指定子组件的宽度，可以混合使用百分比和绝对...