一、效果图
先用美图勾引那些驻足观望之人：
二、代码讲解
注意代码中的EXT js引入路径， 需要根据你的实际情况进行引入，否者可能出现错误
<html>
<head>
<title>系统登录</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<style>
</style>
<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var form1 = new Ext.FormPanel({
layout : 'form',
collapsible : true,
autoHeight : true,
frame : true,
renderTo : Ext.getBody(),
title : '<center style="curor:hand" onclick="window.location.reload();">表单控件</center>',
style : 'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;',
//设置标签对齐方式
labelAlign : 'right',
//设置标签宽
labelWidth : 170,
//设置按钮的对齐方式
buttonAlign : 'center',
//默认元素属性设置
defaults : {
width : 180
},
items : [{
fieldLabel : '文本框控件',
name : 'TextBox',
xtype : 'textfield'
//,readOnly : true //只读
//,emptyText :'请输入数据' //为空时显示的文本，注意不是value
}, {
fieldLabel : '只允许输入数字',
name : 'TextBoxNumber',
xtype : 'numberfield'
//,allowDecimals: false // 允许小数点
//,allowNegative: false, // 允许负数
//,maxValue:1000 //最大值
//,minValue:0 //最小值
}, {
fieldLabel : '下拉框控件',
name : 'DropDownList',
xtype : 'combo',
//mode : 'local',
displayField : "Name",
//设置为选项的value的字段
valueField : "Id",
//是否可以输入，还是只能选择下拉框中的选项
editable : false,
typeAhead : true,
//必须选择一项
//forceSelection: true,
//输入部分选项内容匹配的时候显示所有的选项
triggerAction : 'all',
//selectOnFocus:true,
//数据
store : new Ext.data.SimpleStore({
fields : ['Id', 'Name'],
data : [[1, '男'], [0, '女']]
})
}, {
fieldLabel : '日历控件',
xtype : 'datefield',
name : 'DateControl',
format : "Y-m-d",
editable : false
//, 默认当前日期
//value:new Date().dateFormat('Y-m-d')
}, {
fieldLabel : '单选控件',
xtype : 'radiogroup',
name : 'Radios',
items : [{
name : 'RadioItems',
boxLabel : '选我',
inputValue : '1',
checked : true
}, {
name : 'RadioItems',
boxLabel : '选我吧',
inputValue : '0'
}]
}, {
fieldLabel : '复选控件',
xtype : 'checkboxgroup',
name : 'Checkboxs'
//columns属性表示用2行来显示数据
,
columns : 2,
items : [{
name : 'CheckboxItems',
boxLabel : '香蕉',
inputValue : 'A'
}, {
name : 'CheckboxItems',
boxLabel : '苹果',
inputValue : 'B'
}, {
name : 'CheckboxItems',
boxLabel : '橘子',
inputValue : 'C'
}, {
name : 'CheckboxItems',
boxLabel : '桃子',
inputValue : 'D'
}]
}, {
fieldLabel : '文本域控件',
xtype : 'textarea',
value : '可以输好多字！',
height : 50
}, {
fieldLabel : '时间控件',
xtype : 'timefield'
//格式化输出 默认为 "g:i A"
//"g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H"
,
format : 'H:i'
//时间间隔(分钟)
,
increment : 60
}, {
fieldLabel : '标签页',
xtype : 'fieldset',
title : '标签页',
autoHeight : true,
items : [{
xtype : 'panel',
title : '标签页中的面板',
frame : true,
height : 50
}]
}, {
fieldLabel : '在线编辑器',
xtype : 'htmleditor',
width : 260,
height : 100
//以下为默认选项，其他请参照源代码
//,enableColors: false
//,enableFormat : true
//,enableFontSize : true
//,enableAlignments : true
//,enableLists : true
//,enableSourceEdit : true
//,enableLinks : true
//,enableFont : true
}],
buttons : [{
text : "保 存",
handler : function() {
MsgInfo('保存');
}
}, {
text : "取 消",
handler : function() {
form1.form.reset();
}
}]
});
function MsgInfo(str_msg) {
Ext.MessageBox.show({
title : '提示',
msg : str_msg,
width : 400,
icon : Ext.MessageBox.INFO,
buttons : Ext.MessageBox.OK
});
}
});
</script>
</form>
</body>
</html>
本文参考：http://www.cnblogs.com/over140/archive/2009/09/06/1561257.html
分享到：
相关推荐
extjs formpanel学习，秘诀，笔记
本资源包含ExtJs的API文档、笔记以及示例，帮助开发者深入理解和使用ExtJs。 首先，API文档是ExtJs开发的基础，其中包括ExtJs3.2和3.1-3.3的中文版本。这些CHM文件提供了详细的类、方法和事件的参考，有助于开发者...
ExtJS是一个开源的JavaScript库，主要用于...通过本笔记的学习，可以掌握ExtJS在前端开发中的应用，理解各个组件和管理器的使用方法，以及一些针对特定浏览器的布局技巧，为创建美观、高效的用户界面打下坚实的基础。
### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架，专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...
例如，可以创建GridPanel展示数据库数据，使用FormPanel进行表单提交，通过Ajax请求与Struts2控制器进行交互。 在整合Struts2和ExtJS4时，通常会定义JSON或XML数据源，使ExtJS能够获取和更新后端数据。Struts2 ...
在本篇笔记中，我们将探讨如何使用ExtJS5、Spring.NET和MVC技术来构建一个高效、健壮的Web应用程序。这些技术的结合为开发者提供了强大的前端交互性和后端服务管理能力，使得开发过程更为流畅。 首先，让我们深入...
在本篇Extjs学习笔记中，我们将深入探讨Extjs中的Form，特别是其封装的Ext.form.BasicForm和Ext.form.FormPanel。 首先，Extjs中的表单组件主要基于Ext.form.BasicForm，这是一个基础的表单对象，负责处理表单数据...
15. **Ext.form.FormPanel** 用于创建表单，可以配置`labelAlign`（标签对齐方式）和`defaultType`（默认组件类型），表单组件在`items:[]`中定义，每个组件有自己的属性如`fieldLabel`和`name`。 16. **Accordion...
通过使用ExtJS，开发者可以利用其组件化设计，快速搭建出功能丰富的用户界面。 2. **组件化开发**：ExtJS中的组件包括各种控件，如GridPanel（数据网格）、FormPanel（表单）、Window（窗口）、TreePanel（树形视图...
前几篇文中用到的FormPanel就是继承自Panel类的。 下面的例子展示了一个较为完整的Panel,主要是设置工具栏： 代码如下: <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>Extjs ...
13. **extJs 2.0 学习笔记**：这部分笔记涵盖了EXTJS 2.0版本的主要特性，包括Ajax的使用、数据管理基础、Panel的深入理解等，帮助开发者掌握EXTJS的基本用法。 EXTJS的学习是一个不断深入的过程，从基础组件到高级...
综上所述，这份文档虽然主要关注Grails初学者的使用说明，但也提到了使用ExtJS进行前端开发的一些内容。对于Grails的学习者来说，了解其基本概念、开发流程以及如何结合其他技术（如ExtJS）是非常有帮助的。