ExtJS笔记----FormPanel的使用

最新推荐文章于 2024-04-24 09:22:16 发布

iteye_5117

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量86

点赞数

分类专栏： Js/Web 文章标签： ext javascript html ViewUI

本文链接：https://blog.csdn.net/iteye_5117/article/details/82310982

版权

Js/Web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、效果图
　　　　先用美图勾引那些驻足观望之人：
[img]http://images.cnblogs.com/cnblogs_com/over140/2009/9/2009-9-6_1.PNG[/img]
二、代码讲解
[color=blue]注意代码中的EXT js引入路径，需要根据你的实际情况进行引入，否者可能出现错误[/color]

<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

iteye_5117

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS笔记----FormPanel的使用

一、效果图　　　　先用美图勾引那些驻足观望之人：[img]http://images.cnblogs.com/cnblogs_com/over140/2009/9/2009-9-6_1.PNG[/img]二、代码讲解[color=blue]注意代码中的EXT js引入路径，需要根据你的实际情况进行引入，否者可能出现错误[/color][code="javascript"]...
复制链接

扫一扫