Extjs拖拽
最近项目前台使用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