最近项目前台使用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之间拖拽功能就完成了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。