ext自定义编辑器

现在搞安卓已经有几个月了。安卓实在是博大精深，几个月下来感觉自己还是个门外汉，什么广播，什么aidl。。。都不怎么会用。做的软件总感觉把握不住。感觉道路还很漫长。既然学习路程这么漫长，过程中也有休息的时候，今天看了下以前学习ssh开发的一个系统，顿时感觉自己在退步。以前开发的，现在感觉做起来有点困难。

 

这个系统用的技术有ssh+jbpm+ext（呵呵，流行。。反正又是为学校做的，就不管三七二十一用上了自己想学的技术了）。

 

今天就讲下里面的一个自定义编辑器吧。

好像当时做的时候是百度过来一个别人写的一个自定义编辑器的。然后自己在此基础上做了几下修改。就是这样。贴下代码哦。是js代码哦。extjs的环境自己配哦。

 

Ext.namespace('Designer');
Ext.namespace('Designer.UI');
Ext.maxuiid = 1000;     //界面元素开始序号
Ext.selectedobj = {};    //设置当前选中控件,默认为空对象,
         //某一时刻有且只有一个控件处于选中状态
Ext.onReady(function() {
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';
	var proxy_label    = new Ext.dd.DragSource('proxy_label', {group:'dd'});
	var proxy_textfield    = new Ext.dd.DragSource('proxy_textfield', {group:'dd'});
	//拖动完成的事件
	proxy_label.afterDragDrop = function(target, e, id) {
	   var destEl = Ext.get(id);
	   var srcEl   = Ext.get(this.getEl());
	   var uitype = srcEl.dom.id.split('_')[1];
	   /*获取X,Y坐标*/
	   var beginX = destEl.getX();     //目标区块的X轴初始坐标
	   var beginY = destEl.getY();     //目标区块的Y轴初始坐标  
	   var eXY = e.getXY();  
	   var dragtargetX = eXY[0];
	   var dragtargetY = eXY[1];
	   var X = dragtargetX - beginX;
	   var Y = dragtargetY - beginY;   
	   //console.log("X:"+X+" "+"Y:"+Y);
	   var uiobj = Designer.createui(uitype,X,Y,{});//创建UI元素
	   Designer.formPanel.add(uiobj);
	   Designer.formPanel.doLayout();
	}
	proxy_textfield.afterDragDrop=proxy_label.afterDragDrop;
	var target = new Ext.dd.DDTarget('target', 'dd');    
	//建立拖动目标区(这里的dd与上面拖动源的group:dd相同
	//只有相同group的DDProxy/DragSource才会接受)
	var target2 = new Ext.dd.DDTarget('target2', 'dd');  
	Designer.uxForm();
	//右侧属性表格
	var right_prop = Designer.propsGrid();
	right_prop.show();
});
//创建控件
Designer.createui = function(uitype,X,Y,object){
	var obj   = {x:X,y:Y,id:(uitype+Ext.maxuiid)};
	Ext.maxuiid += 1;
	  
	   
	   var uiobj=null;
	   // 控制添加的控件类型
	   if(uitype=="label")
	   {
	   	 	obj.text   = "请输入标签";
	   		uiobj = new Ext.form.uxLabel(obj);
	   }
	   else if(uitype=="textfield")
	   {
	   		obj.text   = "1@100@无";
	   		obj.style   = "background:#D9E8FB;width:100px;color:#D4D0C8;";
	   		uiobj = new Ext.form.uxLabel(obj);
	   }
	   if(uitype=="label")
	   {
	   uiobj.on("click",function(){
	    //改变文本背景颜色
	    var el = uiobj.getEl();
	    
	    //如果已经选中某个控件，则将其选中状态去除
	    if(Ext.selectedobj.id!=undefined){   
		     var selectd_el = document.getElementById(Ext.selectedobj.id);
		     var classname = selectd_el.className;
		     if(classname.indexOf("selecteditem")!= -1){
		      selectd_el.className = selectd_el.className.replace("selecteditem", '')
	     	}
    	}
	    //设置新的选中控件，并改变其样式
	    Ext.selectedobj = obj ;
	    el.addClass("selecteditem");
	    //将该对象的相关属性保存到以uiid为key的对象中
	    var uiid = obj.id;
	    Designer.UI.uiid = obj;   
	    var formid = uiobj.getEl().findParent('form').id;
	    //////////////////////////////////////////////////
	    var pos = gettargetXY(el,formid,this.getEl());
	    /*打开属性列表*/
	    if(obj.clicked!=true){     
	      right_prop = Designer.propsGrid();
	      right_prop.show();
	    }
	    //当前状态有且只有一个控件处于选中状态   
	    if(uitype=="label"){
	     var prop_sourceobj = {
	     	"标签值":Ext.getCmp(Ext.selectedobj.id).text,
	        "横坐标" : pos.x,
	        "纵坐标" : pos.y
	     };
	    }else {
	     var prop_sourceobj = {};
	    }
	    
	    right_prop.setSource(prop_sourceobj);
	     if(uitype=="label")
	   {
		right_prop.on("afteredit",function()
			{
				//更新实际值
				Ext.getCmp(Ext.selectedobj.id).text=right_prop.getSource().标签值;
				//更新显示值
				Ext.getCmp(Ext.selectedobj.id).getEl().update(right_prop.getSource().标签值)
//			 	Designer.formPanel.items.each(function(item,index,length){
//                           alert(item.initialConfig.id);
//                           alert(Ext.getCmp(item.id).text)
//  				});
                      
  				
				
			}
		)
	   }
	    //增加状态控制，防止一个控件创建多次属性表格
	    obj.clicked = true;    
	
		 var label = new Ext.Resizable(uiobj.id, {
			    handles:'all'
		});
	    //////////////////////////////////////////////////
	    //创建一个拖拽对象
	    var target = new Ext.dd.DDProxy(uiobj.id, 'dd');
	    //拖拽函数处理
	    target.onDragDrop = function(e,id){    
	     var newpos = gettargetXY(e,id,this.getEl());
	     /*打开属性列表*/
	     if(obj.clicked!=true){
	      right_prop = Designer.propsGrid();
	      right_prop.show();
	     }
	     
	     right_prop.setSource({
	        "标签值":Ext.getCmp(Ext.selectedobj.id).text,
	        "横坐标" : newpos.x,
	        "纵坐标" : newpos.y
	     });
	    
	     //增加状态控制，防止创建多个属性表格
	     obj.clicked = true;
	     //增加是否已经拖拽过，如果已经拖拽过则再拖拽的时候，默认先选中并显示属性表格
	     obj.dragged = true;
	    }
	
	    
	
	   });
	   }
		else if(uitype=='textfield'){
		   uiobj.on("click",function(){
	    //改变文本背景颜色
	    var el = uiobj.getEl();
	    
	    //如果已经选中某个控件，则将其选中状态去除
	    if(Ext.selectedobj.id!=undefined){   
		     var selectd_el = document.getElementById(Ext.selectedobj.id);
		     var classname = selectd_el.className;
		     if(classname.indexOf("selecteditem")!= -1){
		      selectd_el.className = selectd_el.className.replace("selecteditem", '')
	     	}
    	}
	    //设置新的选中控件，并改变其样式
	    Ext.selectedobj = obj ;
	    el.addClass("selecteditem");
	    //将该对象的相关属性保存到以uiid为key的对象中
	    var uiid = obj.id;
	    Designer.UI.uiid = obj;   
	    var formid = uiobj.getEl().findParent('form').id;
	    //////////////////////////////////////////////////
	    var pos = gettargetXY(el,formid,this.getEl());
	    /*打开属性列表*/
	    if(obj.clicked!=true){     
	      right_prop = Designer.propsGrid();
	      right_prop.show();
	    }
	    //当前状态有且只有一个控件处于选中状态   
	    if(uitype=="textfield"){
	     var prop_sourceobj = {
	        "横坐标" : pos.x,
	        "纵坐标" : pos.y,
	        "最小长度":Ext.getCmp(Ext.selectedobj.id).text.split("@")[0],
	        "最大长度":Ext.getCmp(Ext.selectedobj.id).text.split("@")[1],
	        "约束条件":Ext.getCmp(Ext.selectedobj.id).text.split("@")[2]
	     };
	     
	    }else {
	     var prop_sourceobj = {};
	 
	    }
	   
	    right_prop.setSource(prop_sourceobj);
	    if(uitype=="textfield")
	    {
	     right_prop.on("afteredit",function()
			{
				//更新实际值
				Ext.getCmp(Ext.selectedobj.id).text=right_prop.getSource().最小长度+"@"+right_prop.getSource().最大长度
							+"@"+right_prop.getSource().约束条件;
				//更新显示值
				Ext.getCmp(Ext.selectedobj.id).getEl().update(right_prop.getSource().最小长度+"@"+right_prop.getSource().最大长度
							+"@"+right_prop.getSource().约束条件)
			}
		)
	    }
	    //增加状态控制，防止一个控件创建多次属性表格
	    obj.clicked = true;    
	
		 var label = new Ext.Resizable(uiobj.id, {
		        handles:'all'
		});
	    //////////////////////////////////////////////////
	    //创建一个拖拽对象
	    var target = new Ext.dd.DDProxy(uiobj.id, 'dd');
	    //拖拽函数处理
	    target.onDragDrop = function(e,id){    
	     var newpos = gettargetXY(e,id,this.getEl());
	     /*打开属性列表*/
	     if(obj.clicked!=true){
	      right_prop = Designer.propsGrid();
	      right_prop.show();
	     }
	     
	     right_prop.setSource({
	       "横坐标":newpos.x,
	       "纵坐标":newpos.y,
	       "最小长度":Ext.selectedobj.text.split("@")[0],
	        "最大长度":Ext.selectedobj.text.split("@")[1],
	        "约束条件":Ext.selectedobj.text.split("@")[2]
	     });
	   
	     //增加状态控制，防止创建多个属性表格
	     obj.clicked = true;
	     //增加是否已经拖拽过，如果已经拖拽过则再拖拽的时候，默认先选中并显示属性表格
	     obj.dragged = true;
	    }
	
	    
	
	   });   
		
   }
	return uiobj;
}
Designer.uxForm = function (){
	var formPanel = new Ext.form.FormPanel({  
		id:'formpanelid',
		header:false,
		//frame:true,
		border:true,
		layout:"absolute",
		width :750,
		height :600,
		renderTo:"uxform",
		buttonAlign:'center',
		buttons:[
		{
			text:'提交',
			handler:function()
			{
				Ext.MessageBox.prompt("系统提示","请输入模板名称",function(e,text){
					if(e=="ok")
					{
						if(text!="")
						{
							//传递模板相关信息
							var templatename=text;
							var positionx=new Array();
							var positiony=new Array();
							var modulename=new Array();
							var modulevalue=new Array();
							var width=new Array();
							var height=new Array();
							formPanel.items.each(function(item,index,length){ 
								var pos = gettargetXY(item.getEl(),formpanelid,this.getEl());
								positionx.push(pos.x)
								positiony.push(pos.y)
	                      		modulename.push(item.initialConfig.id)
	                      		modulevalue.push(Ext.getCmp(item.id).text)
	                      		width.push(item.getWidth())
	                      		height.push(item.getHeight())
	  						});
	  						Ext.Ajax.request({
					            url: 'doaddmoduleAction.action',
					            waitTitle : '系统提示',
								waitMsg : '正在添加,请稍候...',
					            success: function(response) {
					                Ext.Msg.alert('添加成功', "添加成功");
					            },
					            failure: function(response) {
					                Ext.Msg.alert('添加失败', "建议您重新刷新后，再使用，如还是不行，请联系开发人员");
					            },
					            params: {templatename:templatename,positionx:positionx,positiony:positiony,modulename:modulename,modulevalue:modulevalue,width:width,height:height,templatename:templatename}
							});
						}
						else
						{
							Ext.Msg.alert("系统提示","模板名称不能为空")
						}
					}
					
				})
  				
			}
		}
		]
	});
	Designer.formPanel = formPanel;

	var formPanelDropTargetEl = formPanel.body.dom;
	
	var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
               id:'targetid',
               group     : 'dd',
               notifyEnter : function(ddSource, e, data) {
               },
               notifyDrop : function(ddSource, e, data){
               }
           });

	Designer.target = formPanelDropTarget;

}

