form是开发中页面最经常用到的元素了,它的功能就是和用户交互,把用户输入的参数发送到后台,以及根据后台的处理结果执行进一步的操作;现在把Ext中的form总结如下(代码形式):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试001.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../scripts/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="../scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../scripts/ext/ext-all.js"></script>
<script type="text/javascript" src="../scripts/ext/examples.js"></script>
<script type="text/javascript" src="../scripts/ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
var testForm;
var testWindow;
function doSubmit(){
alert("提交信息");
//表单提交代码
testWindow.getComponent('testform').form.submit({
url:'../addStudent.do?date'+new Date(),
method:'post'
});
}
function createForm(){
testForm=new Ext.FormPanel({
id:'testform',
name:'testform',
frame:true, //显示边界,保留蓝色背景,否则为元素为白色
width:400,
height:400,
items:[{
xtype:'fieldset',
title:'学生基本信息',
id:'stuinfo',
name:'stuinfo',
width:400,
height:200,
/*为了保证不同浏览器之间的兼容性,最好把form的autoWidth和autoHeight两个属性都设为true*/
collapsible:true,
items:[
//一个普通的输入域
{
xtype:'textfield',
fieldLabel:'名字008',
name:'name',
id:'name',
value:'http://',
anchor:'95%'
},
{
xtype:'textfield',
fieldLabel:'性别',
id:'sex',
name:'sex',
anchor:'95%'
},
{ xtype:'datefield',
fieldLabel:'出生年月',
id:'birthday',
name:'birthday',
format:'Y-m-d',
anchor:'95%'
},
{
xtype:'textfield',
fieldLabel:'号码',
id:'passport',
name:'passport',
anchor:'95%'
}
]
}],
buttons:[
{
text:'提交',
handler:doSubmit
//单击按纽后的事件函数
},{
text:'清空'
}
],
keys:[
//快捷键设置
{
key:Ext.EventObject.ENTER,
fn:doSubmit,
scope:this
}]
});
testWindow=new Ext.Window({
id:'testwindow',
name:'testwindow',
width:testForm.width,
//height:testForm.width,
modal:true, //当本窗口是子窗口时候,则当本窗口弹出时候,父窗口不可以编辑
items:[testForm],
onEsc:function(){
alert("关闭了");
}
});
testWindow.show();
}
Ext.onReady(function(){
createForm();
});
</script>
</head>
<body>
</body>
</html>
最后总结一下Form中各个元素的常用属性:
1 一般的输入域
{
xtype:'textfield',
fieldLabel:'用户名',
id:'edit_SPID',
name:'operatorId',
allowBlank:false, //是否允许为空
vtype:'prolate_alphanum', //输入的格式限制,Ext自带的有url等格式
vtypeText:'请您输入A-Z,a-z,0-9的字母数字组合!', //当输入不合法时候的提示
minLength:4, 最少限制
minLengthText:'请您输入最少4个字符！', 少于最少限制时候的提示
maxLength:20,
maxLengthText:'请您输入最多20个字符！',
anchor:'90%' //占据form的比例 }
2 密码域
{
xtype:'textfield',
fieldLabel:'密码',
id:'edit_SPIP',
name:'operatorPassword',
inputType:'password',
minLength:6, minLengthText:'请您输入最少6个字符！',
maxLength:20, maxLengthText:'请您输入最多20个字符！',
allowBlank:false,
vtype:'prolate_alphanum',
vtypeText:'请您输入A-Z,a-z,0-9的字母数字组合!',
anchor:'90%' }]
3 日期域
{
xtype:'datefield',
fieldLabel: mustFill+'完成时间',
id:'finishedBeforeId',
name: 'finishedBefore',
format: 'Y-m-d',
allowBlank:false,
anchor:'90%'
}
4 下拉框
{
xtype:'combo',
id:'urgentLevel',
hiddenName: 'urgentLevelId',
store: pub_UrgentLevelStore,
fieldLabel: mustFill+'紧急程度',
loadingText:'正在加载...',
displayField:'urgentDesc',
valueField:'urgentCode',
mode:'local',
emptyText: '请选择紧急程度...',
triggerAction:'all',
editable:true,
selectOnFocus:true,
forceSelection:true,
allowBlank:false,
anchor:'90%'
}
5 文本编辑域
{
xtype:'htmleditor',
fieldLabel:'工单内容',
id: 'contentId',
name: 'content',
height:200,
anchor:'90%'
}
6 文本域
...
{
xtype:
"
textarea
"
,
name:
"
intro
"
,
fieldLabel:
"
简介
"
}
7 数字域:
{
xtype:'numberfield',
fieldLabel:'号码',
id:'passport',
name:'passport',
anchor:'95%'
}
8 隐藏域
{ xtype:'hidden',
fieldLabel:'公司名称',
id:'companyId',
name:'companyId',
value:isNULL(record,'companyId'),
anchor:'95%'}
其他:
01 提示窗口
Ext.MessageBox.confirm
('提示信息','确定要删除吗',function(btn){
if(btn=='yes'){
alert("准备删除了");
}
});
02 刚打开窗口时候不检测(如必填字段初始是不显示特别颜色等)
editCompanyForm.getForm().reset();
03 如果form中的控件显示出现了问题(如combox等),则可以在<script ...>后面(也就是给内容相当与一个函数),加多一句:
Ext.BLANK_IMAGE_URL = '../scripts/ext/resources/images/s.gif';
04 等待过程友好显示
Ext.MessageBox.show({title:"提示",msg:"正在处理您的请求，请稍候...",progress:true,width:300,wait:true,waitConfig:{interval:500},closable:true});
如果 要隐藏则调用Ext.MessageBox.hide();
分享到：
相关推荐
【疾病分类】 GUI SVM大脑疾病（脑瘤）和神经疾病（动脉瘤）分类【含Matlab源码 4093期】
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
HC200-10标定版描述文件及标定版ps文件
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
顾客模具验收鉴定报告.doc
2020年度SaaS企业 TOP100.docx
9培训申请单.xls
23数据技术 森林火灾预测系统 高品琦 商业计划书.docx
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
风险与机会评价与应对策划表.xls
31客户满意度汇总表.xls
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
与大学团队合作，设计一个包含 Raspberry Pi、摄像头模块和基于 YOLOv5 的对象检测算法的系统。• 开发了能够识别和分类各种交通标志的实时交通标志检测和分类系统
python读取excel数据 python读取excel到数据库中，简单的数据库管理脚本
成本中心领（退）料单.XLS
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作