使用Ext Form自动绑定Html中的Form元素
2019独角兽企业重金招聘Python工程师标准>>>
Java代码
//把ext 对象绑定在Html Form元素时的ext属性中
Ext.override(Ext.Component, {
initComponent :function(){
this.on('render', function(){
if(this.el)
Ext.getDom(this.el).ext = this;
if(this.hiddenField)//Combo
Ext.getDom(this.hiddenField).ext = this;
})
}
});
//获取验证信息
// 将EXT的验证属性写成JSONString格式,保护在val属性中
$getValid = function(el){
var valid = "{}";
if(Ext.getDom(el).attributes['val'])
valid = Ext.getDom(el).attributes['val'].nodeValue;
return valid;
}
//自动绑定Html中的Form元素
$blindFormField = function(){
var objArray = Ext.DomQuery.select("input[type=submit]");
Ext.each(objArray, function(obj) {
var btn = new Ext.Button({
text : obj.value,
applyTo : obj,
handler : obj.onclick,
type : obj.type
});
btn.getEl().replace(Ext.get(obj));
});
var objArray = Ext.DomQuery.select("input[type=reset]");
Ext.each(objArray, function(obj) {
var btn = new Ext.Button({
text : obj.value,
applyTo : obj,
handler : obj.onclick,
type : obj.type
});
btn.getEl().replace(Ext.get(obj));
});
var objArray = Ext.DomQuery.select("input[type=button]");
Ext.each(objArray, function(obj) {
var btn = new Ext.Button({
text : obj.value,
applyTo : obj,
handler : obj.onclick,
type : obj.type
});
btn.getEl().replace(Ext.get(obj));
});
/**
* text and textarea and password and file
*/
var objArray = Ext.DomQuery.select("input[type=text]");
Ext.each(objArray, function(obj) {
if(Ext.getDom(obj).ext) return;
var txtField = new Ext.form.TextField(
Ext.apply({applyTo:obj},eval('('+$getValid(obj)+')'))
);
});
var objArray = Ext.DomQuery.select("input[type=password]");
Ext.each(objArray, function(obj) {
var txtField = new Ext.form.CustomTextField(
Ext.apply({applyTo:obj,inputType:'password'},eval('('+$getValid(obj)+')'))
)
});
var objArray = Ext.DomQuery.select("input[type=file]");
Ext.each(objArray, function(obj) {
});
var objArray = Ext.DomQuery.select("textarea");
Ext.each(objArray, function(obj) {
var txtArea = new Ext.form.TextArea(
Ext.apply({applyTo:obj},eval('('+$getValid(obj)+')'))
);
});
/**
* checkbox and radio
*/
var objArray = Ext.DomQuery.select("input[type=checkbox]");
Ext.each(objArray, function(obj) {
var checkbox = new Ext.form.Checkbox(
Ext.apply({applyTo:obj},eval('('+$getValid(obj)+')'))
);
});
var objArray = Ext.DomQuery.select("input[type=radio]");
Ext.each(objArray, function(obj) {
var radio = new Ext.form.Radio(
Ext.apply({applyTo:obj},eval('('+$getValid(obj)+')'))
);
});
/**
* select or comboBox
*/
var objArray = Ext.DomQuery.select("select");
Ext.each(objArray, function(obj, index) {
var select = new Ext.form.ComboBox(
Ext.apply({transform:obj,triggerAction:'all', forceSelection : true, cls:obj.className},eval('('+$getValid(obj)+')'))
);
});
/**
* number
*/
var objArray = Ext.DomQuery.select("input[type=number]");
Ext.each(objArray, function(obj) {
var dateField = new Ext.form.CustomNumberField(
Ext.apply({applyTo:obj},eval('('+$getValid(obj)+')'))
);
});
/**
* 日期类型
*/
var objArray = Ext.DomQuery.select("input[type=date]");
Ext.each(objArray, function(obj) {
var dateField = new Ext.form.CustomDateField(
Ext.apply({applyTo:obj,format:'Y-m-d',cls:obj.className},eval('('+$getValid(obj)+')'))
);
});
/**
* email类型
*/
var objArray = Ext.DomQuery.select("input[type=email]");
Ext.each(objArray, function(obj) {
var emailField = new Ext.form.TextField(
Ext.apply({applyTo:obj,vtype:'email'},eval('('+$getValid(obj)+')'))
);
});
/**
* 自定义类型
*/
var objArray = Ext.DomQuery.select("input[type=custom]");
Ext.each(objArray, function(obj) {
var m_width = $(obj).width()+7;
var houseinfoField = new Ext.form.HouseInfoArea(
Ext.apply({applyTo:obj,cls:obj.className},eval('('+obj.val+')'))
)
});
}
//验证输入的合法性
$validEl = function(el){
if(typeof(el) == "string") el = document.getElementById(el);
if(el.ext)
return el.ext.validate();
return true;
}
//验证form下所有元素输入的合法性,返回true为合法,false为不合法
$valid2form = function(form){
var valid = true;
var thefrm = form;
if(typeof(form) == "string") var thefrm = document.getElementById(form);
for (i = 0; i < thefrm.elements.length; i++){
var e = thefrm.elements[i];
if(!e.name) continue;
if(!$validEl(e)){
valid = false;
}
}
return valid;
}
Ext.onReady(function() {
setTimeout($blindFormField, 0);
})
//HTML 中的使用代码
<form id='myform' action='action.do' οnsubmit=''
<table>
<tr>
<td> 字符串:</td> <td><input type='text' id='string' name='string' val='{allowBlank:false}'/></td>
<td> 数字类型:</td> <td><input type='number' id='number' name='number' val='{allowBlank:false}'/></td>
</tr>
<tr>
<td> Email:</td> <td><input type='email' id='email' name='email' val='{allowBlank:false}'/></td>
<td> 日期类型:</td> <td><input type='date' id='date' name='date' val='{allowBlank:false}'/></td>
</tr>
<tr>
<td> Select:</td>
<td>
<select name='select'>
<option value=1>option1</option>
<option value=2>option2</option>
<option value=3>option3</option>
</select>
</td>
<td> 自定义类型:</td> <td><input type='custom' id='custom' name='custom' val='{allowBlank:false}'/></td>
</tr>
<table>
</form>
如果在页面中存在有两个name一样的情况下,以上代码在IE上执行后,第二个name将无法的元素将不被绑定,原因是在IE下面有个bug,如果某个节点的name跟你要取得节点的名字一样,这样会得到name=youid的那个节点
<input type='text' id='username_id' name='username'/>
<input type='text' id='username' name='username_temp'/>
这样执行alert(document.getElementById('username').id)的结果是username_id而不是username
解决这个BUG的方法一般情况有两种:
方法一:尽量避免在页面中出现name与id属性相同的对象
方法二:利用JavaScript的特点,重写document.getElementById
Java代码
//IE_BUG_PATCH.js
if (/msie/i.test(navigator.userAgent)){ //根据userAgent确定用户使用IE浏览器
document.nativeGetElementById = document.getElementById;
document.getElementById = function(id){
var elem = document.nativeGetElementById(id);
if(elem){
//确定id相同
if(elem.attributes['id'].value == id){
return elem;
}else{
//如果没有ID相同的,那么就遍历所有元素的集合找到id相同的元素
for(var i=1;i<document.all[id].length;i++) {
if(document.all[id][i].attributes['id'].value == id){
return document.all[id][i];
}
}
}
}
return elem;
};
};
转载于:https://my.oschina.net/u/195341/blog/203216
使用Ext Form自动绑定Html中的Form元素相关推荐
- jquery form自动绑定表单内容
$(#表单).serialize()自动绑定
- Gin 框架学习笔记(02)— 参数自动绑定到结构体
参数绑定模型可以将请求体自动绑定到结构体中,目前支持绑定的请求类型有 JSON .XML .YAML 和标准表单 form数据 foo=bar&boo=baz 等.换句话说,只要定义好结构体, ...
- 丁鹿学堂:2023前端开发vue3入门指南(vu3视图自动绑定案例解析)
vue3中数据和视图自动绑定 vue3中data中的数据,会自动和使用它的视图绑定,数据发生变化时视图会自动更细,无需我们手动操作dom 案例:创建一个按钮,记录点击次数. <!DOCTYPE ...
- [html] html5中的form怎么关闭自动完成?
[html] html5中的form怎么关闭自动完成? 设置form的autocomplete属性为off 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起 ...
- react回调函数_React中的回调中自动绑定ES6类函数
在使用ES6类的React组件时,您必须遇到这种现象,必须显式绑定类函数,然后将其传递给诸如onClick.例如,采用以下示例. import React from 'react';class MyC ...
- 跨境电商ERP中的自动化 2.平台商品和本地单品自动绑定
今天继续讲解跨境电商ERP中的自动化,这篇主要讲解平台商品和本地单品如何绑定,从而实现对本地单品库存的管理. 博客搬家啦,新地址: https://www.navisoft.com.cn 平台商品有个 ...
- java resultset 赋值_ResultSet数据自动绑定到JavaBean中 | 学步园
由于需要用jdbc写点程序,不使用Hibernate , mybatis等框架,在设置结果集到bean时相当麻烦,所以写了一个专门完成此功能的类 package com.ehl.dc.authoriz ...
- springmvc请求参数获取(自动绑定)的几种方法
1.直接把表单的参数写在Controller相应的方法的形参中,适用于get方式提交,不适用于post方式提交. /*** 1.直接把表单的参数写在Controller相应的方法的形参中* @para ...
- mvvm 自动绑定_ZK的实际应用:MVVM –表单绑定
mvvm 自动绑定 这是我们从头开始构建ZK应用程序的第二集. 上一篇文章介绍了使用MVVM将数据加载和呈现到表中. 在本文中,我们将向您介绍ZK MVVM的表单绑定. 目的 我们将构建一个" ...
最新文章
- 东南大学和山东大学计算机学院,东南大学和山东大学都是985、211哪所综合实力更强些呢?...
- 哈哈,我的Blog开通了。。。
- Ajax — cropper (图片剪裁)基本用法
- java中jsp标准动作_JavaBean和jsp标准动作
- 米熊科技:给烘培加点“云”的味道
- ubuntu下安装oracle
- weblogic问题: Unable to resolve 'jdbc.mydb'. Resolved 'jdbc'; remaining name '
- golang中获取公网ip、查看内网ip、检测ip类型、校验ip区间、ip地址string和int转换、根据ip判断地区国家运营商等
- 图的深度优先遍历和宽度优先遍历C语言,图的遍历BFS广度优先搜索
- 第二日(1)一个IDA下载地址
- rs485的1:n计算机连接和n:n的主从plc通讯,富士人机界面与GE90-70 PLC N:1通讯在轧钢生产线的应用...
- 为什么越来越多的人从开发转测试?
- include指令包含网站banner和版权信息栏
- c语言写txt文件fwrite,文件操作 fwrite,该怎么处理
- 【转摘】著名画家毕建勋 学画笔记
- Django分页,过滤:
- php steam 第三方登录,Steam第三方授权登录异常 《绝地求生》国服绑定中招
- 【自然语言处理NLP】中文语料整理【情感分析、文本分类、摘要、实体分析】
- Mac 编译运行ET6.0Demo
- 首届中国网络文学论坛
热门文章
- echarts的词云图表类型有哪些_词云图的几种制作方法评测,你pick哪款
- pygame做的著名游戏_用python写游戏之2D跑酷游戏(一)
- 微信同步通讯录服务器繁忙,企业微信同步通讯录时提示 mobile existed
- java8 同步队列_秋招之路8:JAVA锁体系和AQS抽象队列同步器
- Java项目:学生选课系统(java+javaweb+jdbc)
- 军用软件概算计价规范_工程造价五算:估算、概算、预算、结算、决算
- Swing 实现聊天系统 私发与群发
- Typora链接跳转,页内和页外
- 仿斗鱼聊天:基于CoreText的面向对象图文排版工具AWRichText
- 数据库连接池,实现及分析