精华内容
下载资源
问答
  • Extjs拖拽

    千次阅读 2012-07-09 16:32:04
    最近项目前台使用Extjs实现,其中用到了Ext的Gridpanel的拖拽,现把相关内容总结,并写成一个例子。 本例子使用Extjs4.1的mvc模式实现。 第一步搭建程序架构 创建index.html文件,创建app.js文件,创建app/model...

    最近项目前台使用Extjs实现,其中用到了Ext的Gridpanel的拖拽,现把相关内容总结,并写成一个例子。

    本例子使用Extjs4.1的mvc模式实现。

    第一步搭建程序架构

    创建index.html文件,创建app.js文件,创建app/model、app/view、app/controller和app/store目录。

    Index.html的很简单,内容如下:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>我的拖拽</title>
    <link type="text/css" rel="stylesheet" href="../extjs/resources/css/ext-all-debug.css">
        <script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
        <script type="text/javascript" src="app.js"></script>
    
    </head>
    <body>
    
    </body>
    </html>
    

    app.js的内容如下:

    Ext.application({
        name: 'DD',
        appFolder : 'app',  //指定js程序所在目录位置
    
        autoCreateViewport: true,
    
        controllers: [
            'Main'          //指定控制器名称,下面创建的控制器名称和和这里指定的控制器名一致。
        ]
    });
    

    现在运行程序是什么也看不到的,如果使用浏览器工具查看控制台,还有错误出现。

    第二步,创建mvc结构

    创建app/model/Source.js,内容如下:

    Ext.define('DD.model.Source', {
        extend: 'Ext.data.Model',
        fields: ['id','name','type','size']
    });
    
    创建app/model/Target.js,内容如下:

    Ext.define('DD.model.Target', {
        extend: 'Ext.data.Model',
        fields: ['id','name','displayname','type','size','groupable','sortable']
    });
    

    创建app/store/SourceStore.js,内容如下:

    Ext.define('DD.store.SourceStore', {
        extend: 'Ext.data.Store',
    
        requires: 'DD.model.Source',
        model: 'DD.model.Source',
        autoLoad:true,
    
        data: [
               {id:1,name: 'voltName',  type:'字符型',size:'100'},
               {id:2,name: 'voltId',      type:'整型',size:''},
               {id:3,name: 'ppq',       type:'数值型',size:'18,4'},
               {id:4,name: 'dept',     type:'字符型',size:'100'},
               {id:5,name: 'type',       type:'整型',size:''},
               {id:6,name: 'spq',       type:'数值型',size:'18,4'},
               {id:7,name: 'yearmonth',type:'字符型',size:'100'},
               {id:8,name: 'lpq',        type:'整型',size:''},
               {id:9,name: 'llr',       type:'数值型',size:'18,4'}
        ]
    });
    

    创建app/store/TargetStore.js,内容如下:

    Ext.define('DD.store. TargetStore, {
        extend: 'Ext.data.Store',
        requires: 'DD.model.Target',
        model: 'DD.model.Target',
        autoLoad:true,
        data: [
               {id:1,name: 'voltName',  displayname: '分压名称', type:'字符型',size:'100',groupable:"是",sortable:"否"},
               {id:2,name: 'voltId',    displayname: '分压ID', type:'整型',size:'',groupable:"否",sortable:"是"}
        ]
    });
    
    创建app/view/SourceGrid.js (拖拽源在这里)
    Ext.define('DD.view.SourceGrid', {
    	extend: 'Ext.grid.Panel',
    	alias:'widget.sourcegrid',
    	title: '拖拽源列表',
        border:true,
        height:400,
        stripeRows: true,
        //autoDragDrop:true,
        store:'SourceStore',
        selModel: Ext.create('Ext.selection.RowModel', {singleSelect : true}),
        viewConfig: {
                copy:true,      // 以复制方式拖拽,即拖拽后源内容不移除
                    plugins: {
                        ptype: 'gridviewdragdrop',
                        dragGroup: 'firstGridDDGroup'  // 和拖拽目标的dropGroup名称一致
                    }
                },
    	columns: {
        	items: [{
        	        	text: "内部名称",
        	        	flex: 0.4,
        	        	dataIndex: "name"//,
        	        	//hidden: true
        	        },{
        	        	text: "名称",
        	        	flex: 0.4,
        	        	dataIndex: "displayname"
        	        },{
        	        	text: "类型",
        	        	flex: 0.3,
        	        	dataIndex: "type"
        	        },{
        	        	text: "字段长度",
        	        	flex: 0.3,
        	        	dataIndex: "size"
        	        }]
        }
    });
    
    创建app/view/ TargetGrid.js

    Ext.define('DD.view.TargetGrid', {
    	extend : 'Ext.grid.Panel',
    	alias : 'widget.targetgrid',
    	border : true,
    	store : 'TargetStore',
        height:400,
        viewConfig: {
                        plugins: {//拖拽的配置必须写到viewConfig下的plugins里
                            ptype: 'gridviewdragdrop',
                            dropGroup: 'firstGridDDGroup'  // 和拖拽源的dragGroup名称一致
                        },
            listeners:{
                /*
                在GridView的有效拖拽位置上松开鼠标时触发,返回false时认为是无效的拖拽
                 */
                beforedrop:function(node,data,overModel,dropPosition,dropFunction,eOpts ){
                    var store = this.getStore('TargetStore');
                   	if(data.records[0].get('name') == "")
                   		return false;
                   	var modelIdx = store.findExact("name",data.records[0].get('name'));
                   	if(modelIdx != -1)  // 如果已经存在,则为无效拖拽
                   		return false;
                },
                /*
                数据移动或复制过来之后触发的事件
                 */
                drop:function(node,data,overModel,dropPosition,eOpts){
    
                }
            }
                    },
    	columns : {
    		items : [{
    					text : "名称",
    					flex : 0.15,
    					dataIndex : "id",
    					hidden : true
    				}, {
    					text : "名称",
    					flex : 0.15,
    					dataIndex : "name"
    				}, {
    					text : "类型",
    					flex : 0.1,
    					dataIndex : "type"
    				}, {
    					text : "显示名称",
    					flex : 0.15,
    					dataIndex : "displayname",
    					editor : {
    						allowBlank : true
    					}
    				}, {
    					text : "显示值",
    					flex : 0.15,
    					dataIndex : "size",
    					editor : {
    						allowBlank : true
    					}
    			    }, {
    					text : "可分组",
    					flex : 0.1,
    					dataIndex : "groupable"
    
    				}, {
    					text : "可排序",
    					flex : 0.1,
    					dataIndex : "sortable"
    				}]
    	}
    });
    创建app/view/ Viewport.js(因app.js中有autoCreateViewport: true,则必须创建app/view/ Viewport.js文件)

    Ext.define('DD.view.Viewport', {
        extend: 'Ext.container.Viewport',
        layout:{
                    type: 'hbox',
                    align: 'stretch',
                    padding: 5
                },
        requires: [
            'DD.view.SourceGrid',
            'DD.view.TargetGrid'
        ],
        initComponent:function(){
                this.items = [{
                                    dock:'left',
                                    //xtype:'toolbar',
    
                                    items:[{
                                        xtype:'sourcegrid',
                                        width:350
                                    }]
                                },{
                                    dock:'right',
                                    //xtype:'toolbar',
    
                                    items:[{
                                        xtype:'targetgrid',
                                        width:350
                                    }]
                                }
                ]
            this.callParent();
        }
    });
    

    最后创建粘合剂—控制器app/controller/Main.js(如果不写Viewport.js的话,相应的代码要写到控制器中)

    Ext.define('DD.controller.Main', {
        extend: 'Ext.app.Controller',
        stores: ['SourceStore','TargetStore'],
        views: ['SourceGrid','TargetGrid']
    });
    

    到现在为止,一个完整的在两个grid之间拖拽功能就完成了。   


    资源文件:http://download.csdn.net/detail/littlechang/4419034


    展开全文
  • ExtJS拖拽效果

    千次阅读 2013-12-08 21:21:54
    ExtJS拖拽效果

    ExtJS拖拽效果

    <html>
        <head>
            <title>hello</title>
    		<meta http-equiv="content-type" content="text/html;charset=utf-8">
            <link rel="Stylesheet" type="text/css" href="http:10.19.1.55/lib/extjs/resources/css/ext-all.css" />
            <script type="text/javascript" src="http:10.19.1.55/lib/extjs/bootstrap.js"></script>
    		<script type="text/javascript" src="http:10.19.1.55/lib/extjs/locale/ext-lang-zh_CN.js"></script>
    		<style type="text/css">
    		</style>
            <script type="text/javascript">
                Ext.onReady(function(){
    				var drags=document.getElementsByTagName('li');
    				for(var i=0;i<drags.length;i++)
    				{
    					Ext.dd.Registry.register(drags[i]);
    				}
    				new Ext.dd.DragZone('today');
    				new Ext.dd.DragZone('tmrw');
    				
    				function drop(dropNodeData,source,event,dragNodeData)
    				{
    					var dragged=source.dragData.ddel;
    					var sourceContainer=source.el.dom;
    					var desContainer=this.getEl();
    					sourceContainer.removeChild(dragged);
    					desContainer.appendChild(dragged);
    					
    					return true;
    				}
    				var cfg={onNodeDrop:drop};
    				new Ext.dd.DropZone('today',cfg);
    				new Ext.dd.DropZone('tmrw',cfg);
                })
            </script>
        </head>
        <body>
    		<h1>Today</h1>
    		<ul id="today">
    			<li>shopping</li>
    			<li>haircut</li>
    		</ul>
    		<h1>Tomorrow</h1>
    		<ul id="tmrw">
    			<li>123</li>
    			<li>456</li>
    		</ul>
        </body>
    </html>










    展开全文
  • Extjs可视化工具,控件直接拖拽,自动生成code ,破解中文版 ======================================== Ext Designer Preview Extjs Extjs教程 Exjts可视化工具 Extjs拖拽工具
  • Extjs 拖拽实例

    2011-02-09 14:01:34
    Extjs 拖拽实例 body{ font-size:12px; margin:10px; } .item{ border:1px #000 solid; margin-right:10px; width:60px;...
    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
    
    <html>
    <head>
    <title>Extjs 拖拽实例</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="/test/extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/test/extjs/ext-all.js"></script>
    <script type="text/javascript" src="/test/extjs/ext-all-debug.js"></script>
    <link rel="stylesheet" type="text/css" href="/test/extjs/resources/css/ext-all.css">
    <style type="text/css">
    body{
    font-size:12px; margin:10px;
    }
    .item{
    border:1px #000 solid;
    margin-right:10px;
    width:60px;
    height:140px;
    text-align:center;
    padding-top:10px;
    color:white;
    float:left;
    cursor:pointer;
    }
    .block{
    border:1px red solid;
    height:380px;
    margin-top:50px;
    padding:20px 0 0 20px;
    clear:both;
    }
    </style>
    <script type="text/javascript">
    Ext.onReady(function(){
    var proxy = new Ext.dd.DDProxy("proxy");
    var proxy_red = new Ext.dd.DragSource('proxy_red',{group:'dd'});
    var proxy_green = new Ext.dd.DragSource('proxy_green',{group:'dd'});
    var proxy_yellow = new Ext.dd.DragSource('proxy_yellow',{group:'dd'});
    //拖拽完成的事件
    proxy_red.afterDragDrop = function(target,e,id){
    var destEl = Ext.get(id);
    var srcEl = Ext.get(this.getEl());
    var sColor = srcEl.dom.id.split('_')[1];
    destEl.dom.style.backgroundColor = sColor;
    };
    proxy_green.afterDragDrop = proxy_red.afterDragDrop;
    proxy_yellow.afterDragDrop = proxy_red.afterDragDrop;

    //建立拖动目标区
    var target = new Ext.dd.DDTarget('target','dd');

    });
    </script>
    </head>
    <body>
    <div>
    <div id="proxy_red" class="item" style="background:red">Red</div>
    <div id="proxy_green" class="item" style="background:green">Green</div>
    <div id="proxy_yellow" class="item" style="background:yellow">Yellow</div>
    <div id="proxy" class="item" style="background:pink;">我可以随便拖</div>
    </div>
    <div id="target" class="block">把上面有颜色的色块拖到我这里试试</div>

    </body>
    </html>

    本文转自 http://hi.baidu.com/hanlicun/blog/item/7d429c13f51bae2fdc540134.html
    展开全文
  • ExtJS拖拽导入Excel数据

    热门讨论 2013-08-23 10:22:14
    用户可以从excel中选中要导入的数据,直接拖拽到grid中
  • 强大的Extjs拖动示例

    2016-11-13 18:21:53
    此功能实现手动配备大数据过滤sql条件,具有详细注释易懂,实现方式简单。可更具此基础上写成拖动表单。
  • Extjs 拖拽实验例子

    2013-05-03 14:26:15
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ... 拖拽实验         body{  font-size:12px;margin: 10px;  }  .block {  clear:left;

    <!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: 60px;           
      height: 40px;            
      text-align:center;           
      padding-top:20px;           
      color:White;                 
      float:left;           
      cursor:pointer;                  
                   
     .BorderOver{
      border:dashed 2px #00f;
     }
    </style>
    </head>
    <body>

    <script type="text/javascript">

    Ext.onReady(function() { 

     var proxy = new Ext.dd.DDProxy("proxy");//这一句就可以建立一个随便拖的东东,神奇吧
     //(ExtJs的拖动组件分二大类,DDProxy就是要拖动的东西,而DDTarget就是拖动后可以扔进去的目标容器区)
     //以下建立了三个拖动源DropSource(继承自DDProxy可以查看官方文档),并标明gruop为dd      
     var proxy_red    =  new Ext.dd.DragSource('proxy_red', {group:'dd'});       
     var proxy_green  =  new Ext.dd.DragSource('proxy_green', { group:'dd' });       
     var proxy_black  =  new Ext.dd.DragSource('proxy_black', { group:'dd' });      
     
     //拖动完成的事件       
     proxy_red.afterDragDrop = function(target, e, id) {   
      var destEl = Ext.get(id);  
      var srcEl = Ext.get(this.getEl());           
      if (destEl.dom.id == "target2") {               
       if (srcEl.dom.id != "proxy_red") {                  
        destEl.dom.style.border = "solid #000 1px";                  
        alert("此区域仅接受red(红色)色块!");                   
        return false;               
                 
                
      var sColor = srcEl.dom.id.split('_')[1];     //得取拖动源id的后面一部分,即proxy_red后面的red
      //destEl.dom.style.backgroundColor = sColor;   //设置目标id的背景色 
      //destEl.dom.style.border = "solid #000 1px";
      
      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);alert("y:"+Y);
      
       var TextField35378 = new Ext.form.TextField({id:"TextField35378",
       labelSeparator:":" ,labelStyle:"text-align:right",
       inputType: 'text', name: '姓名',
       allowBlank: true,
       fieldLabel: '姓名',
       hidden: false, hideLabel: false,
       width: 120, x: X, y: Y});
       Designer.formPanel.add(TextField35378);
       Designer.formPanel.doLayout();
       //Designer.target.add(TextField35378);
       //Designer.target.doLayout();
      //alert(destEl.getX());
      
     };       
     
     proxy_red.onDragEnter = function(e, id) {           
       Ext.get(id).dom.style.border = "dashed #00f 2px";           
       Ext.get(id).dom.style.backgroundColor = "#fff";       
     }
     
     proxy_red.onDragOut = function(e, id) {   
      Ext.get(id).dom.style.border = "solid #000 1px";       
     
     
     //为其它拖动源赋值同样的事件处理函数
     proxy_green.afterDragDrop = proxy_red.afterDragDrop;        
     proxy_black.afterDragDrop = proxy_red.afterDragDrop;
       
     proxy_green.onDragEnter = proxy_red.onDragEnter; 
     proxy_black.onDragEnter = proxy_red.onDragEnter;    
     
     proxy_green.onDragOut = proxy_red.onDragOut;     
     proxy_black.onDragOut = proxy_red.onDragOut;
     
     
     
     var target = new Ext.dd.DDTarget('target', 'dd');    
     //建立拖动目标区(这里的dd与上面拖动源的group:dd相同
     
     //只有相同group的DDProxy/DragSource才会接受)
     var target2 = new Ext.dd.DDTarget('target2', 'dd');  
     Designer.uxForm();
     
    });
    </script>

    <script language="javascript">
    Ext.namespace('Designer');
    Designer.uxForm = function (){
      var formPanel = new Ext.form.FormPanel({  
     id:'formpanelid',
        header:false,
     frame:true,
     border:false,
     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) {   
       //Add some flare to invite drop.
       //formPanel.body.stopFx();
       //formPanel.body.highlight();
      },
      notifyDrop  : function(ddSource, e, data){

       // Reference the record (single selection) for readability
       //var selectedRecord = ddSource.dragData.selections[0];


       // Load the record into the form
       //formPanel.getForm().loadRecord(selectedRecord);


       // Delete record from the grid.  not really required.
       //ddSource.grid.store.remove(selectedRecord);

       //return(true);
      }
     }); 
     Designer.target = formPanelDropTarget;

    }

    </script>

    <div>   
     <div id="proxy_red" class="item" style="background:red">Red</div>
     <div id="proxy_green" class="item" style="background:green">Green</div>
     <div id="proxy_black" class="item" style="background:black">Black</div>
     <div id="proxy" class="item" style="color:Black">我可以<br/>随便拖</div>
    </div>

    <br/>
    <div id="uxform" style="margin-left:200px;margin-top:120px"></div>
    <br/>

    <!--
    <div id="target" class="block">把上面有颜色的色块拖到我这里试试</div>
    <div id="target2" class="block">把上面有颜色的色块拖到我这里试试(此区域仅接受红色块)</div>
    -->
    </body>
    </html>

    展开全文
  • Extjs 拖拽 设计器 (二)

    千次阅读 2013-05-03 14:25:38
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ... 拖拽实验         body{  font-size:12px;margin: 10px;  }  .block {  clear:left;
  • extjs拖拽,请教高手

    2008-12-02 10:28:12
    ddGroup: "tgDD", //这个就是注册一个可拖拽的panel,放到相应的组当中 height: 320, smtId:"", store: "", listeners: { notifyDrop : function(dd, e, data) { alert("12346"); var sm = grid....
  • 拖拽进行时,拖拽源不消失,保持原位不动。 拖拽放下时,新生成一个Panel。 在线等 急急急急急急急急急!!!!!!
  • //拖拽的组标识 group:'dd', //startDrag 为Ext.dd.DDProxy中的开始拖动的时候的方法,和onStartDrag用法类似 startDrag:function(x , y){ //this.getEl()获得的是一个...
  • ExtJS拖拽效果示例

    2020-10-26 13:45:32
    拖拽效果想必大家都有见到过吧,实现方式大同小异,在接下来的文章中为大家详细介绍下使用ExtJS是如何做到的
  • Extjs中的树拖拽和表格拖拽
  • extjs grid 拖拽

    2013-12-09 15:59:30
    功能需求:grid 拖拽 google了几篇,发现没有合适的资料,而且发现很多都是乱转载的,坑死人呀,还是决定自己研究下,去官网api搜索到 Ext.grid.plugin.DragDrop ptype:gridviewdragdrop ,没错这就是官方提供的...
  • Extjs Portal 拖拽并保存

    2011-05-23 15:20:58
    Extjs Portal 拖拽并保存 多个实例,直接运行。
  • extjs页面布局,可拖拽也可以根据你个人的需求,实现相关模块的显示和隐藏
  • Extjs Grid2Grid拖拽

    热门讨论 2012-07-09 16:39:24
    自己写的一个Extjs Grid2Grid拖拽
  • extjs panel拖动

    2012-11-16 09:56:46
    [code="java"] Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html:"... tb...
  • ExtJS 网格拖动

    2012-11-26 10:25:26
    这个问题困扰 几天了,求大神解决,关于Ext网格的拖动。现在需要多个网格相互拖动的情况下能够支持自己内部的拖动问题 var firstGrid = Ext.create('Ext.grid.Panel', { multiSelect: true, viewConfig: { ...
  • Extjs实现了数据的拖拽,最近做项目要到,整了一点,在此分享给大家。 以下是dataview的代码, xtype: 'dataview',  overItemCls: 'thcls-monitoruser-dataview-over',  cls:'thcls-monitoruser-dataview', ...
  • ExtJs拖动排序

    2018-08-12 18:43:21
    参考: http://blog.sina.com.cn/s/blog_65e5eb110101p5ig.html
  • 基于extjs拖动效果

    2017-09-23 20:34:05
    前言:ExtJs是一个基于js封装了 近300个类的框架,其属于面向对象的编程方法,mvc的设计模式,代码简洁,少量的代码即可实现强大的功能,无需写繁重的html代码。 废话不说,直接上代码: 一个拖动图片的功能: ...
  • 实现一个,左边是导航信息,右侧是展示区域,然后拖动 导航节点重新定位后,右侧也随之j进行布局变化,如下图: 核心方法: ExtJS容器对象.move(fromIdx,toIdx) 因为涉及的知识点较多,后期有空补上,先贴上...
  • ExtJs grid可拖拽

    2013-08-01 14:28:00
    ExtJS拖拽功能步骤:在定义grid的时候设置enableDragDrop:true 可以拖拽的功能在定义一个dropTarget如果获得用户选择了几行;var rows = data.selections;得到用户拖动到第几行var index = dd.getDragData(e)....
  • ExtJs Panel拖动代码

    2013-01-29 14:54:11
    Panel居中的办法 panel.el.center();
  • 首先引用extjs <script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext-3.1.1/ext-all.js"></script><scrip...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,144
精华内容 1,257
关键字:

extjs拖拽