功能需求:grid 拖拽
google了几篇,发现没有合适的资料,而且发现很多都是乱转载的,坑死人呀,还是决定自己研究下,去官网api搜索到 Ext.grid.plugin.DragDrop ptype:gridviewdragdrop ,没错这就是官方提供的grid插件。
猛读了一阵会发现2个单词比较显眼 drag 和 drop, 个人理解为:drag -- 托,drop -- 放,因为发现2个配置项enableDrag : Boolean , enableDrop : Boolean,当设置 enableDrag : false 则只允许接收被拖放对象不允许自身的拖动,其它情况没有测试,这2个词搞清楚那么这个插件也就很容易理解啦,使用实例如下。
//grid 配置
Ext.create('Ext.grid.Panel', {
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
ddGroup: 'DragDropGroup'//此处代表拖动的组 拖动组件与放置组件要同属一组才能实现相互拖放
}
},
......
});
Ext.create('Ext.tree.Panel', {
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
ddGroup: 'DragDropGroup',
enableDrag : false //配置tree不允许拖动
},
listeners: {
beforedrop: function(node, data, overModel, dropPosition, dropHandlers) {//注:此处事件是gridviewdragdrop 的放置监听事件
dropHandlers.wait = true;
Ext.MessageBox.confirm('Drop', 'Are you sure', function(btn){
if (btn === 'yes') {
dropHandlers.processDrop();
} else {
dropHandlers.cancelDrop();
}
});
},
drop: function( node, data, overModel, dropPosition, eOpts) {
//data.records[0].get('name') grid中的拖动行的name列数据值
//overModel.get('id') tree中被拖放到的节点的id值
alert(data.records[0].get('id') + overModel.get('id'));
//todo ....
}
}
},
......
});
分享到:
相关推荐
"Grid2Grid拖拽"功能是指在两个ExtJS Grid之间通过鼠标拖放操作来移动或复制行数据。这种功能在数据管理、比较和操作场景中非常实用。 在实现"Extjs Grid2Grid拖拽"时,主要涉及以下几个关键知识点: 1. **ExtJS ...
在"ExtJS5学习之Grid与Grid之间的数据拖拽"这个主题中,我们将深入探讨如何实现这种交互功能,以及背后的机制和重要知识点。 首先,我们要了解ExtJS的Grid组件。Grid是一种可配置的表格视图,它可以显示大量的结构...
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
ExtJS Grid支持拖放功能,用户可以调整列顺序,或者将数据行拖动到不同的组或位置。 11. **组合列(Grouping Columns)** 数据可以按需分组,显示折叠/展开的层次结构,方便用户查看和操作数据。 12. **树形Grid...
Extjs Portal 拖拽并保存 多个实例,直接运行。
用户可以从excel中选中要导入的数据,直接拖拽到grid中
在"ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局"中,我们将会探讨以下几个核心概念: 1. **Drag and Drop(拖放)**: ExtJS4提供了完善的拖放支持,允许用户通过鼠标操作在界面上移动元素...
EXTJS4中的网格可以配合各种插件,如行编辑、列拖动、导出Excel等,以满足不同需求。数据与网格通过store进行绑定,可以通过proxy设置数据源,如Ajax或内存数据。 表单(Form)组件是EXTJS用于收集和展示用户输入的...
3. 创建列模型(ColumnModel):定义GridPanel的列,包括列的标题、数据字段绑定、宽度等,例如`Ext.grid.ColumnModel`。 4. 实例化GridPanel:配置GridPanel的各种属性,如高度、宽度、是否可拖动列等,然后将...
- **与其他组件交互**:Grid之间以及与Tree组件之间的拖拽操作也是EXTJS的一大亮点。 2. **EXTJS Grid Panel的实现** - **ColumnModel**:定义了Grid的列结构,是构建Grid的基础。例如,创建一个包含编号、名称和...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,推拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
在本文中,我们将深入探讨如何使用ExtJS框架实现拖拽功能,特别是在树形视图(Tree)和表格视图(Grid)之间的交互。ExtJS是一个强大的JavaScript库,它提供了丰富的用户界面组件,包括可拖拽的元素,这使得在Web...
EXTJS的Grid Panel是用于展示数据的组件,它支持数据分页、排序、过滤等多种功能。在使用过程中,有时会遇到内置滚动条失效的问题,这可能导致用户无法通过滚动查看到更多的数据记录。本文将深入探讨这个问题及其...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...
3. **组件库**:EXTJS 3.3包含了大量的预定义组件,如Grid面板、Tree面板、表单组件等。中文文档会详细介绍这些组件的使用方法、配置选项以及事件处理。 4. **数据管理**:EXTJS的数据模型(Model)、数据存储...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...