Extjs拖拽

最新推荐文章于 2022-09-26 13:52:33 发布

littlechang

最新推荐文章于 2022-09-26 13:52:33 发布

阅读量7.8k

点赞数

分类专栏： javascript脚本文章标签： extjs flex autoload plugins stylesheet function

本文链接：https://blog.youkuaiyun.com/littlechang/article/details/7729708

版权

javascript脚本专栏收录该内容

16 篇文章

订阅专栏

最近项目前台使用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.youkuaiyun.com/detail/littlechang/4419034