Ext学习笔记(6):FormPanel 的Demo

最新推荐文章于 2021-02-27 11:56:27 发布

洛枫偃月

最新推荐文章于 2021-02-27 11:56:27 发布

阅读量642

点赞数

分类专栏： Js/Jquery

本文链接：https://blog.csdn.net/zgs_shmily/article/details/11172467

版权

Js/Jquery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
  <!-- Ext表单Demo -->
<script src="js/ext-all.js"></script>
<link href="css/ext-theme-gray-all.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">

	Ext.onReady(function() {
		var states = Ext.create('Ext.data.Store', {
		    fields: ['abbr', 'name'],
		    data : [
		        {"abbr":"AL", "name":"Alabama"},
		        {"abbr":"AK", "name":"Alaska"},
		        {"abbr":"AZ", "name":"Arizona"}
		    ]
		});
		Ext.create('Ext.form.Panel', {
		    title: 'Ext 表单',
		    bodyPadding: 5,
		    width: 350,

		    // The form will submit an AJAX request to this URL when submitted
		    url: 'UserAction_addMessage.action',

		    // Fields will be arranged vertically, stretched to full width
		    layout: 'anchor',
		    defaults: {
		        anchor: '100%'
		    },
		    draggable:true,//允许拖动
		    // The fields
		    defaultType: 'textfield',
		    items: [{
		        fieldLabel: '用户名',
		        name: 'username',
		        //disabled:true,
		        allowBlank: false,/* 是否允许为空,默认为false */
		        emptyText:'Hello Ext',/*空表单填入的提示信息*/
		        blankText:'不能为空！'/*文本框为空时的提示  */
		    },{
		        fieldLabel: '密码',
		        name: 'password',
		        allowBlank: false,
		        blankText:'不能为空！'
		    },{
		        fieldLabel: '邮箱',
		        name: 'email',
		        allowBlank: false,
		        blankText:'不能为空！',
		        vtype:'email',/* 表单内容的类型  alpha/alphanum/email/url*/
		        vtypeText:'不是正确的邮箱格式！'/* 不符合类型的提示信息 */
		    },{/* 时间 */
		        xtype: 'timefield',
		        name: 'timeinday',
		        fieldLabel: '时间',
		        minValue: '6:00 AM',
		        maxValue: '8:00 PM',
		        increment: 30,/* 增量 */
		        anchor: '100%',/* 表单宽度 */
		        allowBlank: false
		    },{/* 内容区 */
		    	fieldLabel: '详细内容',
		        xtype     : 'textareafield',
		        grow      : true,
		        name      : 'message',
		        anchor    : '100%'
		    }, {/* 日期 */
		        xtype: 'datefield',
		        anchor: '100%',
		        fieldLabel: '日期',
		        name: 'time',
		        format: 'Y/m/d|h:m:s',
		        value: new Date()  // defaults to today
		    },{/* 数值文本框 */
		        xtype: 'numberfield',
		        anchor: '100%',
		        name: 'bottles',
		        fieldLabel: '金额',
		        value:100,
		        step: 2,/* 步长 */
		        maxValue: 100,
		        minValue: 0
		    },{/* 单选按钮 */
		    	xtype: 'fieldcontainer',
		        defaultType: 'radiofield',
		        layout: 'hbox',
		    	fieldLabel: '性别',
		        items: [
		                {
		                    boxLabel  : '男',
		                    name      : 'sex',
		                    inputValue: '男',
		                    id        : 'radio1',
		                    checked:true
		                }, {
		                    boxLabel  : '女',
		                    name      : 'sex',
		                    inputValue: '女',
		                    id        : 'radio2'
		                }]
		    },{/* html编辑器 */
		        xtype: 'htmleditor',
		        enableColors: true,/* 开启颜色控制，其余的开启详细见API */
		        enableAlignments:true,/* Enable the left, center, right alignment buttons 默认为true */
		        fontFamilies:['Courier New', 'Times New Roman','微软雅黑','宋体','华文新魏'],/* 设置字体 */
	            name:'html'
		    }, {/* 多选按钮 */
	            xtype: 'fieldcontainer',
	            fieldLabel: '多选',
	            defaultType: 'checkboxfield',
	            name:'feel',
	            layout: 'hbox',
	            items: [
	                {
	                    boxLabel  : '中',
	                    name      : 'feel',
	                    inputValue: '中',
	                    id        : 'checkbox1'
	                }, {
	                    boxLabel  : '不中',
	                    name      : 'feel',
	                    inputValue: '不中',
	                    checked   : true,
	                    id        : 'checkbox2'
	                }, {
	                    boxLabel  : '无所谓',
	                    name      : 'feel',
	                    inputValue: '无所谓',
	                    id        : 'checkbox3'
	                }
	            ]
	        },{/* 下拉框 */
		    	 xtype: 'combo',
		    	 fieldLabel: '下拉框',
		    	 store: states,
		    	 queryMode: 'local',
		    	 displayField: 'name',/* 显示的候选项 */
		    	 valueField: 'abbr',/* 提交的表单值 */
			     name:'slect'
		    }],

		    // Reset and Submit buttons
		    buttons: [{
		        text: '重置',
		        handler: function() {
		            this.up('form').getForm().reset();
		        }
		    }, {
		        text: '提交',
		        formBind: true, //当表单检验有效时才能启用绑定(默认为false)
		        disabled: true, //表单检验有效时会变为false
		        handler: function() {
		            var form = this.up('form').getForm();
		            if (form.isValid()) {
		                form.submit({
		                	waitMsg :'正在提交...',
		                	waitTitle:'温馨提示',
		                    success: function(form, a) {
			                    /* a是一个Object,其中a.result包含action返回的json字符串 
			                       a.result.x(x即为返回的字符串的名字)
			                    */
		                       Ext.Msg.alert('Success', a.result.showMessage);
		                    },
		                    failure: function(form, a) {
		                        Ext.Msg.alert('Failed', a.result.showMessage);
		                    }
		                });
		            }
		        }
		    }],
		    renderTo :  Ext.DomQuery.selectNode("div[@id='Form']")
		});

	});
</script>
</head>
<body>

	<br>
	<div id="Form" style="margin-left: 100px;"></div>
	<br>

	
</body>
</html>

洛枫偃月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext学习笔记(6):FormPanel 的Demo

var states = Ext.create('Ext.data.Store', { fields: ['abbr', 'name'], data : [ {"abbr":"AL", "name":"Alabama"}, {"abbr":"AK", "name":"Alaska"}, {"abbr":"AZ", "name
复制链接

扫一扫

专栏目录