【ExtJs】 ExtJs4.2 基本表单组件的使用
包含ExtJs 基本的组件radioGroup,ComboBox,File,NumberField...
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2015/12/30 0030 Time: 13:35 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <jsp:include page="resource.jsp"></jsp:include> <title>表单常用组件</title> </head> <body> <script type="text/javascript"> Ext.onReady(function(){ //tore 也可以加载内部指定的数据. 在内部, Store 将我们传入的对象作为data,转换为Model实例。 Ext.define('Movie', { extend: 'Ext.data.Model', fields: [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'}, {name: 'url', type: 'string'} ] }); //加载一个嵌套的数据集合(nested dataset)并可以让Reader自动的生成相关的model var states = Ext.create("Ext.data.Store",{ model: 'Movie', proxy: { type: 'ajax', url: 'movie.json',//指定的链接 reader: { type: 'json', root: 'movies' } }, autoLoad: true }); var form = new Ext.form.Panel({ title: '基本表单', bodyPadding: 5, width: 750, // 表单域 Fields 将被竖直排列, 占满整个宽度 layout: 'anchor', defaults: { anchor: '100%' }, url:"form.jsp",//提交至指定的url // The fields defaultType: 'textfield', items: [{ fieldLabel: '用户名', name: 'name', allowBlank: false,//是否为空 blankText:'用户名不能为空' },{ fieldLabel: '密码', name: 'passwd', inputType:'password', allowBlank: false, blankText:"密码不能为空" },{ fieldLabel:"性别", xtype: 'radiogroup', columns:2,//两列 vertical: false, items: [ { boxLabel: '男', name: 'sex', inputValue: '1',disabled:true },//一组Ext.form.Radio对象 { boxLabel: '女', name: 'sex', inputValue: '2', checked: true} ] }, { fieldLabel: '喜欢的电影类型', store: states, name:'movieType', xtype:"combo", queryMode: 'local', displayField: 'name', valueField: 'id', renderTo: Ext.getBody() }, { xtype: 'checkboxgroup', fieldLabel: '爱好', columns: 3, vertical: true, items: [ { boxLabel: 'IT', name: 'fav', inputValue: '1' }, { boxLabel: '美女', name: 'fav', inputValue: '2', checked: true }, { boxLabel: '建筑', name: 'fav', inputValue: '3' }, { boxLabel: '新闻', id:"news", name: 'fav', inputValue: '4',handler:getCheckBox},// 点击后触发的事件 { boxLabel: '体育', name: 'fav', inputValue: '5' }, { boxLabel: '军事', name: 'fav', inputValue: '6' }, { boxLabel: '亲子', name: 'fav', inputValue: '7' } ] },{ xtype: 'datefield', fieldLabel: '出生日期', name: 'birth', editable:false //value: new Date() // 设置默认值 },{ xtype: 'numberfield', anchor: '100%', name: 'salary', fieldLabel: '薪水', value: 4999, // maxValue: 99999, minValue: 0 },{ xtype: 'filefield', name: 'resume', fieldLabel: '个人简历', labelWidth:70, msgTarget: 'side', allowBlank: false, anchor: '100%', buttonText: '选择要上传的文件' },{ xtype: 'htmleditor', fieldLabel: '个人评价', name:"personal", enableColors: true,//启用选择颜色按钮 enableFont:true,//启用选择字体按钮 enableAlignments: true,//启用样式对齐按钮 enableLinks : true,// 启用链接创建按钮,默认为true createLinkText: '创建超链接',//创建连接的提示信息 value:"<b>ExtJs基础学习</b>", fontFamilies:['宋体','隶书','黑体']//字体列表 }], // 重置 和 保存 按钮. buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '保存', formBind: true, //only enabled once the form is valid disabled: true, handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ success: function(form, action) { Ext.Msg.alert('保存成功', action.result.msg); }, failure: function(form, action) { Ext.Msg.alert('操作失败', action.result.msg); } }); } } }], renderTo: Ext.getBody() }); function getCheckBox(){ Ext.Msg.alert("提示","你不能选择该选项"); Ext.getCmp("news").setValue(""); } }); </script> </body> </html>
movie.json:
{
"movies": [{
"id": 1,
"name": "恐怖片",
"url":"http://www.google.com"
},
{
"id": 2,
"name": "科幻片",
"url":"http://www.baidu.com"
},
{
"id":3,
"name": "喜剧片",
"url":"http://www.xj.com"
}]
}
效果图如下：
