Extjs拖拽

发布时间：2020-12-15 04:55:50 所属栏目：百科来源：网络整理

导读：最近项目前台使用Extjs实现，其中用到了Ext的Gridpanel的拖拽，现把相关内容总结，并写成一个例子。本例子使用Extjs4.1的mvc模式实现。第一步搭建程序架构创建index.html文件，创建app.js文件，创建app/model、app/view、app/controller和app/store目录。

最近项目前台使用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','displayname','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',{id:5,name: 'type',{id:6,name: 'spq',{id:7,name: 'yearmonth',{id:8,name: 'lpq',{id:9,name: 'llr',4'}
    ]
});

创建app/store/TargetStore.js，内容如下：

Ext.define('DD.store. TargetStore,requires: 'DD.model.Target',model: 'DD.model.Target',displayname: '分压名称',size:'100',groupable:"是",sortable:"否"},displayname: '分压ID',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: "名称",dataIndex: "displayname"
    	        },{
    	        	text: "类型",flex: 0.3,dataIndex: "type"
    	        },{
    	        	text: "字段长度",dataIndex: "size"
    	        }]
    }
});

创建app/view/ TargetGrid.js

Ext.define('DD.view.TargetGrid',{
	extend : 'Ext.grid.Panel',alias : 'widget.targetgrid',border : true,store : 'TargetStore',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,eOpts){

            }
        }
                },columns : {
		items : [{
					text : "名称",flex : 0.15,dataIndex : "id",hidden : true
				},{
					text : "名称",dataIndex : "name"
				},{
					text : "类型",flex : 0.1,dataIndex : "type"
				},{
					text : "显示名称",dataIndex : "displayname",editor : {
						allowBlank : true
					}
				},{
					text : "显示值",dataIndex : "size",editor : {
						allowBlank : true
					}
			    },{
					text : "可分组",dataIndex : "groupable"

				},{
					text : "可排序",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',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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!