ext自定义编辑器
程序员文章站
2022-07-15 11:58:24
...
现在搞安卓已经有几个月了。安卓实在是博大精深，几个月下来感觉自己还是个门外汉，什么广播，什么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我也已经忘得差不多了，但我存了些基本控件代码。
表达的不是很好，但我会好好提高上去的。