当前位置: 代码迷 >> HTML/CSS >> 用html良好实现的功能,却在extjs中,如此蛋疼。
  详细解决方案

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

热度:207   发布时间:2012-11-04 10:42:42.0
用html很好实现的功能,却在extjs中,如此蛋疼。。。
废话不说,先上代码:
 <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惹得祸
  相关解决方案