源树中当然正常写,但要在treepanel设置两个属性
enableDrag : true,
ddGroup : 'jldTreeDragDrop', 这个名字重要,以后要一样。
下面是grid的处理
this.gridSmX=new Ext.grid.CheckboxSelectionModel({
singleSelect : true
});
this.cm = new Ext.grid.ColumnModel([
{header:'资源内部编码', sortable: true, dataIndex:'id',width:83},
{header:'资源名称', sortable: true, dataIndex:'name',width:90},
{header:'源系统名称', sortable: true, dataIndex:'sourceName',width:85},
{header:'源系统资源标识', sortable: true, dataIndex:'sourceId',width:100},
{header:'源系统资源名称', sortable: true, dataIndex:'sour_Psr_Name',width:100},
{header:'源系统资源编码', sortable: true, dataIndex:'sourcePsrNo',width:100},
{header:'运算符号',hidden:true,dataIndex:'symbol',width:90,renderer: this.formatSymbol,
editor:new Ext.form.ComboBox({
valueField:'ivalue',
displayField:'dvalue',
mode: 'local',
triggerAction : 'all',
store: new Ext.data.ArrayStore({
fields: ['ivalue', 'dvalue'],
data:[
['1', '加法(+)'],
['-1', '减法(-)']
]
})
})
},
{header:'系数',hidden:true,dataIndex:'factor',width:50,
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: true,
maxLength: 13,
decimalPrecision:6,
maxValue: 999999.999999
}),width:80
},
{header:'取绝对值',hidden:true,dataIndex:'abs',renderer: this.formatABS,
editor: new Ext.form.Checkbox(),width:75
},
{header:'操作', dataIndex:'oper',renderer:this.gridDeleteButton,width:75}
]);
this.ds = new Ext.data.JsonStore({
url:this.queryRelationUrl ,
fields: [
{name: 'id',mapping: 'psrid',type:'string'},
{name: 'name',mapping: 'psrName',type:'string'},
{name: 'sourceName',mapping: 'sourceSysName',type:'string'},
{name: 'sourceId',mapping: 'sourcePsrId',type:'string'},
{name: 'sour_Psr_Name',mapping: 'sourcePsrName',type:'string'},
{name: 'sourcePsrNo',mapping: 'sourcePsrNo',type:'string'},
{name: 'oper'},
{name: 'symbol',mapping:'symbol',type:'int'},
{name: 'factor',mapping:'factor',type:'double'},
{name: 'abs',mapping:'abs', type: 'bool'},
{name: 'sourceSysId',mapping: 'sourceSysId',type:'string'},
{name: 'psrTypeCode',mapping: 'psrTypeCode',type:'string'}
]
});
this.gridRela = new Ext.grid.EditorGridPanel({
region: 'center',
split: true,
cm: this.cm,
ds: this.ds,
sm: this.gridSmX,
loadMask:true,
autoScroll: 'true',
ddGroup : 'jldTreeDragDrop',
isTarget : true,
autoExpandColumn: 6,
stripeRows: true,
clicksToEdit: 1,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
listeners : {
render : function (g){
var secondGridDropTargetEl = this.getView().el.dom.childNodes[0].childNodes[1];
var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl,
{
ddGroup : 'jldTreeDragDrop',
copy : false,
notifyDrop : function(ddSource, e, data){
if(!proxyRelation.isQueryPsr){
disAlertInfo("请先选择左边的资源树里你要设置对应关系的资源!");
return ;
}
var sourceNode = ddSource.dragData.node;
if(sourceNode.attributes.isPsr=='false'){
disAlertInfo('不能对源系统资源类型设置对应关系');
return ;
}
var sourceParam=sourceNode.id.split("_");
proxyRelation.sourcePsrTypeId=sourceParam[0];
proxyRelation.sourcePsrId=sourceParam[1];
//调用方法统一处理拖动至树或者拖动至网格事件
proxyRelation.checkPsrRelationAndSave(proxyRelation.psrId,proxyRelation.psrTypeId,proxyRelation.sourceSys,proxyRelation.sourcePsrId,proxyRelation.sourcePsrTypeId,false);
}
});
}
}
});
//编辑表格
this.gridRela.on('afteredit',function(e){
var record = e.record;// 被编辑的记录
Ext.Ajax.request( {
url : proxyRelation.updateRelationUrl,
success: function(response, options) {
var json = Ext.decode(response.responseText);
if(!json){
disAlertInfo('更新对应关系失败,请检查书写数值');
//grid表格数据重新载入
proxyRelation.gridReloadFunction(proxyRelation.psrId,proxyRelation.psrTypeId);
}
},
params:{
'psrId' : record.data.id,
'psrTypeCode' : record.data.psrTypeCode,
'sourceSysId' : record.data.sourceSysId,
'sourcePsrId' : record.data.sourceId,
'symbol' : record.data.symbol,
'factor' : record.data.factor,
'abs' : record.data.abs
}
});
});
该grid有几个字段还要是可以编辑的,编辑后发到后台,所有用了EditGridpanel如果不需要编辑,用gridPanel也可以
下面是树的处理
this.tree = new Ext.tree.TreePanel({
split:true,
region:'west',
autoScroll:true,
animate:true,//开启动画效果
enableDrop: true,
width : 189,
minSize : 100,
maxSize : 500,
rootVisible:false,
dropConfig:{
ddGroup: 'jldTreeDragDrop',// 从Grid到Tree。如果是Tree内部节点拖动,使用'jldTreeDragDrop'
dropAllowed: true
},
loader: new Ext.tree.TreeLoader({
dataUrl:proxyRelation.psrTreeUrl
})
});
this.root = new Ext.tree.AsyncTreeNode({
text: '资源树',
expanded :true,
draggable:false,
id:'0'
});
this.tree.setRootNode(this.root);
//动态加载树的访问定义
this.tree.on('beforeload',function(node){
return proxyRelation.queryTreeParamsParse(node,proxyRelation.tree,proxyRelation.psrTreeUrl);
});
/**
* 处理树节点之间
*/
this.tree.on('beforenodedrop',function(e){
var sourceNode=e.source.dragData.node;
var targetNode=e.target;
if(sourceNode.attributes.isPsr=='false'){
disAlertInfo('源系统资源类型不能拖动');
return false;
}
if(targetNode.attributes.isPsr=='false'){
disAlertInfo('系统资源类型不能设置对应关系');
return false;
}
var par1=targetNode.id.split('_');
var TypeID=par1[0];
var psrID=par1[1];
var par2=sourceNode.id.split('_');
var sourceTypeID=par2[0];
var sourcePsrID=par2[1];
//调用方法统一处理拖动至树或者拖动至网格事件
return proxyRelation.checkPsrRelationAndSave(psrID,TypeID,proxyRelation.sourceSys,sourcePsrID,sourceTypeID,true);
});
分享到:
相关推荐
Grid组件是ExtJS4中的一个核心组件,用于展示大量结构化的数据。它提供了一种可滚动、可分页的方式来显示数据,并支持排序、筛选、编辑等功能。Grid的每一行都可以视为一个记录,通过Store进行数据管理。开发者可以...
本文将深入探讨一个具体的使用场景——如何实现从Tree组件到Grid组件的拖拽功能,并解决在清空Grid后拖拽功能失效的问题。这个问题在实际开发中可能会遇到,尤其是在需要动态管理数据的界面中。 首先,EXTJS的Tree...
在前端开发领域,EXTJS是一个强大的JavaScript框架,用于构建富客户端应用。本教程将带你入门EXTJS中的Tree组件,Grid组件以及Window组件,并通过实际案例展示如何与后台SSM(Spring MVC, Spring, MyBatis)框架交互...
ExtJS 是一个强大的JavaScript 框架,专用于构建富客户端Web应用。它提供了一整套组件化的用户界面元素,包括Panel、Window、Tree、Grid、Form和Store等,这些都是ExtJS的核心组件。本文将详细讲解这些知识点,帮助...
ExtJS是一个强大的JavaScript库,它提供了丰富的用户界面组件,包括可拖拽的元素,这使得在Web应用中创建动态和交互性的界面变得容易。 首先,让我们理解什么是ExtJS的Tree和Grid组件。Tree组件是用于展示层级结构...
在项目“bookSys”中,可能就是构建一个图书管理系统,用户可以通过树形结构浏览书籍分类,使用网格展示具体书籍信息,通过表单进行书籍的添加、修改和查询操作。 EXTJS4的灵活性和强大功能使其在企业级Web应用开发...
ExtJS表格Grid是一款强大的JavaScript组件,它在Web应用中用于展示和操作数据,尤其是在复杂的业务逻辑和大量数据处理中表现出色。这篇博客文章主要探讨了ExtJS Grid的全面功能,结合源码分析和实用工具,帮助开发者...
EXTJS 是一个流行的JavaScript库,专门用于构建富客户端Web应用程序。EXTJS 3.3是该框架的一个版本,它在2009年发布,带来了许多改进和新特性。中文文档对于中国开发者来说是一个非常宝贵的资源,因为它消除了语言...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,推拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格...
ExtJS是一个广泛使用的JavaScript库,特别适用于构建富客户端应用程序。3.0版本是该库的一个重要里程碑,提供了许多功能和改进。这篇文档将详细介绍ExtJS 3.0的中文API,帮助开发者更好地理解和使用这个框架。 一、...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...
ssh2的oa系统简单的oa哦 ...可以把grid直接拖到tree,不同于其他的例子,拖动grid后会在tree中加一个叶子节点,大家试下就会明白。 自己练习用的哦,做的不好不要骂我,哪里不好希望大家包涵。
在EXTJS教材和教程中,初学者会接触到EXTJS的核心组件之一——Grid Panel,这是一个功能强大的数据展示和操作工具。以下是对EXTJS Grid Panel的详细知识点解析: 1. **EXTJS Grid Panel的功能特性** - **丰富的...
- **Hello World程序**:通过一个简单的示例来展示如何快速搭建Extjs环境,并实现第一个应用。这通常包括创建HTML页面、引入Extjs库以及编写简单的JavaScript代码来显示一条消息。 ### Extjs4.0新特性 #### 第二讲...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...