Project

General

Profile

Download (8.95 KB) Statistics
| Branch: | Revision:

git_sitools_idoc / Module_DatasetExplorerOchart_sitools2 / ExtJSOrgChart.js @ 20ff13ec

1 20ff13ec shye0000
/**
2
 * Converted into Ext JS by : Shariq Shaikh
3
 *
4
 * http://twitter.com/shaikhmshariq
5
 * Adopted from jQuery org-chart/tree plugin (https://github.com/wesnolte/ExtJSOrgChart).
6
 *
7
 * Author: Wes Nolte
8
 * http://twitter.com/wesnolte 
9
 *
10
 * Based on the work of Mark Lee
11
 * http://www.capricasoftware.co.uk 
12
 *
13
 * Copyright (c) 2011 Wesley Nolte
14
 * Dual licensed under the MIT and GPL licenses.
15
 *
16
 */
17
Ext.namespace('sitools.user.modules.ExtJSOrgChart');
18
//structure to hold node details 
19
sitools.user.modules.ExtJSOrgChart.createNode = function (node){
20
        //this.parentId=parentId;
21
        //this.id=id;
22
        this.text=node.text;
23
        this.id=node.datasetId;
24
        this.type=node.type;
25
        this.url=node.url;
26
        this.Nb=node.nbRecord;
27
        this.description=node.description;
28
        if (!Ext.isEmpty(node.imageDs)) {
29
                this.image=node.imageDs;
30
        } else if (!Ext.isEmpty(node.image)){
31
                this.image=node.image.url;
32
        } else {
33
                this.image=SITOOLS_DEFAULT_PROJECT_IMAGE_URL;
34
        }
35
        this.child= new Array();
36
        this.getImage=getImage;
37
        function getImage(){
38
                return this.image;
39
        }
40
        this.getText=getText;
41
        function getText(){
42
                return this.text;
43
        }
44
        this.getUrl=getUrl;
45
        function getUrl(){
46
                return this.url;
47
        }
48
        this.getID=getID;
49
        function getID(){
50
                return this.id;
51
        }
52
        this.getType=getType;
53
        function getType(){
54
                return this.type;
55
        }
56
        this.getNb=getNb;
57
        function getNb(){
58
                return this.Nb;
59
        }
60
        this.getDes=getDes;
61
        function getDes(){
62
                return this.description;
63
        }
64
        this.getChildNodes=getChildNodes;
65
        function getChildNodes(){
66
                return this.child;
67
        }
68
        this.hasChildNodes=hasChildNodes;
69
        function hasChildNodes(){
70
                return this.child.length > 0;
71
        }
72
        this.addChild=addChild;
73
        function addChild(childElem){
74
                this.child.push(childElem);
75
                return this;
76
        }
77
        this.setChildNodes=setChildNodes;
78
        function setChildNodes(child){
79
                this.child=child;
80
        }
81
}
82
sitools.user.modules.ExtJSOrgChart.opts=null;
83
sitools.user.modules.ExtJSOrgChart.buildNode= function (node, appendTo, level, opts) {
84
        //sitools.user.modules.ExtJSOrgChart.opts=opts;
85
        //console.log(sitools.user.modules.ExtJSOrgChart.opts);
86
    var tableObj = Ext.DomHelper.append(appendTo, "<table cellpadding='0' cellspacing='0' border='1'/>");
87
    var tbodyObj = Ext.DomHelper.append(tableObj, "<tbody/>");
88
89
    // Construct the node container(s)
90
    var nodeRow = Ext.get(Ext.DomHelper.append(tbodyObj, "<tr/>")).addClass("node-cells");
91
    var nodeCell = Ext.get(Ext.DomHelper.append(nodeRow, "<td colspan='2' />")).addClass("node-cell");
92
        
93
    var childNodes = node.getChildNodes();
94
    var nodeDiv;
95
    var showStr="";
96
    if (childNodes.length > 1) {
97
        nodeCell.dom.setAttribute('colspan', childNodes.length * 2);
98
    }
99
    // Draw the node
100
    if(node.getType()=='node'&&level == 0){
101
            var nodeContent='<div class="notdatasettop">'+node.getText()+'</div>';
102
    }else if(node.getType()=='node'&&level >= 1){
103
        if(node.getImage()&&node.getText().indexOf("Download")!=-1){
104
                var nodeContent='<img class="level1img" src="'+node.getImage()+'"/>';
105
                nodeContent+='<div class="notdataset">'+node.getText()+'</div>';        
106
        }else{
107
                var nodeContent = '<div class="notdataset">'+node.getText()+'</div>';
108
        }
109
    }else{
110
            //alert(node.getID());
111
            var nodeContent=
112
            /*        '<li id="'+node.getID()+'">'+
113
            '<strong>'+node.getText()+'</strong>'+
114
            '<span>'+node.getNb()+'</span><br/>'+     
115
            '<div class="dataset_services">'+
116
            "<a href='#' onClick='sitools.user.clickDatasetIcone(\"" + node.getUrl()
117
                + "\", \"data\"); return false;'><img src='" + loadUrl.get('APP_URL')
118
                + "/common/res/images/icons/32x32/tree_datasets_32.png'></a>"+
119
               
120
            '</div>'+
121
            '<div class="dataset_description">'+node.getDes()+'</div>'+
122
        '</li>';*/
123
            "<div class='leaf'>"
124
            +"<div class='pictitle'>"        
125
            +"<img class='datasetimg' onClick='sitools.user.clickDatasetIcone(\"" + node.getUrl()
126
                    + "\", \"data\"); return false;' width='80' height='80' src='"+node.getImage()+"' />"
127
        +'<div class="datasettitle">'+node.getText().split(' -')[2]+'</div>'
128
        +"</div>"
129
        +"<br/><a href='#' onClick='sitools.user.clickDatasetIcone(\"" + node.getUrl()
130
        + "\", \"data\"); return false;'><img src='" + loadUrl.get('APP_URL')
131
        + "/common/res/images/icons/32x32/tree_datasets_32.png'></a>"
132
        +'<br/><span class="nbrecords">('+node.getNb()+' records)</span><br/>'
133
        /*+"<a href='#' onClick='return SitoolsDesk.navProfile.manageDatasetViewAlbumIconForm(\"" + node.getUrl() + "\");'>query form</a>"*/
134
        +"<br/><a  href='#' class='align-right' ext:qtip='Description' onClick='sitools.user.clickDatasetIcone(\"" + node.getUrl()
135
        + "\", \"desc\"); return false;'>Description</a>"
136
        +"</div>";
137
    }
138
    if(childNodes.length>0){
139
    //        nodeContent += "<div class='img_detail' onClick='sitools.user.modules.ExtJSOrgChart.ss(childNodes,\"\",0,opts,tbodyObj)'></div>";
140
    }
141
    
142
    nodeDiv = Ext.get(Ext.DomHelper.append(nodeCell,"<div>")).addClass("node");
143
        
144
    nodeDiv.dom.innerHTML=nodeContent;
145
    if (childNodes.length > 0) {
146
        // recurse until leaves found (-1) or to the level specified
147
        if (opts.depth == -1 || (level + 1 < opts.depth)) {
148
            var downLineRow = Ext.DomHelper.append(tbodyObj,"<tr class='"+showStr+"' />");
149
            var downLineCell = Ext.DomHelper.append(downLineRow,"<td/>");
150
                        downLineCell.setAttribute('colspan',childNodes.length * 2);
151
            // draw the connecting line from the parent node to the horizontal line 
152
            downLine = Ext.get(Ext.DomHelper.append(downLineCell,"<div></div>")).addClass("line down");
153
        
154
                        // Draw the horizontal lines
155
            var linesRow = Ext.DomHelper.append(tbodyObj,"<tr class='"+showStr+"' />");
156
            Ext.each(childNodes,function (item,index) {
157
                var left = Ext.get(Ext.DomHelper.append(linesRow,"<td>&nbsp;</td>")).addClass("line left top");
158
                var right = Ext.get(Ext.DomHelper.append(linesRow,"<td>&nbsp;</td>")).addClass("line right top");
159
            });
160
161
            // horizontal line shouldn't extend beyond the first and last child branches
162
            Ext.select("td:first",false,linesRow).removeClass("top");
163
            Ext.select("td:last",false,linesRow).removeClass("top");
164
                
165
166
            var childNodesRow = Ext.DomHelper.append(tbodyObj,"<tr class='"+showStr+"' />");
167
            Ext.each(childNodes,function (item,index) {
168
                var td = Ext.DomHelper.append(childNodesRow,"<td class='node-container'/>");
169
                                td.setAttribute('colspan',2);
170
                // recurse through children lists and items
171
                                sitools.user.modules.ExtJSOrgChart.buildNode(item, td, level + 1, opts);
172
            });
173
174
        }
175
    }
176
177
178
    /* Prevent trees collapsing if a link inside a node is clicked */
179
    Ext.each(Ext.select('a',true,nodeDiv.dom),function(item,index){
180
                item.onClick= function(e){
181
                        console.log(e);
182
                        e.stopPropagation();
183
                }
184
        });
185
}
186
sitools.user.modules.ExtJSOrgChart.ss= function(childNodes,showStr,level,opts,tbodyObj){
187
    if (childNodes.length > 0) {
188
        // recurse until leaves found (-1) or to the level specified
189
        if (opts.depth == -1 || (level + 1 < opts.depth)) {
190
            var downLineRow = Ext.DomHelper.append(tbodyObj,"<tr class='"+showStr+"' />");
191
            var downLineCell = Ext.DomHelper.append(downLineRow,"<td/>");
192
                        downLineCell.setAttribute('colspan',childNodes.length * 2);
193
            // draw the connecting line from the parent node to the horizontal line
194
            downLine = Ext.get(Ext.DomHelper.append(downLineCell,"<div></div>")).addClass("line down");
195
196
                        // Draw the horizontal lines
197
            var linesRow = Ext.DomHelper.append(tbodyObj,"<tr class='"+showStr+"' />");
198
            Ext.each(childNodes,function (item,index) {
199
                var left = Ext.get(Ext.DomHelper.append(linesRow,"<td>&nbsp;</td>")).addClass("line left top");
200
                var right = Ext.get(Ext.DomHelper.append(linesRow,"<td>&nbsp;</td>")).addClass("line right top");
201
            });
202
203
            // horizontal line shouldn't extend beyond the first and last child branches
204
            Ext.select("td:first",false,linesRow).removeClass("top");
205
            Ext.select("td:last",false,linesRow).removeClass("top");
206
207
208
            var childNodesRow = Ext.DomHelper.append(tbodyObj,"<tr class='"+showStr+"' />");
209
            Ext.each(childNodes,function (item,index) {
210
                var td = Ext.DomHelper.append(childNodesRow,"<td class='node-container'/>");
211
                                td.setAttribute('colspan',2);
212
                // recurse through children lists and items
213
                                sitools.user.modules.ExtJSOrgChart.buildNode(item, td, level + 1, opts);
214
            });
215
216
        }
217
    }
218
219
}
220
sitools.user.modules.ExtJSOrgChart.prepareTree= function(options){
221
        var appendTo = Ext.get(options.chartElement);
222
        var container = Ext.get(Ext.DomHelper.append(appendTo,'<div align="center" class="ExtJSOrgChart"></div>'));
223
        sitools.user.modules.ExtJSOrgChart.buildNode(options.rootObject,container,0,options);
224
}
225
Ext.QuickTips.init();