首页 > 技术文章 > ExtJs的radiogroup的使用

jzdwajue 2017-06-12 16:48 原文

/**
 * 支付渠道管理具体
 * 
 * @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); } } }


推荐阅读