ExtJs的radiogroup的使用

/**
 * 支付渠道管理详细
 *
 * @param {}
 *            title
 * @param {}
 *            record
 * @param {}
 *            readonly
 * @param {}
 *            store
 */
function showConnCfgDetail(title, record, store) {

	var secondForm = new Ext.form.FormPanel({
		region : 'center',
		collapsible : false,
		border : true,
		labelWidth : 60, // 标签宽度
		autoScroll : true,
		labelAlign : 'right', // 标签对齐方式
		bodyStyle : 'padding:5 5 0', // 表单元素和表单面板的边距
		buttonAlign : 'center',
		height : document.body.clientHeight - 400,
		items : [{
					layout : 'column',
					xtype : 'fieldset',
					title : '基础信息',
					anchor : '98%',
					autoHeight : true,
					border : true,
					items : [{
								columnWidth : .33,
								layout : 'form',
								labelWidth : 120, // 标签宽度
								defaultType : 'textfield',
								border : false,
								items : [{
											fieldLabel : '渠道连接ID',
											name : 'connId',
											xtype : 'textfield', // 设置为文字输入框类型
											readOnly : true,
											anchor : '100%'
										}, new Ext.form.ComboBox({
													hiddenName : 'connType',
													fieldLabel : '连接类型',
													triggerAction : 'all',
													store : CONNTYPEStore,
													displayField : 'text',
													valueField : 'value',
													mode : 'local',
													forceSelection : true, // 选中内容必须为下拉列表的子项
													editable : false,
													typeAhead : true,
													resizable : true,
													anchor : '100%'
												}), {
											fieldLabel : 'URL编码', // 标签
											xtype : 'textfield',
											name : 'charSet', // name:后台根据此name属性取值
											anchor : '100%'
										}, {
											fieldLabel : '代替连接ID', // 标签
											xtype : 'textfield',
											name : 'replaceConnId', // name:后台根据此name属性取值
											anchor : '100%'
										}, {
											fieldLabel : '连接超时时间', // 标签
											xtype : 'textfield',
											name : 'connTimeOut', // name:后台根据此name属性取值
											anchor : '100%'
										}, {
											fieldLabel : '操作员',
											name : 'operId',
											xtype : 'textfield', // 设置为文字输入框类型
											readOnly : true,
											anchor : '100%'
										}]
							}, {
								columnWidth : .33,
								layout : 'form',
								labelWidth : 120, // 标签宽度
								defaultType : 'textfield',
								border : false,
								items : [{
											fieldLabel : '渠道代码',
											name : 'channelCode',
											xtype : 'textfield', // 设置为文字输入框类型
											readOnly : true,
											anchor : '100%'
										}, {
											fieldLabel : '访问方式',
											xtype : 'radiogroup',
											columns : 2,
											items : [{
														boxLabel : "SOCKET",
														id : 'protocolType0',
														name : "protocolType",
														inputValue : "0"
													}, {
														boxLabel : "HTTP",
														id : 'protocolType1',
														name : "protocolType",
														inputValue : "1"
													}]
										}, {
											fieldLabel : '是否激活使用',
											xtype : 'radiogroup',
											columns : 2,
											items : [{
														boxLabel : "不激活",
														id : 'actived0',
														name : "actived",
														inputValue : "0"
													}, {
														boxLabel : "激活",
														id : 'actived1',
														name : "actived",
														inputValue : "1"
													}]
										}, {
											fieldLabel : '自动补功能是否激活',
											xtype : 'radiogroup',
											columns : 2,
											items : [{
														boxLabel : "激活",
														name : "resumeActived",
														id : 'resumeActived1',
														inputValue : "1"
													}, {
														boxLabel : "不激活",
														id : 'resumeActived0',
														name : "resumeActived",
														inputValue : "0"
													}]
										}, {
											fieldLabel : '读取超时时间',
											name : 'readTimeOut',
											xtype : 'textfield', // 设置为文字输入框类型
											anchor : '100%'
										}, {
											fieldLabel : '操作时间', // 标签
											xtype : 'datefield',
											name : 'opDate', // name:后台根据此name属性取值
											format : 'Y-m-d H:i:s', // 日期格式化
											readOnly : true,
											anchor : '100%'
										}]
							}, {
								columnWidth : .33,
								layout : 'form',
								labelWidth : 150, // 标签宽度
								defaultType : 'textfield',
								border : false,
								items : [{
											fieldLabel : '连接名称',
											name : 'connName',
											xtype : 'textfield', // 设置为文字输入框类型
											anchor : '100%'
										}, {
											fieldLabel : '是否在同渠道同类型中优先',
											xtype : 'radiogroup',
											columns : 2,
											items : [{
														boxLabel : "是",
														id : 'priority0',
														name : "priority",
														inputValue : "Y"
													}, {
														boxLabel : "否",
														id : 'priority1',
														name : "priority",
														inputValue : "N"
													}]
										}, {
											fieldLabel : '补单方式',
											xtype : 'radiogroup',
											columns : 2,
											items : [{
														boxLabel : "真补",
														name : "resumeType",
														id : 'resumeType1',
														inputValue : "1"
													}, {
														boxLabel : "假补",
														name : "resumeType",
														id : 'resumeType0',
														inputValue : "0"
													}]
										}, {
											fieldLabel : '网关类型可拆分',
											xtype : 'radiogroup',
											columns : 2,
											items : [{
														boxLabel : "是",
														name : "connTypeDetachable",
														id : 'connTypeDetachable0',
														inputValue : "Y"
													}, {
														boxLabel : "否",
														name : "connTypeDetachable",
														id : 'connTypeDetachable1',
														inputValue : "N"
													}]
										}, {
											fieldLabel : '退货时是否退还手续费',
											xtype : 'radiogroup',
											columns : 2,
											items : [{
														boxLabel : "退还",
														name : "is_refund_with_fee",
														id : 'is_refund_with_fee0',
														inputValue : "0"
													}, {
														boxLabel : "不退还",
														name : "is_refund_with_fee",
														id : 'is_refund_with_fee1',
														inputValue : "1"
													}]
										}, {
											fieldLabel : '渠道费率',
											name : 'feeRate',
											xtype : 'textfield', // 设置为文字输入框类型
											anchor : '100%'
										}]
							}]

				}, {
					layout : 'column',
					xtype : 'fieldset',
					title : '序列名、地址、描述',
					anchor : '98%',
					autoHeight : true,
					border : true,
					items : [{
								columnWidth : 1,
								layout : 'form',
								labelWidth : 130, // 标签宽度
								defaultType : 'textfield',
								border : false,
								items : [{
											fieldLabel : '渠道支付订单序列名称',
											name : 'chnl_ord_no_seqname',
											xtype : 'textfield', // 设置为文字输入框类型
											anchor : '100%'
										}, {
											fieldLabel : '渠道支付连接URL',
											name : 'connUrl',
											xtype : 'textfield', // 设置为文字输入框类型
											anchor : '100%'
										}, {
											fieldLabel : '渠道查询连接URL',
											name : 'connQueryUrl',
											xtype : 'textfield', // 设置为文字输入框类型
											anchor : '100%'
										}, new Ext.form.TextArea({
													fieldLabel : "描述",
													name : 'description',
													labelSepartor : ':',
													labelWidth : 60,
													width : '100%'
												})]
							}]

				}, {
					layout : 'column',
					xtype : 'fieldset',
					title : '账户信息',
					anchor : '98%',
					autoHeight : true,
					border : true,
					items : [{
								columnWidth : .5,
								layout : 'form',
								labelWidth : 220, // 标签宽度
								defaultType : 'textfield',
								border : false,
								items : [{
											fieldLabel : '虚拟财务公司支付往来(本金)',
											name : 'vtl_sf_payee_prcpl_acct',
											xtype : 'textfield', // 设置为文字输入框类型
											anchor : '100%'
										}, {
											fieldLabel : '虚拟财务公司支付收入(本金)',
											name : 'vtl_sf_fi_prcpl_acct',
											xtype : 'textfield', // 设置为文字输入框类型
											anchor : '100%'
										}, {
											fieldLabel : '虚拟银行支付往来(银行核算手续费)',
											name : 'vtl_bk_fo_fee_acct',
											xtype : 'textfield', // 设置为文字输入框类型
											anchor : '100%'
										}, {
											fieldLabel : '支付手续费收入(内部核算手续费)',
											name : 'sf_fi_fee_acct',
											xtype : 'textfield', // 设置为文字输入框类型
											anchor : '100%'
										}]
							}, {
								columnWidth : .5,
								layout : 'form',
								labelWidth : 220, // 标签宽度
								defaultType : 'textfield',
								border : false,
								items : [{
											fieldLabel : '虚拟银行支付往来(本金)',
											name : 'vtl_bk_fo_prcpl_acct',
											xtype : 'textfield', // 设置为文字输入框类型
											anchor : '100%'
										}, {
											fieldLabel : '虚拟支付手续费支出(银行核算手续费)',
											name : 'vtl_sf_fo_fee_acct',
											xtype : 'textfield', // 设置为文字输入框类型
											anchor : '100%'
										}, {
											fieldLabel : '财务公司过渡正常支付收入(本金)',
											name : 'sf_fi_prcpl_acct',
											xtype : 'textfield', // 设置为文字输入框类型
											anchor : '100%'
										}, {
											fieldLabel : '财务公司过渡退货支付收入(本金)',
											name : 'sf_rfd_fi_prcpl_acct',
											xtype : 'textfield', // 设置为文字输入框类型
											anchor : '100%'
										}]
							}]

				}]
	});

	// 初始化表单
	initForm(title, secondForm, record, function(sWindow) {
		if (!secondForm.form.isValid()) {
			Ext.MessageBox.alert("提示", "请正确填写数据");
			return;
		}
		var protocolType = secondForm.getForm().getValues()['protocolType'];
		var actived = secondForm.getForm().getValues()['actived'];
		var resumeActived = secondForm.getForm().getValues()['resumeActived'];
		var priority = secondForm.getForm().getValues()['priority'];
		var resumeType = secondForm.getForm().getValues()['resumeType'];
		var connTypeDetachable = secondForm.getForm().getValues()['connTypeDetachable'];
		var is_refund_with_fee = secondForm.getForm().getValues()['is_refund_with_fee'];

		Ext.Msg.confirm("提示", "确认保存?", function(btn) {
			if (btn == "yes") {
				secondForm.getForm().submit({
							url : 'connCfgManage.do?reqCode=updateConnCfgMangeInfo',
							waitTitle : '正在提交中.......',
							method : 'POST',
							params : {
								protocolType : protocolType,
								actived : actived,
								resumeActived : resumeActived,
								priority : priority,
								resumeType : resumeType,
								connTypeDetachable : connTypeDetachable,
								is_refund_with_fee : is_refund_with_fee
							},
							success : function(form, action) {
								Ext.Msg.hide();
								if (action.result.success) {
									Ext.Msg.alert('提示', action.result.msg);
									sWindow.close();
									store.reload();
								} else {
									Ext.Msg.alert('提示', action.result.msg);
									Ext.Msg.hide();
									store.reload();
								}
							},
							failure : function(form, action) {
								Ext.Msg.hide();
								store.reload();
								Ext.Msg.alert('提示', action.result.msg);
							}
						});
			}
		});
	});

	/** 初始化表单 */
	function initForm(title, secondForm, record, saveFun) {
		// 初始化
		if (record != null) {
			secondForm.getForm().loadRecord(record);
		}
		// 添加按钮
		secondForm.addButton({
					text : '保存',
					id : 'save_button',
					iconCls : 'acceptIcon',
					handler : function() {
						saveFun(sWindow);
					}
				});
		secondForm.addButton({
					text : '重置',
					iconCls : 'tbar_synchronizeIcon',
					handler : function() {
						secondForm.getForm().reset();
						setValuetoForm();
					}
				});
		secondForm.addButton({
					text : '关闭',
					iconCls : 'deleteIcon',
					handler : function() {
						sWindow.close();
					}
				});

		uiGrantFree();

		var sWindow = new Ext.Window({
					title : '<span style="font-weight:bold">' + title
							+ '</span>', // 窗口标题
					layout : 'fit', // 设置窗口布局模式
					width : document.body.clientWidth - 100, // 窗口宽度
					height : 650,
					closable : false, // 是否可关闭
					closeAction : 'hide', // 关闭策略
					maximizable : false, // 设置是否可以最大化
					border : false, // 边框线设置
					resizable : false,
					constrain : true,
					titleCollapse : true,
					animateTarget : Ext.getBody(),
					autoScroll : false,
					modal : true,
					buttonAlign : 'right',
					items : [secondForm],
					buttons : []
				});
		sWindow.show();
	}

	if (record != null) {
		setValuetoForm();
	}

	function setValuetoForm() {
		var protocolType = record.get('protocolType');
		var actived = record.get('actived');
		var resumeActived = record.get('resumeActived');
		var priority = record.get('priority');
		var resumeType = record.get('resumeType');
		var connTypeDetachable = record.get('connTypeDetachable');
		var is_refund_with_fee = record.get('is_refund_with_fee');

		if (protocolType == "0") {
			Ext.getCmp('protocolType0').setValue(protocolType);
		} else if (protocolType == "1") {
			Ext.getCmp('protocolType1').setValue(protocolType);
		}
		if (actived == "0") {
			Ext.getCmp('actived0').setValue(actived);
		} else if (actived == "1") {
			Ext.getCmp('actived1').setValue(actived);
		}
		if (resumeActived == "0") {
			Ext.getCmp('resumeActived0').setValue(resumeActived);
		} else if (resumeActived == "1") {
			Ext.getCmp('resumeActived1').setValue(resumeActived);
		}
		if (priority == "Y") {
			Ext.getCmp('priority0').setValue(priority);
		} else if (priority == "N") {
			Ext.getCmp('priority1').setValue(priority);
		}
		if (resumeType == "0") {
			Ext.getCmp('resumeType0').setValue(resumeType);
		} else if (resumeType == "1") {
			Ext.getCmp('resumeType1').setValue(resumeType);
		}
		if (connTypeDetachable == "Y") {
			Ext.getCmp('connTypeDetachable0').setValue(connTypeDetachable);
		} else if (connTypeDetachable == "N") {
			Ext.getCmp('connTypeDetachable1').setValue(connTypeDetachable);
		}
		if (is_refund_with_fee == "0") {
			Ext.getCmp('is_refund_with_fee0').setValue(is_refund_with_fee);
		} else if (is_refund_with_fee == "1") {
			Ext.getCmp('is_refund_with_fee1').setValue(is_refund_with_fee);
		}
	}
}

