`

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);
		}
	}
}

 

分享到:
评论

相关推荐

    ComRadioGroup.js ,raidogroup支持点击取消

    radiogroup 支持单击取消 单击选中; 自定义的一个类,直接引用,就可以使用。免费分享

    数字微调输入框

    解压这些文件后,开发者可以参考或直接使用里面的代码片段来快速实现数字微调输入框功能,或者作为自定义组件开发的起点。 总之,数字微调输入框是提高用户交互体验的重要工具。通过合理的设计和实现,我们可以创建...

    Ext RadioGroup实例

    在本文中,我们将深入探讨Ext RadioGroup的使用方法,包括其配置选项、事件处理以及如何提取选定的值和文本。 首先,我们来看RadioGroup的基本创建过程。在Ext JS中,RadioGroup可以通过传递配置对象来初始化: ``...

    ext-3.3.1实例

    ext3.3.1的官方实例,对于初学者是很有用的例子

    ExtJs代码自动生成

    下面将详细解释如何使用ExtJS进行代码自动生成,以及各组件类型的中文解释。 1. **数据库字段的映射** 在设计数据库时,每个字段通常会包含字段名称和类型。在ExtJS中,这些字段可以映射到不同的组件类型。例如: ...

    ExtJs使用过程中积攒的一些东西

    在使用ExtJs开发Web应用程序时,经常会遇到各种各样的组件和布局需求。下面是一些关于ExtJs使用的基础知识和常见技巧。 1. **基础布局**: - 引入文件:ExtJs的使用首先需要引入相应的CSS样式表和JavaScript库。`...

    extjs详细ppt

    3. **examples** 目录内包含了官方提供的示例代码,通过学习这些示例可以快速掌握 ExtJS 的使用方法。 4. **locale** 目录包含了多语言资源文件,例如 `ext-lang-zh_CN.js` 支持简体中文,这对于国际化应用尤为重要...

    extjs中的xtype的所有类型介绍

    18. radiogroup - xtype: 'radiogroup', 描述: 编组的单选按钮(Since 2.2) 图表组件 1. chart - xtype: 'chart', 描述: 图表组件 2. barchart - xtype: 'barchart', 描述: 柱状图 3. cartesianchart - xtype: '...

    ExtJS-3.4.0系列目录

    在开始使用Ext JS前,你需要从官方网站下载相应版本的库文件,包括CSS样式表和JavaScript库。配置主要包括引入这些文件到HTML页面中,并确保浏览器正确加载。此外,可能还需要设置路径、配置加载顺序以及处理压缩和...

    ExtJSWeb应用程序开发指南(第2版)

    4.1.8 Ext.form.CheckboxGroup和Ext.form.RadioGroup 4.1.9 Ext.form.field.Trigger触发字段 4.1.10 Ext.form.field.Spinner微调字段 4.1.11 Ext.form.field.Picker拾取器字段 4.1.12 Ext.form.field.ComboBox...

    ExtJS3总结内容

    `xtype`(扩展类型)是ExtJS为每个组件定义的一种简短、易于记忆的类型标识符,它在创建组件时作为配置选项使用,使开发者能够快速构建复杂的用户界面而无需记忆大量类名。`xtype`机制极大地简化了组件实例化的过程...

    Extjs表单中的通用组件

    在Extjs中,可以使用`radiogroup`组件: ```javascript { xtype: 'radiogroup', name: 'marriage', fieldLabel: '婚姻状况', items: [ { boxLabel: '已婚', name: 'marriage', inputValue: 'married' }, { ...

    Extjs开发精华

    - 使用PHP和MySQL查询数据库,然后将结果转化为JSON格式返回给Extjs应用,实现数据的动态加载。 2. **部门数据加载**: - `varStore_bm=Ext.create('Ext.data.Store',{...});`:创建数据存储对象,用于存储和管理...

    ExtJs_xtype一览

    - `radiogroup`:`Ext.form.RadioGroup`,自2.2版本起,用于组织多个单选按钮的组件。 6. **图表组件** - `chart`:`Ext.chart.Chart`,基础图表组件,可以绘制各种图表。 - `barchart`:`Ext.chart.BarChart`,...

    ExtJS的xtype列表

    - `radiogroup`: 单选按钮组,用于管理一组关联的单选按钮。 6. **图表组件**(只列出部分): - `chart`: 图表组件,用于创建各种图形图表。 - `barchart`: 柱状图,用于比较类别之间的数量差异。 - `...

    Extjs3.0 checkboxGroup 动态添加item实现思路

    CheckboxGroup允许用户在一个组合框内选择多个选项,与单选按钮组RadioGroup相反,它是多个复选框的集合。然而,与普通的Ext.form.Field组件不同,CheckboxGroup实际上是一个容器形式的组件,它继承自Ext.form.Field...

    学习ExtJS Panel常用方法

    - `radiogroup`: `Ext.form.RadioGroup` - `textarea`: `Ext.form.TextArea` - `textfield`: `Ext.form.TextField` - `timefield`: `Ext.form.TimeField` - `trigger`: `Ext.form.TriggerField` - **Chart ...

    extjs控件列表

    **Ext.form.RadioGroup** - **描述**: 编组的单选按钮,可以同时管理多个单选按钮。 - **用途**: 创建一组相关联的单选按钮,如性别选择。 以上是ExtJS框架中常用的控件及其用途,通过合理运用这些控件,开发者可以...

    ext checkboxgroup 回填数据解决

    重写 代码如下: //解决...field){ this.items.each(function(f){ if(f.isXType(‘radiogroup’)||f.isXType(‘checkboxgroup’)){ f.items.each(function(c){ if(c.isFormField && (c.dataIndex == id || c.id ==

    form表单加载复杂json数据

    对于数组,你可以使用`checkboxgroup`、`radiogroup`或其他重复字段来表示。例如: ```javascript items: [{ xtype: 'fieldset', title: 'Nested Data', items: [{ xtype: 'textfield', fieldLabel: 'Nested ...

Global site tag (gtag.js) - Google Analytics