Extjs 拖拽设计器（二）

来源：互联网发布：广联达软件电气编辑：程序博客网时间：2024/06/05 23:17

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>拖拽实验</title>

<link rel="Stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>
<script type="text/javascript" src="../build/locale/ext-lang-zh_CN.js"></script>

<style type="text/css">
body{
  font-size:12px;margin: 10px;
}
.block {
  clear:left;
  margin-top:50px;
  border: solid 1px #000;
  height:160px;
  padding:20px 0 0 20px;
}
.item {
  border: 1px #000 solid;
  margin-right:10px;
  width: 50px;
  height: 20px;
  text-align:center;
  padding-top:10px;
  float:left;
  cursor:pointer;
  font-size:12px;
  color:Black
}
.BorderOver{
  border:dashed 2px #00f;
}
.red{
  background:red;
}
.black{
  background:black;
}
.green{
  background:green;
}
</style>
</head>
<body>

Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

  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;
  //alert("X:"+X+" "+"Y:"+Y);

  var uiobj      = Designer.createui(uitype,X,Y,{});//创建UI元素
  //alert(uiobj.getXType());

  Designer.formPanel.add(uiobj);
  Designer.formPanel.doLayout();


}
proxy_textfield.afterDragDrop = proxy_label.afterDragDrop;
proxy_combo.afterDragDrop   = proxy_label.afterDragDrop;
proxy_textarea.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();

});
</script>

Designer.createui = function(uitype,X,Y,object){
var obj   = {x:X,y:Y,id:(uitype+Ext.maxuiid)};
Ext.maxuiid += 1;
if(uitype=="label"){
  obj.text   =  "静态文本:";
  obj.style  =  "font-size:14px;";
  var uiobj  =  new Ext.form.uxLabel(obj);
}else if(uitype=="textfield"){
  obj.readOnly=true;
  var uiobj = new Ext.form.TextField(obj);
}else if(uitype=="combo"){
  var store = new Ext.data.SimpleStore({//定义组合框中显示的数据源
   fields:  [ {name: 'displayField',mapping:'label'},
           {name: 'valueField',mapping:'value'}],
   data :[]
  });
  obj.store = store; obj.readOnly=true;
  var uiobj = new Ext.form.ComboBox(obj);
}else if(uitype=="textarea"){
  obj.readOnly=true;
  var uiobj = new Ext.form.TextArea(obj);
}else {
  alert("未定义的界面元素类型");
}

if(uitype=='label'){
  uiobj.on("click",function(){
   //改变文本背景颜色
   var el = uiobj.getEl();

   //el.dom.style.backgroundColor = "red";
   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();
   }
   right_prop.setSource({
      '名称':  '静态文本',
      "宽度":  20,
      "横坐标":pos.x,
      "纵坐标":pos.y
   });
   //增加状态控制，防止创建多个属性表格
   obj.clicked = true;
   //////////////////////////////////////////////////

   //创建一个拖拽对象
   var target = new Ext.dd.DDProxy(uiobj.id, 'dd');
   //拖拽函数处理
   target.onDragDrop = function(e,id){
    var newpos = gettargetXY(e,id,this.getEl());
    //alert("X:"+newpos.x+" Y:"+newpos.y);


    if(obj.clicked!=true){
     right_prop = Designer.propsGrid();
     right_prop.show();
    }
    right_prop.setSource({
      '名称': '静态文本',
      "宽度": 20,
      "横坐标":newpos.x,
      "纵坐标":newpos.y
    });
    //增加状态控制，防止创建多个属性表格
    obj.clicked = true;
   }

  });
}else if(uitype=='textfield'||uitype=='textarea'){
  uiobj.on("focus",function(){
   var target = new Ext.dd.DDProxy(uiobj.id, 'dd');
   target.onDragDrop = function(e,id){
    var newpos = gettargetXY(e,id,this.getEl());
    //alert("X:"+newpos.x+" Y:"+newpos.y);
    //uiobj.selectText();
   }
  });
}else{
  alert("其它");
}

return uiobj;
}

Designer.uxForm = function (){
  var formPanel = new Ext.form.FormPanel({
id:'formpanelid',
    header:false,
//frame:true,
border:true,
layout:"absolute",
width :600,
height :400,
renderTo:"uxform"
  });
  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;

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};
}

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']); }
);

Designer.propsGrid = function(){
return new Ext.grid.PropertyGrid({
        renderTo: 'prop-grid',
        width: 300,
  hidden:true,
        autoHeight: true,
        source: {
            '(name)': 'Properties Grid',
            grouping: false,
            autoFitColumns: true,
            productionQuality: false,
            created: new Date(Date.parse('10/15/2006')),
            tested: false,
            version: 0.01,
            borderWidth: 1
        },
        viewConfig : {
            forceFit: true,
            scrollOffset: 2 // the grid will never have scrollbars
        }
    });
}
///////////////////////////////////////////////////

</script>

<br/>

<br/>

</body>
</html>

Extjs 拖拽 设计器 （二）

Extjs 拖拽设计器（二）