现在搞安卓已经有几个月了。安卓实在是博大精深，几个月下来感觉自己还是个门外汉，什么广播，什么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我也已经忘得差不多了，但我存了些基本控件代码。
表达的不是很好，但我会好好提高上去的。
分享到：
相关推荐
奏鸣曲：自定义编辑器 2.10.2. 分组表格，嘻嘻，这是交叉报表吗？ 2.11. 午夜怪谈，论可以改变大小，可以拖拽的表格 2.11.1. 先看看怎么拖拽改变表格的大小 2.11.2. 再看怎么在表格里拖动行 2.11.2.1. 无用功 之 同...
6.1 ext js的选择器：ext.domquery / 215 6.1.1 选择器的作用 / 215 6.1.2 使用ext.query选择页面元素 / 215 6.1.3 基本选择符 / 223 6.1.4 属性选择符 / 229 6.1.5 css属性值选择符 / 234 6.1.6 伪类选择符 ...
9.4.4 自定义编辑器 9.5 分组表格控件——Group 9.5.1 分组表格简介 9.5.2 Ext.grid.GroupingView的配置操作 9.6 可拖放的表格 9.6.1 拖放改变表格的大小 9.6.2 在同一个表格里拖放 9.6.3 表格之间的拖放 ...
3.12.5 自定义编辑器 66 3.13 分组表格控件--group 66 3.13.1 分组表格简介 67 3.13.2 分组表格视图 Ext.grid.GroupingView 68 3.14 可拖放的表格 69 3.14.1 拖放改变表格的大小 69 3.14.2 在同一个表格里...
9.4.4 自定义编辑器 9.5 分组表格控件——Group 9.5.1 分组表格简介 9.5.2 Ext.grid.GroupingView的配置操作 9.6 可拖放的表格 9.6.1 拖放改变表格的大小 9.6.2 在同一个表格里拖放 9.6.3 表格之间的拖放 ...
4.1.16 Ext.form.field.HtmlEditor编辑器字段 4.1.17 Ext.form.field.Display只读文本字段 4.1.18 Ext.form.Label标签字段 4.1.19 Ext.form.FieldSet字段集 4.1.20 Ext.form.FieldContainer容器字段 4.1.21 Ext...
日历矩阵EXTJS 增强型日历组件，用于自定义样式的日历网格。...HTML、自定义周末样式、自定义禁用日期TripAdvisor、Trivago、Expedia 和 Travelocity 风格的日期范围选择器示例Forms、Grids（行编辑和单元格编
第八章 Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件 61 一、滚轴控件 Ext.slider 61 二、进度条控件 Ext.ProgressBar 64 三、编辑控件 Ext.Editor 68 第九章 Ext.Panel 面板控件、 Ext...
允许开发人员在其VS Code编辑器中从github.com打开存储库。 创建于 + + 特征 :light_bulb: 自定义键盘快捷键 :keyboard: 从代码审查中打开 :clipboard: 快速设置 :racing_car: 发展 :hammer_and_wrench: yarn build...
31. 百度编辑器上传视频播放器由embed改成video标签 32. 添加本地关键词获取API，原官方关键词接口已失效 33. 添加站点自定义字段、栏目自定义字段、单网页自定义字段 34. 添加一键导入微信文章 35. 添加Word导入...