<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>layout_form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<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">
Ext.onReady(function(){
var f = new Ext.form.FormPanel(
{
title:"灵活布局的表单",//表单标题
labelAlign:"right",//标签布局
labelWidth:65,//标签宽度
layout:"form",//表单布局，form(由上至下)
width:700,//表单宽度
autoHeight:true,//自动计算高度
frame:true,//显示效果更好
url:"",//提交到的url
method:"post",//提交方式
items:[ //表单组件
{ // 第一行
layout:"column",//布局，column(从左到右)，结合form与column可以制作任意布局的表单。
items:[
{
columnWidth:0.33,//占一行的百分比
layout:"form",//布局
items:[//具体的表单组件。
{
xtype:"textfield",
name:"family",
fieldLabel:"姓",
width:165
}
]
},
{
columnWidth:0.33,
layout:"form",
items:[
{
xtype:"textfield",
name:"name",
fieldLabel:"名",
width:165
}
]
},
{
columnWidth:0.33,
layout:"form",
items:[
{
xtype:"textfield",
name:"enName",
fieldLabel:"英文名",
width:165
}
]
}
]
},
{ // 第2行
layout:"column",
items:[
{
columnWidth:0.5,
layout:"form",
items:[
{
xtype:"textfield",
name:"family",
fieldLabel:"座右铭1",
width:250
}
]
},
{
columnWidth:0.5,
layout:"form",
items:[
{
xtype:"textfield",
name:"name",
fieldLabel:"座右铭2",
width:250
}
]
}
]
},
{ // 行3
layout:"form",
items:[
{
xtype:"textfield",
name:"up",
width:500,
fieldLabel:"奖励"
}
]
},
{ // 行4
layout:"form",
items:[
{
xtype:"textfield",
name:"lown",
width:500,
fieldLabel:"处罚"
}
]
},
{ // 第5行
layout:"column",
items:[
{
columnWidth:0.25,
layout:"form",
items:[
{
xtype:"textfield",
name:"moive",
fieldLabel:"最爱电影",
width:125
}
]
},
{
columnWidth:0.25,
layout:"form",
items:[
{
xtype:"textfield",
name:"music",
fieldLabel:"最爱音乐",
width:125
}
]
},
{
columnWidth:0.25,
layout:"form",
items:[
{
xtype:"textfield",
name:"singer",
fieldLabel:"最爱歌手",
width:125
}
]
},
{
columnWidth:0.25,
layout:"form",
items:[
{
xtype:"textfield",
name:"sport",
fieldLabel:"最爱运动",
width:125
}
]
}
]
},
{ // 行6
layout:"form",
items:[
{
xtype:"htmleditor",
name:"pragrpha",
fieldLabel:"文章",
width:500
}
]
}
],
buttonAlign:"center",//按钮布局。
buttons:[
{
text:"确定",
icon:"../ext/resources/images/default/dd/drop-yes.gif",
cls:"x-btn-text-icon"
},{
text:"取消",
icon:"../ext/resources/images/default/dd/drop-no.gif",
cls:"x-btn-text-icon"
}
],
renderTo:"f"//绑定到某个元素上。
}
);
});
</script>
</head>
<body >
<div align="center" id="f"></div>
</body>
</html>
qincidong
- 浏览: 237817 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (295)
- 数据库 (44)
- Java Web (26)
- Js+Css+Html (52)
- 证券 (1)
- 技术书籍 (2)
- Log4j (2)
- 收发邮件 (3)
- UML (6)
- tomcat (1)
- 开发工具 (21)
- java基础 (46)
- 设计模式 (2)
- Java Web Start (2)
- 即时通信解决方案 (2)
- Ant (7)
- 持续集成 (1)
- android (10)
- Ibatis (2)
- WebService (2)
- Ext (42)
- Ejb (2)
- flex (2)
- struts (5)
- dwr (1)
- 一笑而过 (2)
- FreeMarker (1)
- excel (2)
- hibernate (2)
- Jbpm (1)
- spring (1)
- Windows7 仿 WindowsXP 风格的主题 . (0)
- 情感 (0)
- 平安业务知识 (1)
- 报表 (2)
- 集群/负载均衡 (1)
- Linux (1)
- 单元测试 (1)
- Html5&Css3 (5)
最新评论
-
guji528：
很前面，不错
StarUML使用说明-指导手册 -
qincidong：
freezingsky 写道忘记是tomcat5还是5以前的版 ...
让Tomcat支持目录浏览 -
freezingsky：
忘记是tomcat5还是5以前的版本，默认是开启目录浏览的。那 ...
让Tomcat支持目录浏览 -
314649444：
不错，挺实用的 配置
让Tomcat支持目录浏览
分享到：
发表评论
-
EXT事件队列
2011-09-02 23:14 428<!DOCTYPE HTML PUBLIC & ... -
Ext方法重写
2011-09-02 23:15 352var Person = function(cfg){ ... -
Ext类继承
2011-09-02 23:15 386var Person = Ext.emptyFn; E ... -
Ext类别名
2011-09-02 23:16 486Ext.namespace("com.ext ... -
Ext命名空间别名
2011-09-02 23:17 295Ext.namespace("com.extjs. ... -
Ext类的构造方法
2011-09-02 23:17 377// 类的构造方法 // _cfg实际上就是对象初始化 ... -
Ext类静态方法
2011-09-02 23:18 336var Student = function(){} ... -
Ext为类增加属性和方法
2011-09-02 23:19 400//在类Person上增加一个属性id，值为1001， ... -
Ext命名空间
2011-09-02 23:20 279// 命名空间，类似Java中的包。 Ext.name ... -
ext--Ajax
2012-05-21 22:03 460<!DOCTYPE HTML PUBLIC " ... -
ext--tablepanel
2012-05-21 22:03 593<!DOCTYPE HTML PUBLIC " ... -
ext--form
2012-05-21 22:04 403<!DOCTYPE HTML PUBLIC " ... -
ext--表单初始化
2012-05-21 22:06 826<!DOCTYPE HTML PUBLIC " ... -
ext--表单验证
2012-05-21 22:07 819<!DOCTYPE HTML PUBLIC " ... -
ext--window
2012-05-21 22:08 540<!DOCTYPE HTML PUBLIC " ... -
ext--panel
2012-05-21 22:08 555<!DOCTYPE HTML PUBLIC " ... -
ext--下拉列表
2012-05-21 22:09 4531.本地数据 <!DOCTYPE HTML P ... -
ext--消息框
2012-05-21 22:12 444<!DOCTYPE HTML PUBLIC " ... -
ext--消息框2
2012-05-21 22:12 614<!DOCTYPE HTML PUBLIC " ... -
ext--悬停提示
2012-05-21 22:13 412<!DOCTYPE HTML PUBLIC " ...
相关推荐
- EXT拥有丰富的Widget库，包括Menu、Form、TabPanel等，满足多样化的UI需求。 ### 使用Ajax #### 4.1 PHP - 在使用PHP作为服务器端语言时，EXT提供了与之无缝集成的解决方案，实现前后端的数据交换。 #### 4.2 ...
2. **布局管理器（Layout Managers）**：EXT提供了一系列的布局管理器，如Fit、Border、Form、Table等，用于自动调整组件的大小和位置，适应不同的屏幕尺寸和内容变化。 3. **数据绑定（Data Binding）**：EXT支持...
Ext.extend(Ext.form.CKEditor, Ext.form.TextArea, { onRender : function(ct, position){ if(!this.el){ this.defaultAutoCreate = { tag: "textarea", autocomplete: "off" }; } Ext.form.TextArea....
- **更多组件**：除了MessageBox和Grid外，EXT还提供了大量的其他组件，如Form、Tree、TabPanel等，满足不同场景的需求。 - **使用方法**：通过实例演示如何在项目中引入并使用这些组件，提高开发效率。 #### 8. ...
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
- `layout`: 使用了`"form"`布局，这是Ext中专门为表单设计的布局方式。 - `labelWidth`: 统一设置了所有字段标签的宽度。 - `autoScroll`: 设置为`true`，当表单内容超出容器时自动显示滚动条。 #### 字段配置 ...
### EXT 布局 Layout 资料详解 #### 6.1 布局概述 在 Ext JS 中，布局（Layout）是一个重要的概念，它指的是容器组件内子元素的排列方式。Ext JS 的所有容器组件都支持布局操作，并且每个容器都有一个对应的布局...
4. **布局管理**：`Ext.layout`包含各种布局管理器，如`Ext.layout.container.Fit`和`Ext.layout.container.Border`，它们负责计算和调整组件的大小和位置。 5. **AJAX通信**：`Ext.Ajax`提供了与服务器交互的接口...
EXT搜索面板var cfg = { border: false, defaults: { border: false, layout: { type: 'hbox' }, defaults: { margin: '0 3 0 0', border: false, maxWidth: 300, minWidth: 180, layout: { type: 'form'...
var frm = new Ext.form.FormPanel({ title: '在FormPanel中使用HBoxLayout进行布局', renderTo: "hbox", width: 600, height: 400, labelWidth: 80, frame: true, layout: { type: 'hbox', align: '...
Ext.ux.form.TinyMCETextArea 是一个在Extjs4框架下实现的组件，它将TinyMCE编辑器集成到了ExtJS的表单控件中，提供了富文本编辑的功能。这个组件是基于HTML5构建的，因此在兼容性和功能上能够满足现代网页应用的...
EXT因其适合企业级开发，能够实现复杂的Layout布局，以及与backbase等专业级应用相媲美的界面效果而备受推崇。其特色之一是提供了真正的可编辑表格Edit Grid，支持XML和JSON数据类型，方便数据的展示和操作。EXT还...
EXT的一大亮点在于其复杂的Layout布局系统，它能够轻松创建各种复杂的界面结构，如网格、表单、面板等。EXT的界面设计美观，与高端的桌面应用如Backbase不相上下。EXT支持XML和JSON数据类型，特别适合与服务器端进行...
总的来说，通过巧妙地利用Ext JS的Column Layout和Form Layout，我们可以构建出既美观又实用的复杂页面，提高用户的操作体验。在实际开发过程中，记得灵活运用布局和组件，以满足不同项目的需求。同时，不断学习和...
Ext.extend(Ext.layout.container.MyIFrameLayout, Ext.layout.container.Fit, { onLayout: function(ct, target) { var iframe = ct.items.first(); if (iframe && iframe.rendered) { var iframeBody = ...
### ext控件Form相关配置详解 #### 一、引言 在现代Web开发中，Ext JS作为一款功能强大且灵活的前端框架，被广泛应用于构建复杂的企业级应用程序。其中，`Form`控件是Ext JS中一个非常重要的组成部分，它为开发者...
这通常涉及到EXT的`Ext.form.Panel`组件，它允许我们定义表单布局、字段和行为。在DEMOLOGIN.HEML文件中，我们可能看到这样的代码结构： ```html <!DOCTYPE html> ...
EXT的组件系统是其强大之处，它包含了许多预定义的UI组件，如窗口（Window）、面板（Panel）、表格（Grid）、表单（Form）等，这些组件可以方便地组合和配置，以满足各种复杂的应用场景。EXT还支持数据绑定，使得UI...
Ext2.0 Form 使用实例详解 在Web应用开发中，ExtJS库提供了强大的用户界面组件，其中FormPanel是用于创建复杂表单的重要组件。本文将详细介绍Ext2.0 FormPanel的使用，包括创建方法、控件配置以及布局管理。 首先...
Ext的formpanel table布局实例，有效解决了页面resize时列宽不跟随改变的问题，即列宽的自适应宽度