`
wuhaowei12345
  • 浏览: 44306 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

extJs 中,tree向grid 拖动或者tree向另一个Tree拖动

阅读更多
源树中当然正常写,但要在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);
});
分享到:
评论

相关推荐

    ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局

    ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局

    Extjs中文文档.pdf

    ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。  功能丰富,无人能出其右  无论是界面之美,还是功能之强,ext的表格控件都高居榜首。  单选行,多选行,高亮显示选中的行,推拽...

    ext.net-extjs

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...

    extjs2.2.1

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,推拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...

    EXTJS开发文档

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...

    EXTJS 3.3.1例子

     再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格...

    extjs3.2 资源包文件

    再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...

    ExtJS(ajax框架) 4.2.1

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...

    ExtJS 4.2.0

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...

    extjs4.0开发技术文档

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...

    基于s2sh+Extjs+dwr OA系统带全部JAR

    ssh2的oa系统简单的oa哦 ...可以把grid直接拖到tree,不同于其他的例子,拖动grid后会在tree中加一个叶子节点,大家试下就会明白。 自己练习用的哦,做的不好不要骂我,哪里不好希望大家包涵。

    ExtJs实例代码

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...

    EXTJS 3.0中文版文档+实例

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...

    ssh2 extjs oa

    可以把grid直接拖到tree,不同于其他的例子,拖动grid后会在tree中加一个叶子节点,大家试下就会明白。 系统默认用户名密码 都为 admin 自己练习用的哦,做的不好不要骂我,哪里不好希望大家包涵。 本人qq :...

    Ext js-2.0 带API

    ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。  功能丰富,无人能出其右  无论是界面之美,还是功能之强,ext的表格控件都高居榜首。  单选行,多选行,高亮显示选中的行,推拽...

    Ext js 教程大全

    再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...

    extjs学习 功能丰富,无人能出其右

     再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...

    ExtJsPPt.zip

     再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格...

    自己用ssh2 和 ext 做的简单oa

    可以把grid直接拖到tree,不同于其他的例子,拖动grid后会在tree中加一个叶子节点,大家试下就会明白。 自己练习用的哦,做的不好不要骂我,哪里不好希望大家包涵。 本人qq :784027965 大家学习happy哈^_^

    掏钱学Ext(完整版) 附全部源码

    2.2. 让我们搞一个grid出来耍耍吧。 2.3. 上边那个是1.x的,2.0稍微有些不同哦 2.4. 按顺序,咱们先要把常见功能讲到,让grid支持按列排序 2.5. 让单元格里显示红色的字,图片,按钮,你还能想到什么? 2.6. ...

Global site tag (gtag.js) - Google Analytics