您的位置：首页 > Web前端 > JavaScript

【ExtJs】 ExtJs4.2 基本表单组件的使用

2015-12-30 15:32 543 查看

包含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"
}]
}

效果图如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航