时间: 2024-09-28 03:43:34

ExtJs的radiogroup的使用的相关文章

EXTJS 4.2 资料 控件之radiogroup 的用法

最近在EXTJS4.2开发项目,radiogroup的用法,主要是和grid之间的编辑功能:看了好多资料都不对,特此在这里备注记录 代码如下, 1.这是一段Win窗体上的两个单选按钮,设置单选按钮都是选择“是” a. { xtype: 'fieldcontainer', layout: 'hbox', defaults: { flex: 1 }, items: [{ xtype: 'radiogroup', fieldLabel: '手机验证', width: 100, items: [ { b

【ExtJS】简单布局应用

前几天学习了ExtJS的各种布局后,以下就是各种实践,从简单做起. 实现目的: 一个提交表单页,一个显示信息页,表单为个人基本资料输入,显示页为基本信息展示. 内容: 总体布局为border布局,展示页为west,提交表单为center.展示页可折叠,默认为折叠状态. 1.展示页用一个panel展示.可折叠,默认为折叠状态.点击提交后展示,点击关闭后关闭. 1 var show = Ext.create('Ext.panel.Panel',{ 2 region: 'west', 3 title:

ExtJs xtype类型介绍

自定义组件在定义的时候可以通过xtype配置为组件指定xtype短名称,此后创建对象可以通过xtype来创建自定义对象了,示例代码如下: Ext.define('MyApp.PressMeButton', { extend: 'Ext.button.Button', xtype: 'pressmebutton',//指定自定义组件的xtype text: 'Press Me' }); 基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ex

ExtJs特点、优缺点及注意事项

摘自:ExtJs特点.优缺点及注意事项 1.什么是ExtJs?ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端Ajax框架.因此,可以把ExtJS用在.Net.Java.Php等各种开发语言开发的应用中.ExtJS的前身来自于YUI,经过不断发展与改进,现在已经成为最完整与成熟的一套构建RIA Web应用的JavaScript基础库.利用ExtJS构建的RIA Web应用具有与桌面程序一样的标准用户界面

ExtJS 介绍

本篇介绍ExtJS相关知识,是以ExtJS4.2.1版本为基础进行说明,包括:ExtJS的特点.MVC模式.4.2.1GPL版本资源的下载和说明以及4种主题的演示. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 使用协议 1.3 MVC模式 2. 资源 2.1 资源地址 2.2 资源目录说明 2.3 docs/index.html 3. 运行图 1. 介绍 1.1 说明 ExtJS是一个用javascript.CSS和HTML等技术实现的主要用于创建RIA即富客户端,且与后台技术无关的前

ExtJs之单选及多选框

坚持 <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="Ext

基于Extjs的web表单设计器 第六节——界面框架设计

基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extjs的web表单设计器 第四节——控件拖放 基于Extjs的web表单设计器 第五节——数据库设计 基于Extjs的web表单设计器 第六节——界面框架设计 基于Extjs的web表单设计器 第七节——取数公式设计 基于Extjs的web表单设计器 第八节——表单引擎设计 这一节我给大家介绍一下表单设

ExtJs xtype一览

标签: extjs xtype 分类: HTML 基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycle Ext.CycleButton 带下拉选项菜单的按钮 buttongroup Ext.ButtonGroup 编组按钮(Since 3.0) slider Ext.Slider 滑动条 progress Ext.ProgressBar 进度条 statusbar Ext.Stat

无废话ExtJs 入门教程十五[员工信息表Demo:AddUser]

无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一定要用到非常熟练才可以,今天我们会通过一个员工信息表实例,再把这些组件串一下. (1)TextField  (2)Botton  (3)NumberField (4)Hidden (5)DataFiedl (6)RadioGroup (7)CheckBoxGroup (8)Combobox (9)F