现在搞安卓已经有几个月了。安卓实在是博大精深，几个月下来感觉自己还是个门外汉，什么广播，什么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. **配置编辑器**：在Grid的`columns`配置中，为需要自定义编辑的列设置`editor`属性。编辑器可以是任何Ext JS支持的组件，如`Ext.form.field.Text`、`Ext.form.field.ComboBox`等。对于更复杂的控件，你可能需要...
"Ext自定义控件库"正是这样一个资源集合，包含了开发者封装的一些特殊功能或样式调整的Ext控件，适用于那些标准组件无法满足需求的场景。 1. **GridPanel.xdc**：GridPanel是ExtJS中的核心组件之一，用于展示表格...
6. 配置选项：开发人员可以通过配置参数自定义编辑器的行为，比如设置上传URL，调整图像尺寸，或者设定允许的文件类型。 这个扩展的实现可能基于EXT的事件监听机制和DOM操作，利用JavaScript的动态特性来增强编辑器...
EXT可视化编辑器是一种基于Web的所见即所得（WYSIWYG）编辑工具，它专为开发者和设计者提供了一种高效的方式来创建和编辑交互式的用户界面。EXT库是其核心，它是一个强大的JavaScript框架，用于构建富互联网应用程序...
EXT中文可视化编辑器是一款专为EXT框架开发设计的可视化开发工具，它提供了便捷的界面，使得开发者无需编写复杂的JavaScript代码，就能创建出丰富的Web应用程序。EXT Design中文版将原本复杂的过程简化，使得开发者...
在Row Editor中，每个列对应一个编辑器字段（例如，`Ext.form.field.Text`、`Ext.form.field.Date`等）。这些字段在用户选择编辑时动态插入到行中，并在编辑完成后更新数据。 3. **事件处理** Row Editor的源码中...
EXT Designer编辑器的核心功能包括： 1. **可视化设计**：通过直观的拖放界面，开发者可以快速创建EXTJS应用的布局和组件，减少了手动编写HTML和CSS的工作量。你可以调整组件大小、位置，设置属性，以及配置事件...
9. **自定义编辑器**: Ext允许开发者自定义编辑器，比如使用日期选择器、下拉列表或其他复杂组件作为单元格的编辑器，以满足特定的需求。 10. **性能优化**: 当处理大量数据时，了解如何优化Grid的性能至关重要，如...
- **代码编辑器集成**：对于需要自定义的JavaScript逻辑，提供了内置的代码编辑器，支持代码高亮和自动补全。 - **多文档界面**：允许多个项目同时打开和编辑，提高了工作效率。 - **汉化界面**：本地化的中文...
在这个例子中，`columns`数组包含了多个对象，每个对象代表一列，其中`editor`属性指定了该列的编辑器，如`TextField`（文本框）、`ComboBox`（下拉框）和`NumberField`（数字输入框）。 - `TextField`允许用户...
在提到的"Ext 制作的CSS布局编辑器"中，我们可以推断这是一个基于ExtJS开发的工具，允许用户可视化地设计和编辑CSS布局。 CSS布局是网页设计的核心，它决定了元素在页面上的排列方式。传统的CSS布局方法包括流式...
这篇博客文章“在EXT中使用FCKEditor编辑器例子”可能探讨了如何将FCKEditor集成到EXT应用中，为用户提供一个方便的文本编辑界面。 在EXT中集成FCKEditor，首先你需要理解EXT的基本概念，如组件（Component）、布局...
5. **HTML编辑器**：在EXT中，可能使用了像TinyMCE或CKEditor这样的开源富文本编辑器，它们通常支持自定义插件，以实现图片上传功能。我们需要了解编辑器的API，以便在用户选择图片后调用上传逻辑。 6. **MyEclipse...
除了EXT JS提供的基础功能，你还可以根据项目需求自定义扩展，例如添加验证规则、自定义编辑器类型，或者集成其他插件以增强用户体验。 8. **响应式设计** EXT JS的可编辑TreeGrid也支持响应式布局，可以根据不同...
对于可编辑的列，我们需要设置`editor`属性，指定编辑器类型，如TextField、ComboBox等。 4. **启用CellEditing**：引入EXT JS的CellEditing插件，并将其添加到Grid Panel。通过配置`clicksToEdit`属性，我们可以...
2. `ext-language_tools.js`: 这是ACE编辑器的一个扩展，专门用于语言工具。它可能包含了语法检查、自动缩进、代码折叠等功能，这些对于任何代码编辑器来说都是必不可少的。在MySQL编辑器中，这个扩展可能负责识别...
此外，EXT Htmleditor还支持其他高级特性，如监听编辑器中的事件、自定义HTML过滤规则、使用外部样式表等。通过熟练掌握EXT的API，开发者可以打造出满足各种需求的富文本编辑器。记住，EXT Htmleditor不仅限于插入...
5. 自定义编辑器：允许开发者为不同的列指定不同的编辑器，满足复杂需求。 三、工作原理 1. 数据绑定：EditorGridPanel通过Store获取数据，Store可以与服务器端进行数据交换。 2. 编辑模式：当用户点击单元格时，...
【自定义文件管理器】是一种实现用户个性化需求的软件工具，它允许用户更方便地浏览、操作、组织和管理计算机中的文件与目录。在本文中，我们将深入探讨自定义文件管理器的核心概念、功能和实现方式，以及如何利用...
3. **属性编辑器**：每个拖放的字段都有相应的属性设置，如尺寸、对齐方式、标签位置等，可以通过属性编辑器进行细致调整。 4. **事件处理**：表单设计器还允许添加和编辑事件处理器，比如在用户交互时触发的函数，...