/*获取相对父容器的坐标值的方法*/
function gettargetXY(e,id,el){
var destEl = Ext.get(id);
var srcEl   = el;
/*获取X,Y坐标*/
var beginX = destEl.getX();     //目标区块的X轴初始坐标
var beginY = destEl.getY();     //目标区块的Y轴初始坐标  
var eXY = e.getXY();  
var dragtargetX = eXY[0];
var dragtargetY = eXY[1];
var X = dragtargetX - beginX;
var Y = dragtargetY - beginY;
return {x:X,y:Y};
}

/*属性表格的定义*/
Designer.propsGrid = function(){
  
if(typeof Ext.grid_propgrid !='undefined' ){  
   return Ext.grid_propgrid;
}
Ext.grid_propgrid = new Ext.grid.PropertyGrid({
                id:"prop_grid_right",
                renderTo: 'prop-grid',
                width: 300,
                hidden:true,
                autoHeight: true,       
                source: {
                  "横坐标":0,
	      		  "纵坐标":0
                },
               customEditors: {
                "约束条件": new Ext.grid.GridEditor( new Ext.form.ComboBox({  
                                 fieldLabel : '约束条件',  
                                 hiddenName : 'permissionobjectName',  
                                 store : new Ext.data.SimpleStore({  
                                     fields : ['objectValue', 'permissionobjectName'],  
                                     data : [['数字', '数字'], 
		                                     ['字母或数字', '字母或数字'], 
		                                     ['中文', '中文'],
		                                     ['无', '无']
		                                    ]  
                                 }),  
                                 valueField : 'objectValue',  
                                 displayField : 'permissionobjectName',  
                                 typeAhead : true,  
                                 mode : 'local',
                                 triggerAction : 'all',  
                                 allowBlank:false,  
                                 blankText : '请对象名称',  
                                 emptyText : '选择对象名称',  
                                 selectOnFocus : true
                				 
                             }) 
                )},
                viewConfig : {
                 forceFit: true,
                 scrollOffset: 2 // the grid will never have scrollbars
                }
               });

return Ext.grid_propgrid;

}

Ext.form.uxLabel = Ext.extend(Ext.form.Label, {
	
});

Ext.form.uxLabel.prototype.afterRender = Ext.form.uxLabel.prototype.afterRender.createSequence(
    function() { this.relayEvents(this.el, ['click']); }
);

 

这应该就是核心的代码了。老实说当时是怎么在原来的基础上改的我也忘了。extjs我也已经忘得差不多了，但我存了些基本控件代码。

表达的不是很好，但我会好好提高上去的。