简单的Ext自定义组件

自定义组件   Ext.ux.GroupValuePanel 

 

Ext.ux.GroupValuePanel=Ext.extend(Ext.form.Panel,{
	initComponent:function() {
		Ext.ux.GroupValuePanel.superclass.initComponent.call(this);
    },
    addValueItems:null,
	addGroupItems:function(code){
		var me = this;
		Ext.Ajax.request({
			url :'/CommonControl/getGroupValues.config',
			method : 'GET',
			params:{
				code:code
			},
			success:function(response, options) {
				var o = Ext.decode(response.responseText);
				if(o.success){
					if(me.addValueItems){
						me.addValueItems(me,o.values);
					}else{
						Ext.MessageBox.alert('错误',"组件中缺少addValueItems属性设置");
					}
				}else{
					Ext.MessageBox.alert('错误',o.msg);
				}
				
			},
			failure : function(response, options) {
				alert(response.status)
				Ext.MessageBox.alert('错误', '服务器出现错误请稍后再试！');
			},
			listeners : {
				exception : function(theproxy, response, operation,
						options) {
					var o = Ext.decode(response.responseText).model;
					if (o && !o.success) {
						if (o.reason && o.reason == '1') {
							Ext.MessageBox.show({
								title : '错误',
								msg : o.msg,
								buttons : Ext.MessageBox.OK,
								animateTarget : 'loading',
								fn : function() {
									window.location = xmname + o.page;
								},
								icon : Ext.MessageBox.ERROR
							});
						} else {
							Ext.MessageBox.show({
								title : tip ? tip : "请注意",
								msg : o.msg,
								buttons : Ext.MessageBox.OK,
								animateTarget : 'loading',
								fn : callfunc,
								icon : tiptype ? tiptype : Ext.MessageBox.WARNING
							});
						}
					}
				}
			}
		});
	}
});

 

 

使用组件

var groupvalueForm = Ext.create("Ext.ux.GroupValuePanel", {
				frame : true,
				monitorValid : true,// 把有formBind:true的按钮和验证绑定
				layout : "form",
				bodyStyle : "padding:0;",
				title : "分组类别",
				collapsible : true,
				defaults : {
					margin : '0 0 0 0',
					bodyStyle : "padding:0;",
					baseCls : 'x-panel',
				},
				addValueItems : function(obj, values) {
					var itemvalues = Ext.create("Ext.panel.Panel", {
						layout : "column",
						defaults : {
							margin : '0 0 0 0',
							bodyStyle : "padding:0;",
							border : false,
							labelAlign : 'right'
						},
						items : []
					});
					for ( var x in values) {
						itemvalues.add({
							xtype : 'radiofield',
							boxLabel : values[x].value,
							name : 'gourp',
							checked : values[x].checked ? values[x].checked
									: false,
							inputValue : values[x].groupid,
							id : 'group_' + values[x].key,
							columnWidth : 0.15
						});
					}
					obj.removeAll();
					obj.add(itemvalues);
				},
				items : []
			});

 

调用组件方法

 

groupvalueForm.addGroupItems("zgperson");

 

后台路径   /CommonControl/getGroupValues.config?code=zgperson&_dc=1417597904979

返回的 json  字符串   ：  

{"success":true,"values":[{"groupid":1,"key":"aac004","value":"性别","checked":true},{"groupid":2,"key":"aaa027","value":"统筹区"},{"groupid":3,"key":"aac084","value":"在职/退休状态"},{"groupid":4,"key":"aac066","value":"参保身份"},{"groupid":5,"key":"aab069","value":"单位名称"},{"groupid":8,"key":"aac031","value":"缴费状态"}]}