【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"
}]
}
效果图如下：
【ExtJs】 ExtJs4.2 基本表单组件的使用的更多相关文章
- reactjs入门到实战（八）----表单组件的使用
表单组件支持几个受用户交互影响的属性: value,用于 <input>.<textarea> 组件. checked,用于类型为 checkbox 或者 radio 的 &l ...
- ReactJS实用技巧（2）：从新人大坑——表单组件来看State
不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...
- 【form】 表单组件说明
form表单组件 1)将form组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/ ...
- 通过html()的方法获取文本内容， form表单组件显示的值与获取到的值不一致的问题
我在通过 html()获取对应节点的内容,发现一个问题,获取到的 form表单组件的内容值是初始加载的值,而不是经过用户修改后的值.例如页面加载时组件<input type="text ...
- 如何实现Ant design表单组件封装？
目标:自己实现一个antd表单组件 先看下Ant Design官网上给出的表单组件用法: import React, { Component } from 'react' import { Form, ...
- django基础之day09，创建一个forms表单组件进行表单校验，知识点：error_messages，label，required，invalid，局部钩子函数，全局钩子函数， forms_obj.cleaned_data，forms_obj.errors，locals()， {{ forms.label }}:{{ forms }}，{{ forms.errors.0 }}
利用forms表单组件进行表单校验,完成用户名,密码,确认密码,邮箱功能的校验 该作业包含了下面的知识点: error_messages,label,required,invalid,局部钩子函数,全 ...
- 使用iview 的表单组件验证 Upload 组件
使用iview 的表单组件验证 Upload 组件 结果: 点击提交按钮, 没有填的form 项, 提示错误, 当填入数据后提示验证成功 代码: <template> <div id ...
- 文档驱动 —— 表单组件（五）：基于Ant Design Vue 的表单控件的demo，再也不需要写代码了。
源码 https://github.com/naturefwvue/nf-vue3-ant 特点 只需要更改meta,既可以切换表单 可以统一修改样式,统一升级,以最小的代价,应对UI的升级.切换,应 ...
- 文档驱动 —— 表单组件（六）：基于AntDV的Form表单的封装，目标还是不写代码
开源代码 https://github.com/naturefwvue/nf-vue3-ant 也不知道大家是怎么写代码的,这里全当抛砖引玉 为何封装? AntDV非常强大,效果也非常漂亮,功能强大, ...
随机推荐
- python学习之str.lstrip()
str.lstrip([chars]) 删除从开头开始指定的字符串,然后返回结果字符串. >>> '://www.example.com'.lstrip('w://') '.exam ...
- nyoj123 士兵杀敌（四）树状数组 插线问点
士兵杀敌(四) 时间限制:2000 ms | 内存限制:65535 KB 难度:5 描述 南将军麾下有百万精兵,现已知共有M个士兵,编号为1~M,每次有任务的时候,总会有一批编号连在一起人请战(编 ...
- Install haroopad on centos7
1.Install libs sudo yum install systemd-libs -y 2.Download haroopad goto haroopad1 download bin pack ...
- 【Java】代理模式，静态代理和动态代理（基于JDK或CGLib）
当我们需要在一个方法之前或之后添加一段逻辑时,自然会想到使用代理类.代理类帮我们代理了实际类的调用,然后可以在实际调用之前和之后添加一些逻辑,从而不浸入实际类. 拓展:由于代理类能在实际类调用之前和之 ...
- innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解
innerHTML属性用来读取或设置某个节点内的HTML代码. outerHTML属性用来读取或设置HTML代码时,会把节点本身包括在内. textContent属性用来读取或设置节点包含的文本内容. ...
- GNU风格 ARM汇编语法4
.GNU汇编语言定义入口点 汇编程序的缺省入口是_start标号,用户也可以在连接脚本文件中用ENTRY标志指明其它入口点. 例:定义入口点 .section .data < initializ ...
- oracle判断查询结果是否为空
create table test1023(id int); --创建测试表 test1023 declare cnt int; begin select count(*) into cnt from ...
- [转]SQL Server 2012 的 T-SQL 新功能 – 新的数据分析函数（LEAD、LAG）
当您需要在 SQL Server 中利用 T-SQL 比较结果集的每一列跟前一列或后一列的差异时,在过去可能需要利用 CURSOR 搭配临时表变量,或是透过递归 CTE 来达到这个效果,如今 SQL ...
- Log4php 使用心得
使用log4php 记录系统日志: 1.自动拦截php报出的错误,写日志 2.手动打印错误 set_error_handler('captureNormal',E_ERROR | E_PARSE); ...
- Smack 广播
格式 Message message = new Message("all@broadcast.192.168.1.253"); 使用openfire的广播功能首先需要在插件的页面 ...