Ext.JS4.0版本实现组件重构调用

    赶上项目需求开发，对一个没怎么用Ext框架的前端来说，这是要多不想干就有多不相干，但是没办法，生活总会让你清楚的认识到事情是不会那么容易的。不要放弃，你的能量超乎你想象。

文章目录

• 一、Ext.js组件
• 二、Ext.js组件是如何调用
• 总结

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Ext.js组件

      ext前端框架最好的点就是能够轻松的在功能和实际展示上进行切换，当你想在某个点上进行应用开发，可以将功能部分封装成一个实用的组件。我这次项目需求是应用一个多选框进行相同部分替换，就不需要重复设置相同的部分。看上去这个功能很简单，但去细想可能就会觉得不太对了。因为这个进行覆盖替换的部分是一个组件啊，这怎么能够进行复制替换呢。之前接触vue框架比较深，所以一时间没转换过来，组件的调用不都是这么一回事吗。上代码

initcomponent : function(flag,WTDWXM){
		if(flag == 'edit'){
			var panel = getCtrl('monitortaskmanage.MonitorTaskCtrl').getEditmonitortaskpanel(),
				width = panel.down('*[name=editmonitortabpanel]').getWidth()-150;  //
		}else{
			var panel = getCtrl('monitortaskmanage.MonitorTaskCtrl').getAddmonitortaskpanel(),
				width = panel.down('form[name=samplelistform]').down('*[name=firstfieldset]').getWidth()-150;  //任务基本信息的fieldset宽度
		}
		var items = [{
			xtype : 'form',
			border : false,
			fieldDefaults : {
				labelAlign : 'right',
				allowBlank : false,
				margin : '5 5 5 5',
				width : 385,
				labelWidth :110
			},
			layout : 'hbox',
			items : [{
					xtype : 'displayfield',
					name : 'DYOBJECTID',
					allowBlank : true,
					submitValue : true,
					hidden : true
				},{
					xtype : 'fieldset',
					collapsible : true,
					title : '组件',
					margin : '5 0 10 5',
					minHeight : 80,
					width : width,
					defaults : {
						border : false
					},
					items : [{
						xtype : 'checkboxgroup',
						fieldLabel : '组件',
						allowBlank:true,
						width : 750,
						layout: {
							type:'table',        //这里采用'table'布局可以实现，就可以保证布局不乱
							columns:6
						},
						items : WTDWXM
					},{
						layout : "hbox",
						items : [{
							xtype : 'combo',
							fieldLabel : '是否加添加剂',
							name : 'SFJGDJ',
							allowBlank : false,
							queryMode : 'local',
							displayField : 'NAME',
							valueField : 'NAME',
							editable : false,
							value : '/',
							store : Ext.create('Ext.data.Store', {
								fields : ['NAME'],
								data : [{
										"NAME" : "/"
									}, {
										"NAME" : ""
									}, {
										"NAME" : ""
									}, {
										"NAME" : ""
									}, {
										"NAME" : ""
									}
								]
							})
						},{
							xtype : 'combo',
							fieldLabel : '下拉',
							name : 'SFLY',
							allowBlank : false,
							queryMode : 'local',
							displayField : 'NAME',
							valueField : 'NAME',
							editable : false,
							value : '是',
							store : Ext.create('Ext.data.Store', {
								fields : ['NAME'],
								data : [{
										"NAME" : "是"
									}, {
										"NAME" : "否"
									}
								]
			
							})
						}]
					}]
			   },{
				    xtype : "button",
					text : '',
					border : false,
					name : 'deleteYPXX',
					margin : '2 0 0 -18',
					iconCls : 'delete1',
					handler :function(button){
		    		//动态删除组件
		    			var form = button.up('form');
						form.up('form').remove(form);
					}
			   }]
		}];

      这一部分需要进行替换的组件，这个组件里面包含了多选框以及两个下拉选择框。Ext.js的组件基本上是通过方法调用进行封装。与vue比较的话，vue进行组件的封装基本上都是比较鲜明的。可以设置每个不用的vue页来完成。而Ext.js 的话也比较灵活，能够功能混搭。

二、Ext.js组件是如何调用的

1.up()和down()

       ext4.0版本组件中最实用的两个方法，这两个方法都是获取组件信息的。比如我想获取上面组件中checkbox这部分，可以先通过up方法找到包含组件的元素，通过这个元素调用down（）直接找到组件的根节点，然后你就可以"为所欲为"了，想拿值就拿值，想改变状态就改变状态。当然，这是能够清晰的知道你代码结构的基础上。 看看部分代码

var JCXMS = button.up('form').up('form').down('textarea[name=JCXMS]').value;
								var mainForm = button.up('form').up('form').up('form').items.items,
								    flag = false;
								Ext.MessageBox.confirm(getConfig('opTooltip'), "哈哈哈哈",
										function (btn) {
										if (btn == "yes") {
											if(JCXMS == ''){
												Ext.Msg.alert('提示','请先选择组件！');
											}else{
												// 获取选择单项的项目数
												var checkitem = button.up('form').up('form').items.items[1].items.items[9].items.items;  
												for(var j = 2; j < checkitem.length; j++){
													var checkd = checkitem[j].down('checkboxgroup').items.items;
													var Fcombo = checkitem[j].down('combo[name=SFJGDJ]').value;
													var Tcombo = checkitem[j].down('combo[name=SFLY]').value;
													for(var k = 0;k < checkd.length; k++){
														if(checkd[k].value){
															flag = true;
														}
													};
													
																	for(var i = 2; i< mainForm.length; i++ ){
														var butn = mainForm[i].down('button[name=addCYXMbutton]');
														if(flag){
															getCtrl('monitortaskmanage.MonitorTaskCtrl').showAddFactorPoint(butn,'',JCXMS.split(','));
														}else{
															Ext.Msg.show({
																title:'提示',
																msg:'选择的组件项',
																buttons: Ext.Msg.OK,
																icon:Ext.Msg.WARNING
															});
														};
													};

2.调用

    调用的话就比较直观了，可以通过定义的函数调用，也可以检索路径来获取组件调用。

---

总结

这篇文章主要是关于Extjs中组件的描述，干货不是特别多，但能够了解一下就行，其实关于组件的实际应用，没有那么多繁琐的事情，最多是给页面添加内容以及实现自己想做到的某个功能通过各种方法来办到就成。