peter2009
- 浏览: 552200 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
beck_iceblock：
[/color][color=white][color=oli ...
MYSQL的group_concat()函数中实现将多行同一字段数据合并成一个数据 -
瞎折腾球：
fristname 和 list name ，email填什么 ...
JetBrain WebStorm 注册码 -
瞎折腾球：
Your license key cannot be foun ...
JetBrain WebStorm 注册码 -
学习学习学习11111：
第一个可用，感谢 ，赞一个
JetBrain WebStorm 注册码 -
ichenwenjin：
不错,能用
JetBrain WebStorm 注册码
将TreePanel的数据向GridPanel中拖拽的功能！
Ext.onReady(function(){
//创建tree
var tree = new Ext.tree.TreePanel({
ddGroup : 'gridDDGroup',
title:'全部的组织机构',
animate:true,
autoScroll:true,
loader:new Ext.tree.TreeLoader({
dataUrl: apppath+'/back/jsp/organise/findalldepartment.html',
listeners:{
'beforeload':function(treeloader,node){
this.baseParams.depparentid = node.attributes.depid;
}
}
}),
root: new Ext.tree.AsyncTreeNode({
depid:157,iconCls:'depicon',
text:'利星行集团',id:'157'
}),
enableDD:true,
containerScroll: true,
border : true,
width : 250,
height : 300,
region : 'west',
listeners:{'nodedrop':function(e){}},
dropConfig: {appendOnly:true}
});
tree.getRootNode().expand();
//创建GridPanel
var myData = [];
var fields = [
{name: 'deplevel',mapping : 'deplevel'},
{name: 'depid' ,mapping : 'depid'},
{name: 'depparentid',mapping : 'depparentid'},
{name: 'depparentname',mapping : 'depparentname'},
{name: 'text', mapping:'depname'}
];
// create the data store
var gridStore = new Ext.data.JsonStore({
fields : fields,
url : 'findallorgrolesbyroleid.html',
baseParams : {ids:roledepid},
autoLoad : true
});
window.delRecord = function(value){
var _sel = grid.getSelectionModel().getSelections();
gridStore.remove(_sel[0]);
}
// Column Model shortcut array
var cols = [
{id : 'text', header: "单位名称", width: 100, sortable: true, dataIndex: 'text'},
{header: "上级单位名称", width: 150, sortable: true, dataIndex: 'depparentname'},
{header: "单位编号", width: 100, sortable: true, dataIndex: 'depid'},
{header:"删除",width:100,sorttable:true,dataIndex:'depid',renderer:function(value){
return '<a href="#" onClick="delRecord('+value+')">删除</a>';
}}
];
// declare the source Grid
var grid = new Ext.grid.GridPanel({
store : gridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'text',
width : 325,
region : 'center',
title : '所管理的单位',
selModel : new Ext.grid.RowSelectionModel({singleSelect : true})
});
//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
title:'"'+rolename+'"-主管部门管理',
width : 650,
height : 300,
layout : 'border',
tbar:['->','-',
{
text:'保存',
iconCls:'db-icn-add',
handler:function(){
var _ids = new Array();
for (var i = 0; i < grid.getStore().getCount(); i++) {
var _rec = grid.getStore().getAt(i);
_ids.push(_rec.get('depid'));
}
Ext.Ajax.request({
url:'updateorgroles.html',
params:{ids:_ids.join(','),rid:roleid},
method:'POST',
success:function(option,response){
var _obj = Ext.decode(option.responseText);
if(_obj.success){
Ext.example.msg('系统提示', '保存管理单位权限成功! ');
}else{
Ext.example.msg('系统提示', '保存管理单位权限失败! ');
}
},
failure:function(option,response){
Ext.example.msg('系统提示', '保存管理单位权限失败! ');
}
});
}
},'-',
{
text:'树形列表方式查看',
iconCls:'tree',
handler:function(){
var _form = document.createElement('form');
document.body.appendChild(_form);
_form.action = 'organiserolestree.jsp';
_form.method = 'POST'
var _ids = document.createElement('input');
_ids.value = roledepid;
_ids.name = 'depids';
_ids.type = 'hidden';
var _id = document.createElement('input');
_id.value = roleid;
_id.name = 'id';
_id.type = 'hidden';
var _name = document.createElement('input');
_name.value = rolename;
_name.name = 'name';
_name.type = 'hidden';
_form.appendChild(_ids);
_form.appendChild(_id);
_form.appendChild(_name);
_form.submit();
}
}
,'-',
{
text:'返回权限管理',
iconCls:'btn-login-reset',
handler:function(){
location.href = apppath+'/back/jsp/roles/roles.html';
}
}
],
items : [tree,grid],
bbar : [
'->', // Fill
{
text : '清除重新选择',
iconCls : 'bin_empty',
handler : function() {
gridStore.loadData(myData);
}
},'-',
{
text : '刷新列表',
iconCls : 'refresh',
handler : function() {
gridStore.reload();
}
}
]
});
var _view = new Ext.Viewport({
items:[displayPanel],
renderTo:Ext.getBody(),
layout:'fit'
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view container
var formPanelDropTargetEl = grid.body.dom;
//
var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
ddGroup : 'gridDDGroup',
notifyEnter : function(ddSource, e, data) {
grid.body.stopFx();
grid.body.highlight();
},
notifyDrop : function(ddSource, e, data){
//这里添加选择的数据将选择的数据make a record 加到数据集里面
var node = ddSource.dragData.node;
//判断是否选择了同一个部门,不允许选择同一个部门!
var _ishave = false;
for (var i = 0; i < grid.getStore().getCount(); i++) {
var _rec = grid.getStore().getAt(i);
if(_rec.get('depid')==node.attributes.depid)
{
_ishave = true;
break;
}
}
if(_ishave){
Ext.example.msg('系统提示', '您已经有管理这个" {0} "部门(单位)的权限了! ', node.attributes.text);
return;
}
var Department = grid.getStore().recordType;
var dep = new Department({
deplevel: node.attributes.deplevel,
depid: node.attributes.depid,
depparentid: node.attributes.depparentid,
depparentname: node.attributes.depparentname,
text: node.attributes.text
});
gridStore.insert(0,dep);
return(true);
}
});
});
- 大小: 16.1 KB
0
顶
顶
2
踩
踩
分享到：
评论
2 楼
peter2009
2011-07-30
我参考着Ext3 的 例子
搞定了
谢谢哈
搞定了
谢谢哈
/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
//创建tree
var tree = new Ext.tree.TreePanel({
ddGroup : 'gridDDGroup',
title:'全部的组织机构',
animate:true,
autoScroll:true,
loader:new Ext.tree.TreeLoader({
dataUrl: apppath+'/back/jsp/organise/findalldepartment.html',
listeners:{
'beforeload':function(treeloader,node){
this.baseParams.depparentid = node.attributes.depid;
}
}
}),
root: new Ext.tree.AsyncTreeNode({
depid:157,iconCls:'depicon',
text:'集团',id:'157'
}),
enableDD:true,
containerScroll: true,
border : true,
width : 250,
height : 300,
region : 'west',
listeners:{'nodedrop':function(e){}},
dropConfig: {appendOnly:true}
});
tree.getRootNode().expand();
//创建GridPanel
var myData = [];
var fields = [
{name: 'deplevel',mapping : 'deplevel'},
{name: 'depid' ,mapping : 'depid'},
{name: 'depparentid',mapping : 'depparentid'},
{name: 'depparentname',mapping : 'depparentname'},
{name: 'text', mapping:'depname'}
];
// create the data store
var gridStore = new Ext.data.JsonStore({
fields : fields,
url : 'findallorgrolesbyroleid.html',
baseParams : {ids:roledepid},
autoLoad : true
});
window.delRecord = function(value){
var _sel = grid.getSelectionModel().getSelections();
gridStore.remove(_sel[0]);
}
// Column Model shortcut array
var cols = [
{id : 'text', header: "单位名称", width: 100, sortable: true, dataIndex: 'text'},
{header: "上级单位名称", width: 150, sortable: true, dataIndex: 'depparentname'},
{header: "单位编号", width: 100, sortable: true, dataIndex: 'depid'},
{header:"删除",width:100,sorttable:true,dataIndex:'depid',renderer:function(value){
return '<a href="#" onClick="delRecord('+value+')">删除</a>';
}}
];
// declare the source Grid
var grid = new Ext.grid.GridPanel({
store : gridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'text',
width : 325,
region : 'center',
title : '所管理的单位',
selModel : new Ext.grid.RowSelectionModel({singleSelect : true})
});
//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
title:'"'+rolename+'"-主管部门管理',
width : 650,
height : 300,
layout : 'border',
tbar:['->','-',
{
text:'保存',
iconCls:'db-icn-add',
handler:function(){
var _ids = new Array();
for (var i = 0; i < grid.getStore().getCount(); i++) {
var _rec = grid.getStore().getAt(i);
_ids.push(_rec.get('depid'));
}
Ext.Ajax.request({
url:'updateorgroles.html',
params:{ids:_ids.join(','),rid:roleid},
method:'POST',
success:function(option,response){
var _obj = Ext.decode(option.responseText);
if(_obj.success){
Ext.example.msg('系统提示', '保存管理单位权限成功! ');
}else{
Ext.example.msg('系统提示', '保存管理单位权限失败! ');
}
},
failure:function(option,response){
Ext.example.msg('系统提示', '保存管理单位权限失败! ');
}
});
}
},'-',
{
text:'树形列表方式查看',
iconCls:'tree',
handler:function(){
var _form = document.createElement('form');
document.body.appendChild(_form);
_form.action = 'organiserolestree.jsp';
_form.method = 'POST'
var _ids = document.createElement('input');
_ids.value = roledepid;
_ids.name = 'depids';
_ids.type = 'hidden';
var _id = document.createElement('input');
_id.value = roleid;
_id.name = 'id';
_id.type = 'hidden';
var _name = document.createElement('input');
_name.value = rolename;
_name.name = 'name';
_name.type = 'hidden';
_form.appendChild(_ids);
_form.appendChild(_id);
_form.appendChild(_name);
_form.submit();
}
}
,'-',
{
text:'返回权限管理',
iconCls:'btn-login-reset',
handler:function(){
location.href = apppath+'/back/jsp/roles/roles.html';
}
}
],
items : [tree,grid],
bbar : [
'->', // Fill
{
text : '清除重新选择',
iconCls : 'bin_empty',
handler : function() {
gridStore.loadData(myData);
}
},'-',
{
text : '刷新列表',
iconCls : 'refresh',
handler : function() {
gridStore.reload();
}
}
]
});
var _view = new Ext.Viewport({
items:[displayPanel],
renderTo:Ext.getBody(),
layout:'fit'
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view container
var formPanelDropTargetEl = grid.body.dom;
//
var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
ddGroup : 'gridDDGroup',
notifyEnter : function(ddSource, e, data) {
grid.body.stopFx();
grid.body.highlight();
},
notifyDrop : function(ddSource, e, data){
//这里添加选择的数据将选择的数据make a record 加到数据集里面
var node = ddSource.dragData.node;
//判断是否选择了同一个部门,不允许选择同一个部门!
var _ishave = false;
for (var i = 0; i < grid.getStore().getCount(); i++) {
var _rec = grid.getStore().getAt(i);
if(_rec.get('depid')==node.attributes.depid)
{
_ishave = true;
break;
}
}
if(_ishave){
Ext.example.msg('系统提示', '您已经有管理这个" {0} "部门(单位)的权限了! ', node.attributes.text);
return;
}
var Department = grid.getStore().recordType;
var dep = new Department({
deplevel: node.attributes.deplevel,
depid: node.attributes.depid,
depparentid: node.attributes.depparentid,
depparentname: node.attributes.depparentname,
text: node.attributes.text
});
gridStore.insert(0,dep);
return(true);
}
});
});
1 楼
babydeed
2011-07-28
少了很多很多
以下代码还需修改 你自己改改吧
以下代码还需修改 你自己改改吧
<script type="text/javascript">
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
title:'全部的组织机构',
animate:true,
el:"tree",
autoScroll:true,
loader: new Ext.tree.TreeLoader(),
enableDD:true,
containerScroll: true,
border: true,
width: 250,
height: 300,
ddGroup:"xx"
//,dropConfig: {appendOnly:true}
});
var root = new Ext.tree.TreeNode({
text: 'Ext JS1',
draggable:false, // disable root node dragging
id:'src'
});
var node1 = new Ext.tree.TreeNode({
text: 'Ext JS2',
draggable:true, // disable root node dragging
id:'src'
});
var node2 = new Ext.tree.TreeNode({
text: 'Ext JS',
draggable:true, // disable root node dragging
id:'src'
});
root.appendChild(node1);
root.appendChild(node2);
var grid = new Ext.grid.GridPanel(
{
store:new Ext.data.JsonStore({
data:[{id:'1',name:'aa'},{id:'2',name:'bb'}],
autoLoad:true,
fields:['id','name']
}),
renderTo:"g",
ddGroup:"xx",
enableDragDrop: true,
//draggable:true,
cm:new Ext.grid.ColumnModel([{dataIndex:'id',header:'编号'},{dataIndex:'name',header:'名称'}]),
width:250,
height:300
}
);
tree.setRootNode(root);
var f = Ext.data.Record.create([
{name: 'id', type: 'string'},
{name: 'name', type: 'name'}
]);
var dropZone = new Ext.dd.DropZone(grid.getEl(),{
ddGroup: 'xx',
notifyDrop: function(source, e, obj) {
var r = new f({"id":obj.node.id,"name":obj.node.text});
grid.store.add(r)
}
});
tree.render();
root.expand(true, true);
});
</script>
</head>
<body>
<div id="tree" style="height:300px;"></div>
<div id="g" style="height:300px;"></div>
</body>
</html>
发表评论
-
JetBrain WebStorm 注册码
2013-11-16 20:03 355992webStorm : UserName:William == ... -
乱喷的人名——未成年勿记
2013-07-27 16:41 2而至于那些什么北条香 ... -
理解转义的奥秘了
2013-04-25 16:51 889_o.innerHTML += '<div class= ... -
Sencha Touch2 后退按钮的导航应用
2012-05-29 16:13 4963Sencha Touch2 后退按钮的导航应用 系统中设置几个 ... -
可以将Upload控件里面的内容清空的代码
2012-02-20 08:53 1155_win.form.getForm().getEl().dom ... -
一个大师高深的评论：
2011-12-16 09:20 948一个大师高深的评论： 一定的N层结构, 层数越多越 ... -
比较工具3注册码
2011-12-06 10:16 455mv1nPlXAywBDCdhxFc9QOVv6TBcQHLA ... -
表单验证
2011-09-08 08:56 858{ xtype:'textfield', ... -
用JS获取请求地址中的参数和值
2011-08-30 10:33 3044unction GetUrlParameter(paramNa ... -
真有这样的好企业吗！ Dream Team
2011-08-27 11:20 1077一定的N层结构, 层数越多越好,层少了用户误会我们 ... -
ExtJs 与 Structs2交互的几大总结
2011-08-05 08:36 2485package com.ysu.core.action; ... -
写一个Ext控件的理论
2011-08-05 08:29 1040经大漠穷秋的点拨 编写一个Ext的控件要注意一下 ini ... -
学习一个东西的步骤
2011-03-14 15:56 833个人觉得学习一个东西的步骤： 注 这个是KK 的经验 我只是 ... -
我的2011计划安排
2011-01-21 13:47 8631. 在这一年里 学会用 JBOSS，IBM WEBSPARE ... -
Ext Combox在手动输入的时候hiddenName和name不能重复
2010-09-16 13:26 2941... -
关于GridPanel中 行操作参数传递的问题
2010-09-16 11:01 1202var outcm = new Ext.grid.Colu ... -
关于两个form中 Ext DateField 表单的验证
2010-09-05 14:41 2988//判断两个日期差 Ext.apply(Ext.form ... -
Ext Grid 查询并能分页的代码
2010-08-06 15:03 1818最终完整代码为 onQueryWinSubmit:fu ... -
Ext TabPanel 的竖排布局
2010-03-01 12:37 1574TabPanel 这样能布局吗！ 想把这个变成下面那幅图的样 ... -
轻松修改TreePanel 的图标样式 和 背景图片
2010-02-09 14:26 7312给树形结构定义图标 的css .x-tree-node- ...
相关推荐
在EXT JS这个强大的JavaScript框架中，TreePanel是用于展示层级数据的一个组件，它通常用于构建树形结构，例如文件系统、组织结构等。本主题主要关注EXT的TreePanel中的拖放（Drag and Drop）功能，这是一项允许用户...
在实际开发中，`exttree` 文件可能是这个库的一个示例或者实现文件，包含了使用 GWT-Ext-Tree 创建树形结构的代码。通过对这个文件的学习和理解，开发者可以更好地掌握如何在项目中集成和使用 GWT-Ext-Tree 组件。 ...
2. **可拖拽的tree**：在这样的tree中，用户可以直观地通过拖放操作来改变节点的位置，重新组织tree的结构。这种功能常用于需要自定义排序或者调整层次关系的应用场景，如项目管理工具或文件管理系统。实现时需要...
"ext tree json 例子（不含EXT包）"这个标题暗示我们将讨论如何在不直接引用EXT完整包的情况下，仅使用EXT JS中关于TreePanel和JSON解析的部分来构建一个动态的树形结构。这可能涉及到手动引入EXT的核心组件，如...
本文将深入探讨一个具体的使用场景——如何实现从Tree组件到Grid组件的拖拽功能，并解决在清空Grid后拖拽功能失效的问题。这个问题在实际开发中可能会遇到，尤其是在需要动态管理数据的界面中。 首先，EXTJS的Tree...
在IT领域，拖拽功能是用户界面中常见的一种交互方式，尤其在数据可视化和管理工具中，例如ExtJS的树形组件（Tree）。本项目主要关注如何在完成拖拽操作后，更新并保存树节点的新顺序。ExtJS是一个强大的JavaScript库...
以前有许多人需要将 tree 的节点拖拽到其他控件中的问题，前段时间已经解决了，现在也将它的源代码贡献上来。 这个树的数据是静态的，没有做动态的，而且树节点的拖拽也没有做过多的处理，如果要知道怎么样做树...
通过对Ext JS中树(Tree)和表格(Grid)控件拖拽功能的研究，我们可以看到其实现的核心在于正确配置拖动源和目标对象的相关属性，并利用`DragSource`和`DropTarget`这两个关键类来实现整个拖拽流程。掌握了这些原理和...
本文将详细探讨如何使用ExtJS库实现拖拽树（Drag and Drop Tree）的功能，以及如何在实际项目中进行测试。 首先，ExtJS是一个强大的JavaScript框架，它提供了丰富的组件和功能，用于构建富客户端的Web应用程序。在...
EXTJS 是一个强大的JavaScript 应用程序框架，用于构建富客户端Web应用。..."EXT 控件拖动例子"项目提供的代码可能涵盖了从基础的拖放实现到复杂的动态布局调整的完整流程，是学习EXTJS高级特性的宝贵资源。
根据提供的信息，我们可以深入探讨Ext JS中的拖动功能，特别是针对树(Tree)和表格(Grid)的拖动操作。本文将详细介绍这些概念和技术要点。 ### 一、Ext JS 拖动的基本概念 #### 1.1 拖动源与目标 在Ext JS中，拖动...
由于项目的需要最近在学习ext，在项目中必不可少用到了tree，并且要对tree进行增、改、删的操作。上网找了很多不错的学习资料把这些功能组织在一起。在学习ext的过程中花了不少时间，我想很多网友刚开始学习ext的...
"Ext用户扩展控件-------支持树上多个节点和叶子的拖动"是EXT JS中的一个高级特性，它增强了EXT JS的树形控件（TreePanel），允许用户通过拖放操作在树结构中移动多个节点和叶子。这一功能对于数据组织和展示特别...
在本文中，我们将深入探讨如何使用ExtJS框架实现拖拽功能，特别是在树形视图（Tree）和表格视图（Grid）之间的交互。ExtJS是一个强大的JavaScript库，它提供了丰富的用户界面组件，包括可拖拽的元素，这使得在Web...
Ext TreeGrid是一款在Ext JS框架下开发的组件，它结合了Tree和Grid的优点，提供了一种既能展示层次结构数据又能进行表格样式的显示和操作的视图。在Ext JS库中，Tree通常用于展现层级关系的数据，而Grid则用于显示二...
拖放功能通过`Ext.dd`和`Ext.util.Draggable`等类实现，这些类提供了事件监听和处理机制，使得开发者能够轻松实现自定义的拖放行为。 2. **Grid组件**： Grid组件是ExtJS4中的一个核心组件，用于展示大量结构化的...
4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做，默认的平铺布局 4.8.2. 分裂，分列 4.8.3. fieldset是个神奇的东西 4.8.4. 当某一天，需要往form加个图片什么的，该咋办？ 4.9. 还要做文件上传哟 4.10. 非想非...
本文详细介绍了如何使用Ext JS框架实现从TreePanel到Panel的拖拽功能。通过深入分析代码示例，我们了解了整个实现过程的关键步骤。这种交互方式不仅能够提高用户界面的友好度，还能够使应用更加灵活多变，满足不同...
即：Ext.window 4.mainPage.html为tab布局，右面为tree中间为tab页面。 5.tz-normal-test.html为普通拖拽的练习。 6.tree-asynch-test.html为异步加载的树 7.tree-edit-test.html为节点可以编辑的树 8.tree-tz-test....
4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做，默认的平铺布局 4.8.2. 分裂，分列 4.8.2.1. 分裂，分列。1.x 4.8.2.2. 分裂，分列。2.0 4.8.3. fieldset是个神奇的东西 4.8.4. 当某一天，需要往form加个图片...