废话不说,先上代码:
<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框架构建一个类似于QQ的聊天应用程序。 首先,我们要理解聊天功能的核心要素。一个基本的聊天应用通常包含以下部分: 1. **用户界面**:ExtJS提供了...
在使用过程中,要特别注意ExtJS的MVC(Model-View-Controller)架构,这是其设计的一大亮点。通过模型管理数据,视图展示数据,控制器协调两者,可以使代码结构清晰,易于维护。此外,利用Data Binding功能,可以...
环境为java,struts2,extjs...没有完全实现的是extjs用uploadfild控件实现的blob数据上传预览,并且尝试了用formFile上传文件、和smart组件上传,但两者在我的环境里还有问题,大家可以改进一下,本人觉得有总比没有强哈
这个“ExtJS3.3中文API.CHM”文档是为中文用户特别准备的,帮助他们更好地理解和使用ExtJS 3.3的各种功能。 CHM文件,全称是Microsoft Compiled HTML Help,是微软推出的一种帮助文件格式,它将HTML文件打包成单一...
该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能
综上所述,"ExtJS4中Desktop独立源代码+功能扩充"为开发者提供了一个学习和研究Web桌面应用开发的宝贵资源,涵盖了从基础组件使用到复杂功能实现的全方位知识。通过深入研究,开发者不仅可以提升ExtJS技术能力,还能...
在ExtJS中实现Excel导出通常涉及到以下几个关键步骤: - **数据收集**:首先,需要从服务器或本地数据源获取待导出的数据。这可以通过Ajax请求或其他数据获取方式实现。 - **数据格式化**:获取到的数据需要...
**ExtJS API中文手册**是学习和使用ExtJS的重要参考资料,尤其是在没有英文阅读基础的情况下。手册中涵盖了ExtJS 3.3的所有类、方法、事件、属性和配置选项,对于开发者来说是不可或缺的工具。 1. **组件系统**:...
在本文中,我们将探讨如何使用ExtJS框架配合Apache POI库来实现Excel的导出功能。ExtJS是一个强大的JavaScript库,专门用于构建富客户端应用程序,它提供了丰富的组件和功能,而无需关注后端技术。Apache POI是Java...
在本项目中,“extjs实现的带标签、翻页动画的书”显然利用了ExtJS的组件化特性和动画功能,创建了一个模拟真实书籍阅读体验的应用。 首先,我们来看看“标签”这一概念。在Web应用中,标签(Tab)通常用来组织和...
在这个例子中,我们将深入探讨如何利用SSH整合来实现一个登录功能,并且这个功能的前端界面是通过ExtJS库创建的。 1. **Spring框架**:Spring是核心的依赖注入(DI)和面向切面编程(AOP)框架,它管理着应用中的...
ExtJS是一种基于JavaScript的前端开发框架,用于构建富互联网应用程序(RIA)。它的API文档是开发者进行编程时的重要参考资料。这份“extjs中文帮助文档...利用好这两份资源,将使你在ExtJS开发的道路上更加得心应手。
没有完全实现的是extjs用uploadfild控件实现的blob数据上传预览,并且尝试了用smart组件上传,但在我的环境里还有问题,大家可以改进一下,本人觉得有总比没有强哈 有问题的可以加qq群103684733
在“extjs实现增删查改”这个主题中,我们将探讨如何使用ExtJS来实现基本的数据操作功能。 首先,增删查改(CRUD,Create, Read, Update, Delete)是任何数据管理应用的核心功能。在ExtJS中,我们可以利用Grid ...
ExtJS 3.0中文API文档是对于这个版本的详细说明,帮助中国开发者理解和使用其各种功能。 首先,我们要理解API(Application Programming Interface)是什么。API是一组预定义的函数、类、对象和常量,允许开发人员...
通过学习这些实例,你可以更好地理解如何在实际项目中应用ExtJs,例如如何创建网格(Grid)、表单(Form)、树形视图(Tree)、面板(Panel)等。实例通常包括完整的HTML、CSS和JavaScript代码,以及详细的解释,...
在ExtJS中,这种功能主要通过`Ext.tree.TreePanel`或其现代版本`Ext.tree.View`来实现。 一、ExtJS 动态树基础 1. `Ext.tree.TreePanel`:这是ExtJS中用于创建树形结构的主要组件。它具有丰富的配置项和事件,支持...
extjs的默认皮肤很好看 但是我们还可以变换样式切换其他皮肤 1 直接添加其他css文件换肤 好多皮肤上网就可以收到的 如皮肤文件:xtheme olive zip下载 把皮肤文件解压 把css文件 如xtheme olive css 拷贝到...
在本文中,我们将深入探讨如何使用ExtJS来模拟Excel表格,以及实现Excel的各种功能。 首先,ExtJS中的GridPanel组件是实现模拟Excel表格的核心。GridPanel允许我们展示大量数据,并提供了诸如排序、过滤、分页等...