`
andyjackson
  • 浏览: 58577 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

用html很好实现的功能,却在extjs中,如此蛋疼。。。

ext 
阅读更多
废话不说,先上代码:
 <form id="form_tKEim7ks" title="修改登录ID" bodyStyle="padding:5px 5px 0" url="editLogonId.dt" hidden="'$!{type}'!='logon'">
  <items>
	<container id="container_aj8Htzdm" layout="hbox" margin="5">
	  <items>
		<container flex="1" id="container_Wgp4bbAx" />
		<container flex="1" id="container_kNMePUTG">
		  <listeners><![CDATA[{
			beforerender:function(me,opt){
				Ext.apply(Ext.form.field.VTypes, {
					mobile: function (val, field) {
						var mobile=  /^[0-9]{11}$/;
						return mobile.test(val);
					},
					mobileText: '非法手机号码'
				});
			}
		  }]]></listeners>
		  <items>
			<displayfield fieldLabel="卡ID" id="displayfield_gj12axv1" value="$!{userInfo.userId}" allowBlank="false" hideLabel="false" labelAlign="right" />
			<textfield id="textfield_YdgetgEU" name="userId" value="$!{userInfo.userId}" allowBlank="false" hideLabel="false" readOnly="true" hidden="true" labelAlign="right" />
			<container id="container_ol0CtESK" layout="hbox">
			  <items>
				<displayfield fieldLabel="登录ID" id="displayfield_nqs6Gm3a" hideLabel="false" readOnly="true" labelAlign="right" />
				<container id="container_logonId">
				  <listeners><![CDATA[{
					  beforerender:function(me,opt){
						  var disabled=false;
						  #foreach($item in $logonApps)
							  var vt ='';
							  if('$item.logonType'=='手机'){vt='mobile';}
							  else if('$item.logonType'=='邮箱'){vt='email';}
							  else{vt='alphanum';}
							  me.add(new Ext.form.field.Text({
								  value: '$item.logonId',
								  id:'textfield_logonId$velocityCount',
								  allowBlank:true,
								  vtype:vt,
								  disabled:disabled
							  }));
							  Ext.getStore('arraystore_temp').add({oldLogonId:'$item.logonId'});
							  disabled=true;
						  #end
					  }
					}]]></listeners>
				</container>
				<radiogroup id="radiogroup_1" layout="column" width="50" hideLabel="false" labelAlign="right">
				  <listeners><![CDATA[{
					  beforerender:function(me,opt){
						  var i =true;
						  #foreach($item in $logonApps)
							  me.add(new Ext.form.field.Radio({
								  inputValue: '$item.logonId',
								  id:'radio_Type$velocityCount',                                         
								  boxLabel:"$item.logonType",
								  name:'logonType',
								  checked:i
							  }));
							  i=false;
						  #end
					  },
					  change:function(me,newv,oldv,opt){
						var items = me.items;
						items.each(function(item,index,length){
							var textfieldId = 'textfield_logonId'+(index+1);
							if(item.getValue()){
								Ext.getCmp(textfieldId).setDisabled(false);
							}else{
								console.log(Ext.getStore('arraystore_temp').getAt(index));
								Ext.getCmp(textfieldId).setValue(Ext.getStore('arraystore_temp').getAt(index).data.oldLogonId);
								Ext.getCmp(textfieldId).setDisabled(true);
								Ext.getCmp(textfieldId).clearInvalid();
							}
						});
					  }
					}]]></listeners>
				</radiogroup>
			  </items>
			</container>
			<textarea fieldLabel="备注" id="textarea_2" maxLength="200" name="memo" allowBlank="false" width="320" hideLabel="false" labelAlign="right" />
		  </items>
		</container>
		<container flex="1" id="container_PHlv1cJu" />
	  </items>
	</container>
  </items>
  <dockedItems>
	<toolbar dock="bottom" id="toolbar_MQsMGMoL">
	  <layout><![CDATA[{pack:"center"}]]></layout>
	  <items>
		<button id="button_3" text="确认修改">
		  <handler><![CDATA[function (button, event) {               
			var form = this.up('form').getForm();
			if (form.isValid()) {
				var items = Ext.getCmp('radiogroup_1').items;
				var logonId = '';
				var newLogonId='';
				var isModified=true;
				(function(){
					items.each(function(item,index,length){
						var textfieldId = 'textfield_logonId'+(index+1);
						if(item.getValue()){
							console.log(Ext.getCmp(textfieldId));
							newLogonId=Ext.getCmp(textfieldId).getValue();
							logonId=Ext.getStore('arraystore_temp').getAt(index).data.oldLogonId;
							if(newLogonId==logonId){
								isModified=false;
								Ext.getCmp(textfieldId).markInvalid('登录ID没有修改,请修改后再提交!');
							}
							return;
						}
					});
				})();
				alert(logonId+'+++'+newLogonId);
				if(!isModified) return false;
				return false;
				form.submit({
					params:{
						'logonId':logonId,
						'newLogonId':newLogonId
					},
					success: function (form, action) {
						var info = action.result.info;
						var title='';
						console.log(info);
						if(info.success){
							title='成功';
						}else{
							title='失败';
						}
						Ext.Msg.alert(title,info.msg);
						Ext.getStore("jsonstore_history").loadPage(1);
					}
				});
			}
		  }]]></handler>
		</button>
		<button id="button_4" text="重置">
		  <handler><![CDATA[function(button,event){
			 Ext.getCmp('textarea_2').setValue('');
			 var store = Ext.getStore('arraystore_temp');
			 for(var i=0;i<store.count();i++){
				var textfieldId = 'textfield_logonId'+(i+1);
				Ext.getCmp(textfieldId).setValue(Ext.getStore('arraystore_temp').getAt(i).data.oldLogonId);
			 }
		  }]]></handler>
		</button>
	  </items>
	</toolbar>
  </dockedItems>
</form>

实现功能如下图:
所有这一切都是纠结的radiogroup惹得祸
  • 大小: 5.9 KB
  • 大小: 7 KB
  • 大小: 7.6 KB
分享到:
评论

相关推荐

    ExtjS实现聊天功能

    在这个"ExtJS实现聊天功能"的项目中,我们将探讨如何利用ExtJS框架构建一个类似于QQ的聊天应用程序。 首先,我们要理解聊天功能的核心要素。一个基本的聊天应用通常包含以下部分: 1. **用户界面**:ExtJS提供了...

    extjs中文文档大全

    在使用过程中,要特别注意ExtJS的MVC(Model-View-Controller)架构,这是其设计的一大亮点。通过模型管理数据,视图展示数据,控制器协调两者,可以使代码结构清晰,易于维护。此外,利用Data Binding功能,可以...

    extjs中本地照片预览、blob数据在oracle中存取

    环境为java,struts2,extjs...没有完全实现的是extjs用uploadfild控件实现的blob数据上传预览,并且尝试了用formFile上传文件、和smart组件上传,但两者在我的环境里还有问题,大家可以改进一下,本人觉得有总比没有强哈

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    这个“ExtJS3.3中文API.CHM”文档是为中文用户特别准备的,帮助他们更好地理解和使用ExtJS 3.3的各种功能。 CHM文件,全称是Microsoft Compiled HTML Help,是微软推出的一种帮助文件格式,它将HTML文件打包成单一...

    Extjs6中Combobox实现下拉多选

    该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能

    ExtJS4中Desktop独立源代码+功能扩充

    综上所述,"ExtJS4中Desktop独立源代码+功能扩充"为开发者提供了一个学习和研究Web桌面应用开发的宝贵资源,涵盖了从基础组件使用到复杂功能实现的全方位知识。通过深入研究,开发者不仅可以提升ExtJS技术能力,还能...

    ExtJS实现Excel导出

    在ExtJS中实现Excel导出通常涉及到以下几个关键步骤: - **数据收集**:首先,需要从服务器或本地数据源获取待导出的数据。这可以通过Ajax请求或其他数据获取方式实现。 - **数据格式化**:获取到的数据需要...

    中文的Extjs的api手册

    **ExtJS API中文手册**是学习和使用ExtJS的重要参考资料,尤其是在没有英文阅读基础的情况下。手册中涵盖了ExtJS 3.3的所有类、方法、事件、属性和配置选项,对于开发者来说是不可或缺的工具。 1. **组件系统**:...

    ExtJS实现Excel的导出功能(poi)

    在本文中,我们将探讨如何使用ExtJS框架配合Apache POI库来实现Excel的导出功能。ExtJS是一个强大的JavaScript库,专门用于构建富客户端应用程序,它提供了丰富的组件和功能,而无需关注后端技术。Apache POI是Java...

    extjs实现的带标签、翻页动画的书

    在本项目中,“extjs实现的带标签、翻页动画的书”显然利用了ExtJS的组件化特性和动画功能,创建了一个模拟真实书籍阅读体验的应用。 首先,我们来看看“标签”这一概念。在Web应用中,标签(Tab)通常用来组织和...

    ssh整合实现登录的例子,包含源代码,用extjs做的登录界面

    在这个例子中,我们将深入探讨如何利用SSH整合来实现一个登录功能,并且这个功能的前端界面是通过ExtJS库创建的。 1. **Spring框架**:Spring是核心的依赖注入(DI)和面向切面编程(AOP)框架,它管理着应用中的...

    extjs中文帮助文档和英文api

    ExtJS是一种基于JavaScript的前端开发框架,用于构建富互联网应用程序(RIA)。它的API文档是开发者进行编程时的重要参考资料。这份“extjs中文帮助文档...利用好这两份资源,将使你在ExtJS开发的道路上更加得心应手。

    绝对好用!extjs中本地照片预览、blob数据在oracle中存取.zip

    没有完全实现的是extjs用uploadfild控件实现的blob数据上传预览,并且尝试了用smart组件上传,但在我的环境里还有问题,大家可以改进一下,本人觉得有总比没有强哈 有问题的可以加qq群103684733

    extjs实现增删查改

    在“extjs实现增删查改”这个主题中,我们将探讨如何使用ExtJS来实现基本的数据操作功能。 首先,增删查改(CRUD,Create, Read, Update, Delete)是任何数据管理应用的核心功能。在ExtJS中,我们可以利用Grid ...

    extjs3.0中文API

    ExtJS 3.0中文API文档是对于这个版本的详细说明,帮助中国开发者理解和使用其各种功能。 首先,我们要理解API(Application Programming Interface)是什么。API是一组预定义的函数、类、对象和常量,允许开发人员...

    ExtJs 实例+ExtJs中文教程(学习extjs必备)

    通过学习这些实例,你可以更好地理解如何在实际项目中应用ExtJs,例如如何创建网格(Grid)、表单(Form)、树形视图(Tree)、面板(Panel)等。实例通常包括完整的HTML、CSS和JavaScript代码,以及详细的解释,...

    extjs实现动态树

    在ExtJS中,这种功能主要通过`Ext.tree.TreePanel`或其现代版本`Ext.tree.View`来实现。 一、ExtJS 动态树基础 1. `Ext.tree.TreePanel`:这是ExtJS中用于创建树形结构的主要组件。它具有丰富的配置项和事件,支持...

    ExtJS之实现华丽的皮肤主题更换

    extjs的默认皮肤很好看 但是我们还可以变换样式切换其他皮肤  1 直接添加其他css文件换肤 好多皮肤上网就可以收到的  如皮肤文件:xtheme olive zip下载  把皮肤文件解压 把css文件 如xtheme olive css 拷贝到...

    extjs模拟excel表格

    在本文中,我们将深入探讨如何使用ExtJS来模拟Excel表格,以及实现Excel的各种功能。 首先,ExtJS中的GridPanel组件是实现模拟Excel表格的核心。GridPanel允许我们展示大量数据,并提供了诸如排序、过滤、分页等...

Global site tag (gtag.js) - Google Analytics