Project

General

Profile

Revision 3c601d2d

Added by shye0000 about 9 years ago

Module of the hierarchical view of datasets - datasetExplorerOchart

View differences:

Module_DatasetExplorerOchart_sitools2v3/DatasetExplorerOchart.js
1
Ext.namespace('sitools.user.modules');
2

  
3
Ext.define( 'sitools.user.modules.DatasetExplorerOchart', {
4
    extend: 'sitools.user.core.Module',
5

  
6

  
7
    requires: ['sitools.user.controller.modules.datasetExplorerOchart.DatasetExplorerOchartController'],
8
    controllers: ['sitools.user.controller.modules.datasetExplorerOchart.DatasetExplorerOchartController'],
9
    init : function (moduleModel) {
10
        
11
	var view = Ext.create('sitools.user.view.modules.datasetExplorerOchart.DatasetExplorerOchartView');
12
	this.setViewCmp(view);
13

  
14
        this.show(this.getViewCmp());
15

  
16
        this.callParent(arguments);
17
    },
18

  
19
    /**
20
     * method called when trying to save preference
21
     * 
22
     * @returns
23
     */
24
    _getSettings : function () {
25
        return {
26
            preferencesPath : "/modules",
27
            preferencesFileName : this.id
28
        };
29

  
30
    }
31

  
32
} );
Module_DatasetExplorerOchart_sitools2v3/DatasetExplorerOchartController.js
1
/*******************************************************************************
2
 * Copyright 2010-2014 CNES - CENTRE NATIONAL d'ETUDES SPATIALES
3
 * 
4
 * This file is part of SITools2.
5
 * 
6
 * SITools2 is free software: you can redistribute it and/or modify it under the
7
 * terms of the GNU General Public License as published by the Free Software
8
 * Foundation, either version 3 of the License, or (at your option) any later
9
 * version.
10
 * 
11
 * SITools2 is distributed in the hope that it will be useful, but WITHOUT ANY
12
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
13
 * A PARTICULAR PURPOSE. See the GNU General Public License for more details.
14
 * 
15
 * You should have received a copy of the GNU General Public License along with
16
 * SITools2. If not, see <http://www.gnu.org/licenses/>.
17
 ******************************************************************************/
18

  
19
/*global Ext, sitools, i18n, projectGlobal, alertFailure, showResponse*/
20

  
21
/**
22
 * DatasetExplorerOchart Module Controller
23
 * @class sitools.user.controller.modules.datasetExplorerOchart.DatasetExplorerOchartController
24
 * @extends Ext.app.Controller
25
 */
26
Ext.define('sitools.user.controller.modules.datasetExplorerOchart.DatasetExplorerOchartController', {
27
    extend : 'Ext.app.Controller',
28
    
29
    views : ['modules.datasetExplorerOchart.DatasetExplorerOchartView'],
30

  
31
    init : function () {
32
        this.control({
33
            "DatasetExplorerOchart" : {
34
                render : function (ochart) {
35
		    var project = Ext.getStore('ProjectStore').getProject();
36
                    var projectAttachment = project.get("sitoolsAttachementForUsers");
37
                    
38
                    Ext.Ajax.request({
39
                        method : 'GET',
40
                        url : projectAttachment + "/graph",
41
                        scope : this,
42
                        success : function (ret) {
43
                            var Json = Ext.decode(ret.responseText);
44
                            if (!Json.success) {
45
                                Ext.Msg.alert(i18n.get('label.warning'), Json.message);
46
                                return;
47
                            }
48
                            if (Json.graph && Json.graph.nodeList) {
49
                                ochart.store.getRootNode().appendChild(Json.graph.nodeList);
50
				ochart.store.getRootNode().collapseChildren();
51
				//ochart.store.setRootNode(Json.graph.nodeList);
52
				console.log(ochart.store.getRootNode());
53
				var root=ochart.store.getRootNode();
54
				for(var i=0; i<root.childNodes.length; i++){
55
				    this.collapseRecursive(root.childNodes[i]);
56
				}
57
                            }
58
                        }
59
                    });
60
                    
61
                    
62
                }
63
            } 
64
        });
65
        
66
        this.listen({
67
            store : {
68
                "#datasetExplorerOchartTreeStore" : {
69
                    append : function (store, record) {
70
                        //record.set("id", Ext.id());
71
                        if (record.get("type") === "dataset") {
72
                            var icon = record.get("authorized") === "true" ? loadUrl.get('APP_URL') + "/common/res/images/icons/tree_datasets.png" : loadUrl.get('APP_URL') + "/common/res/images/icons/cadenas.png";
73
                            record.set('icon', icon);
74
                            //record.set("leaf", true);
75

  
76
                        }
77
                        if (record.get("type") === "node") {
78
                            if(!Ext.isEmpty(record.get("image"))) {
79
                                record.set("icon", record.get("image").url);
80
                            }
81
                            //record.set('iconCls', "graphNodeType");
82
                            //record.set("readme", record.get("description"));
83
			    //record.set("expanded", false);
84
                            //record.set("leaf", false);
85
			    //console.log(record);
86
                            //record.collapseChildren();
87
                        }
88
                    }
89

  
90
                }
91
            }
92
        });
93
    },
94
    collapseRecursive: function(node){
95
	if(node.childNodes != []) {
96
	    for(var i=0; i<node.childNodes.length; i++){
97
                this.collapseRecursive(node.childNodes[i]);
98
	        node.childNodes[i].collapse();
99
            }
100
	    
101
	}
102
    }
103
    
104
});
Module_DatasetExplorerOchart_sitools2v3/DatasetExplorerOchartTreeModel.js
1
/*******************************************************************************
2
 * Copyright 2010-2014 CNES - CENTRE NATIONAL d'ETUDES SPATIALES
3
 * 
4
 * This file is part of SITools2.
5
 * 
6
 * SITools2 is free software: you can redistribute it and/or modify it under the
7
 * terms of the GNU General Public License as published by the Free Software
8
 * Foundation, either version 3 of the License, or (at your option) any later
9
 * version.
10
 * 
11
 * SITools2 is distributed in the hope that it will be useful, but WITHOUT ANY
12
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
13
 * A PARTICULAR PURPOSE. See the GNU General Public License for more details.
14
 * 
15
 * You should have received a copy of the GNU General Public License along with
16
 * SITools2. If not, see <http://www.gnu.org/licenses/>.
17
 ******************************************************************************/
18
/*global Ext, sitools, window */
19

  
20
Ext.define('sitools.user.model.DatasetExplorerOchartTreeModel', {
21
    extend : 'Ext.data.Model',
22

  
23
    fields : [ {
24
        name : 'text'
25
    }, {
26
        name : 'type'
27
    }, {
28
        name : 'leaf',
29
        type : 'boolean'
30
    }, {
31
        name : 'description'
32
    }, {
33
        name : 'datasetId'
34
    }, {
35
        name : 'nbRecord'
36
    }, {
37
        name : 'imageDs'
38
    }, {
39
        name : 'readme'
40
    }, {
41
        name : 'authorized'
42
    }, {
43
        name : 'status'
44
    }, {
45
        name : 'visible',
46
        type : 'boolean'
47
    }, {
48
        name : 'url'
49
    }, {
50
        name : 'image'
51
    }]
52
});
Module_DatasetExplorerOchart_sitools2v3/DatasetExplorerOchartTreeStore.js
1
/*******************************************************************************
2
 * Copyright 2010-2014 CNES - CENTRE NATIONAL d'ETUDES SPATIALES
3
 * 
4
 * This file is part of SITools2.
5
 * 
6
 * SITools2 is free software: you can redistribute it and/or modify it under the
7
 * terms of the GNU General Public License as published by the Free Software
8
 * Foundation, either version 3 of the License, or (at your option) any later
9
 * version.
10
 * 
11
 * SITools2 is distributed in the hope that it will be useful, but WITHOUT ANY
12
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
13
 * A PARTICULAR PURPOSE. See the GNU General Public License for more details.
14
 * 
15
 * You should have received a copy of the GNU General Public License along with
16
 * SITools2. If not, see <http://www.gnu.org/licenses/>.
17
 ******************************************************************************/
18
/*global Ext, sitools, window */
19

  
20
Ext.define('sitools.user.store.DatasetExplorerOchartTreeStore', {
21
    extend : 'Ext.data.TreeStore',
22
    model : 'sitools.user.model.DatasetExplorerOchartTreeModel',
23
    storeId : 'datasetExplorerOchartTreeStore',
24
    root: {
25
                "text": "Solar Projects",
26
                "leaf": false,
27
		"type": "rootnode",
28
                expanded: true
29
            },
30
    proxy : {
31
        type : 'memory',
32
        reader : {
33
            type : 'json'
34
        }
35
    }
36
});
Module_DatasetExplorerOchart_sitools2v3/DatasetExplorerOchartView.js
1
Ext.namespace('sitools.user.view.modules.datasetExplorerOchart');
2

  
3
Ext.define( 'sitools.user.view.modules.datasetExplorerOchart.DatasetExplorerOchartView', {
4
    extend: 'sitools.user.view.modules.datasetExplorerOchart.DatasetExplorerOchartViewSimple',
5
    requires: 'sitools.user.view.modules.datasetExplorerOchart.TaskModel',
6
    alias: 'widget.DatasetExplorerOchart',
7

  
8
    initComponent: function(){
9
        var me = this;
10
	me.store = Ext.create("sitools.user.store.DatasetExplorerOchartTreeStore");
11
        /*me.store = Ext.create('Ext.data.TreeStore',{
12
            model: 'sitools.user.view.modules.datasetExplorerOchart.TaskModel',
13
            root: {
14
                "text": "Solar Projects",
15
                "leaf": false,
16
                expanded: true
17
            },
18
	    autoLoad: true
19
        });*/
20
	//me.store = Ext.create("sitools.user.view.modules.datasetExplorerOchart.NodesStore");
21
        me.chartConfig = me.chartConfig || {};
22
        Ext.applyIf(me.chartConfig, {
23
            itemTpl: [
24
                '<div class="item-body" style="text-align: center">',
25
		    '<tpl if="type == \'dataset\'">',
26
                        '<img src="{imageDs}" class="item-img">',
27
		      '<div class="item-title-ds item-title">{text}</div>', 
28
		      '<a href="#" class="overDatasetService" onClick="sitools.user.utils.DatasetUtils.clickDatasetIcone(\'{url}\', \'data\');return false;">',
29
		      Ext.String.format('<img class="datasetochart_icon" src="{0}" data-qtip="{1}">',loadUrl.get('APP_URL') + "/common/res/images/icons/32x32/tree_datasets_32.png", i18n.get('label.dataTitle')),
30
		      '</a>',
31
		      '<a href="#" class="overDatasetService" onClick="sitools.user.utils.DatasetUtils.clickDatasetIcone(\'{url}\', \'forms\');return false;">',
32
		      Ext.String.format('<img class="datasetochart_icon" src="{0}" data-qtip="{1}">',loadUrl.get('APP_URL') + "/common/res/images/icons/32x32/openSearch_32.png", "Query form"),
33
		      '</a>',
34
		      '<div class="item-nb">({nbRecord} records)</div>',
35
		    '</tpl>',
36
		    '<tpl if="type == \'node\'">',
37
 		        '<tpl if="icon">',
38
                          '<img src="{icon}" style="height: 25px">',
39
                        '</tpl>',
40
			'<div class="item-title-node item-title">{text}</div>',
41
		    '</tpl>',
42
		    '<tpl if="type == \'rootnode\'">',
43
                        '<div class="item-title-rootnode item-title">{text}</div>',
44
                    '</tpl>',
45
                '</div>'
46
		
47
            ],
48

  
49
            itemCls: 'task-item'
50
        });
51

  
52
        me.callParent( arguments );
53
    },
54
    afterRender: function(){
55
	var elems = document.querySelectorAll('.task-item');
56
        console.log(elems);
57
        //me.onInlineExpanderClick(null, elems);	
58
    },
59
    onItemDblClick: Ext.emptyFn
60
} );
61

  
Module_DatasetExplorerOchart_sitools2v3/DatasetExplorerOchartViewSimple.js
1
/***************************************
2
 * Copyright 2010-2014 CNES - CENTRE NATIONAL d'ETUDES SPATIALES
3
 *
4
 * This file is part of SITools2.
5
 *
6
 * SITools2 is free software: you can redistribute it and/or modify
7
 * it under the terms of the GNU General Public License as published by
8
 * the Free Software Foundation, either version 3 of the License, or
9
 * (at your option) any later version.
10
 *
11
 * SITools2 is distributed in the hope that it will be useful,
12
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
13
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
14
 * GNU General Public License for more details.
15
 *
16
 * You should have received a copy of the GNU General Public License
17
 * along with SITools2.  If not, see <http://www.gnu.org/licenses/>.
18
 ***************************************/
19
/*global Ext, sitools, projectGlobal, commonTreeUtils, showResponse, document, i18n, loadUrl, SITOOLS_DEFAULT_PROJECT_IMAGE_URL, SitoolsDesk*/
20
/*
21
 * @include "../../env.js" 
22
*/
23

  
24

  
25
Ext.namespace('sitools.user.view.modules.datasetExplorerOchart');
26
Ext.define( 'sitools.user.view.modules.datasetExplorerOchart.DatasetExplorerOchartViewSimple', {
27
    extend: 'Ext.panel.Panel',
28
    alias: 'widget.datasetExplorerOchartViewSimple',
29

  
30
    layout:{ type: 'fit' },
31
    border : false,
32
    requires: [
33
        'sitools.user.modules.OChartDragDrop',
34
        'sitools.user.view.modules.datasetExplorerOchart.OChart'
35
    ],
36
    autoDestroyStore: true,
37

  
38
    initComponent: function(){
39
	var me = this;
40
        if(!me.store){
41
	    Ext.apply(me, {
42
                store : me.buildStore()
43
            });
44
        }
45

  
46
	me.chartConfig = me.chartConfig || {};
47
        
48
	Ext.applyIf(me.chartConfig,{
49
            xtype: 'ochart',
50
            autoScroll : true,
51
            simpleSelect: true,
52
            rootVisible: false,
53
            store: me.store,
54
            plugins    : [
55
                {
56
                    ptype          : 'ochartdragdrop',
57
                    allowParentInserts: true,
58
                    containerScroll: true,
59
                    ddGroup: 'ochart-dd'
60
                }
61
            ],
62

  
63
            listeners: {
64
                scope: me,
65
                additem: me.onAddItem,
66
                removeitem: me.onRemoveItem,
67
                itemdblclick: me.onItemDblClick
68
            }
69
        });
70

  
71
        Ext.apply(me, {
72
            items: me.chartConfig
73
        });
74
        me.callParent(arguments);
75
    },
76
    
77
    buildStore: function() {
78
	var store = Ext.create('sitools.user.view.modules.datasetExplorerOchart.NodesStore');
79
	return store;
80
    },
81

  
82
    onRender: function(){
83
       //console.log(this);
84
	 var chart = this.down('ochart' );
85
//       var view = this.up('viewport');
86
	console.log(chart);
87
        chart.lineWeight =2; //view.lineWeight;
88
        chart.lineColor = '#888888';//'#' + view.lineColor;
89
        chart.levelSpacing =20;//view.levelSpacing;
90
        chart.nodeSpacing = 10;//view.nodeSpacing;
91
        chart.readOnly = true;//view.readOnly;
92
        chart.rootVisible = true;//view.rootVisible;
93
        chart.allowContainerDrop = false;//view.allowContainerDrop;
94
        chart.toolsVisible = true;//view.toolsVisible;
95
		
96
        this.callParent(arguments);
97
    },
98

  
99
    afterRender: function(){
100
        var me = this;
101
        var view = me.up('#mainView');
102
        //me.mon(view,'changelineweight', me.onChangeLineWeight, me);
103
        //me.mon(view,'changelinecolor', me.onChangeLineColor, me);
104
        //me.mon(view,'changelevelspace', me.onChangeLevelSpace, me);
105
        //me.mon(view,'changeitemspace', me.onChangeItemSpace, me);
106
        //me.mon(view,'changereadonly', me.onChangeReadOnly, me);
107
        //me.mon(view,'changerootvisible', me.onChangeRootVisible, me);
108
        //me.mon(view,'changecontainerdrop', me.onChangeContainerDrop, me);
109
        //me.mon(view,'changetools', me.onChangeTools, me);
110
        me.view = view;
111
        me.callParent(arguments);
112
    },
113

  
114
    onDestroy: function(){
115
        var me = this,
116
            view = me.view;
117
        me.mun(view,'changelineweight', me.onChangeLineWeight, me);
118
        me.mun(view,'changelinecolor', me.onChangeLineColor, me);
119
        me.mun(view,'changelevelspace', me.onChangeLevelSpace, me);
120
        me.mun(view,'changeitemspace', me.onChangeItemSpace, me);
121
        me.mun(view,'changereadonly', me.onChangeReadOnly, me);
122
        me.mun(view,'changerootvisible', me.onChangeRootVisible, me);
123
        me.mun(view,'changecontainerdrop', me.onChangeContainerDrop, me);
124
        me.mun(view,'changetools', me.onChangeTools, me);
125
        me.view = null;
126
        if(me.autoDestroyStore){
127
            me.store.destroyStore();
128
        }
129
        me.store = null;
130
        me.callParent(arguments);
131
    },
132

  
133
    onItemDblClick: function(view, record, item, index, e){
134
        if(view.readOnly) return;
135

  
136
        Ext.Msg.prompt('Edit Node', 'Type the node name',function(btn, text){
137
            if(btn == 'ok'){
138
                record.set('text',text);
139
            }
140
        }, window, false, record.get('text'));
141
    },
142

  
143
    onAddItem: function (view, record, where, nodeEl){
144
        Ext.Msg.prompt('New Node', 'Type the node name',function(btn, text){
145
            if(btn == 'ok'){
146
                var newrec = {text: text, leaf: true};
147
                switch(where){
148
                    case 'before':
149
                        var parent = record.parentNode;
150
                        newrec = parent.insertBefore(newrec, record);
151
                        break;
152
                    case 'after':
153
                        var node = record.nextSibling;
154
                        var parent = record.parentNode;
155
                        newrec = parent.insertBefore(newrec, node);
156
                        break;
157
                    case 'child':
158
                        newrec = record.appendChild(newrec);
159
                        record.expand(function(){view.focusNode(newrec);});
160
                        break;
161
                }
162
            }
163
        });
164
    },
165

  
166
    onRemoveItem: function(view, record, nodeEl){
167
        Ext.Msg.confirm('Remove Item', 'Do you really want\'s remove this items?',function(btn, text){
168
            if(btn == 'yes'){
169
                record.remove();
170
            }
171
        });
172
    },
173

  
174
    onChangeLineWeight: function(panel, weight){
175
        var chart = this.down('ochart');
176
        chart.lineWeight = weight;
177
        chart.refresh();
178
    },
179

  
180
    onChangeLineColor: function(panel, color){
181
        var chart = this.down('ochart' );
182
        chart.lineColor =  '#' + color;
183
        chart.refresh();
184
    },
185

  
186
    onChangeLevelSpace: function(panel, space){
187
        var chart = this.down('ochart');
188
        chart.levelSpacing = space;
189
        chart.refresh();
190
    },
191

  
192
    onChangeItemSpace: function(panel, space){
193
        var chart = this.down('ochart');
194
        chart.nodeSpacing = space;
195
        chart.refresh();
196
    },
197

  
198
    onChangeReadOnly: function(panel, value){
199
        var chart = this.down('ochart');
200
        chart.readOnly = value;
201
    },
202

  
203
    onChangeRootVisible: function(panel, value){
204
        var chart = this.down('ochart');
205
        chart.rootVisible = value;
206
        chart.refresh();
207
    },
208

  
209
    onChangeContainerDrop: function(panel, value){
210
        var chart = this.down('ochart');
211
        chart.allowContainerDrop = value;
212
    },
213

  
214
    onChangeTools: function(panel, value){
215
        var chart = this.down('ochart');
216
        chart.toolsVisible = value;
217
    },
218

  
219
    /**
220
     * method called when trying to save preference
221
     * @returns
222
     */
223
    _getSettings: function () {
224
        return {
225
            preferencesPath: "/modules",
226
            preferencesFileName: this.id
227
        };
228
    }
229

  
230
} );
Module_DatasetExplorerOchart_sitools2v3/OChart.js
1

  
2
Ext.namespace('sitools.user.view.modules.datasetExplorerOchart');
3
Ext.define('sitools.user.view.modules.datasetExplorerOchart.OChart',{
4
    extend: 'Ext.Component',
5
    alias: 'widget.ochart',
6
    itemId: 'ochart',
7
    requires:[
8
        'Ext.LoadMask',
9
        'Ext.data.StoreManager',
10
        'Ext.dom.Query',
11
        'sitools.user.view.modules.datasetExplorerOchart.OChartModel',
12
        'Ext.dd.ScrollManager'
13
    ],
14

  
15
    mixins:{
16
        bindable: 'Ext.util.Bindable'
17
    },
18

  
19
    baseCls: Ext.baseCSSPrefix + 'ochart',
20

  
21
    /**
22
     * In some places it's need to render full tables because <IE9 have some bugs and makes tr and table readonly
23
     * @private
24
     */
25
    renderBuffer: document.createElement('div'),
26

  
27
    /**
28
     * @cfg {Boolean} rootVisible=true true to include the root node in the chart.
29
     */
30
    rootVisible: true,
31

  
32
    /**
33
     * @cfg {Boolean} toolsVisible=true true to show the item floating tools.
34
     */
35
    toolsVisible: true,
36

  
37
    /**
38
     * @cfg {Ext.data.NodeInterface} root=null The chart´s root node or null for the store root node.
39
     */
40
    root: null,
41

  
42
    /**
43
     * @cfg {Boolean} autoLoadStore=tru
44
     * If this config is true and the store isn't loaded or already loading, the component will trigger a load command to the store
45
     * during component initialization.
46
     */
47
    autoLoadStore: true,
48

  
49
    /**
50
     * @cfg {String} displayField="text" The field used to render the node contents.
51
     */
52
    displayField: 'text',
53

  
54
    /**
55
     * @cfg {Boolean/Object} loadMask
56
     * False to disable a load mask from displaying while the view is loading. This can also be a
57
     * {@link Ext.LoadMask} configuration object.
58
     */
59
    loadMask: true,
60

  
61
    /**
62
     * @cfg {String} loadingText
63
     * A string to display during data load operations.  If specified, this text will be
64
     * displayed in a loading div and the view's contents will be cleared while loading, otherwise the view's
65
     * contents will continue to display normally until the new data is loaded and the contents are replaced.
66
     */
67
    loadingText: 'Loading...',
68

  
69
    /**
70
     * @cfg {Boolean} loadingUseMsg
71
     * Whether or not to use the loading message.
72
     * @private
73
     */
74
    loadingUseMsg: true,
75

  
76
    /**
77
     * @cfg {Boolean} allowContainerDrop=true
78
     * False to disable dropping itens on the container, true to allow dropping itens on the container.
79
     * When itens are dropped on the container they will be appended to the root node.
80
     */
81
    allowContainerDrop: true,
82

  
83
    /**
84
     * @cfg {String} loadingCls
85
     * The CSS class to apply to the loading message element. Defaults to Ext.LoadMask.prototype.msgCls "x-mask-loading".
86
     */
87

  
88
    /**
89
     * @cfg {Number} lineWeight=1 Weight of node connector lines.
90
     */
91
    lineWeight: 1,
92

  
93
    /**
94
     * @property {String} lineColor="#000" HTML color to use for the node connector lines.
95
     */
96
    lineColor: '#000',
97

  
98
    /**
99
     * @cfg {Number} levelSpacing=15 Space in pixels between the parent and children nodes.
100
     */
101
    levelSpacing: 15,
102

  
103
    /**
104
     * @cfg {Number} nodeSpacing=10 Margin in pixels between adjacent nodes.
105
     */
106
    nodeSpacing: 10,
107

  
108
    /**
109
     * @cfg {String} itemCls=null Additional class for the node content element.
110
     */
111
    itemCls: null,
112

  
113
    /** inheritdoc */
114
    renderTpl: ['<table class="{baseCls}-wrap" cellpadding="0" cellspacing="0" border="0"><tbody><tr class="{baseCls}-container"></tr></tbody></table>'],
115

  
116
    /**
117
     * @cfg {Ext.XTemplate/String/String[]}} downLineTpl Node down line connector template
118
     * @private
119
     */
120
    downLineTpl: [
121
        '<tr class="{view.baseCls}-lines {view.downLineCls}">',
122
            '<td colspan="{node.childNodes.length}">',
123
                '<div class="{view.baseCls}-left" style="border-top-width: {view.lineWeight}px; height: {view.levelSpacing}px; border-color:{view.lineColor} !important;"></div>',
124
                '<div class="{view.baseCls}-right" style="border-top-width: {view.lineWeight}px; border-left-width: {view.lineWeight}px; height: {view.levelSpacing}px; border-color:{view.lineColor} !important;"></div>',
125
            '</td>',
126
        '</tr>',
127
        '<tr class="{view.expanderRowCls}">',
128
            '<td colspan="{node.childNodes.length}">',
129
                '<span class="{view.expanderCmpCls}{[values.view.expanderCls ? " "+values.view.expanderCls : ""]}" data-qtip="{view.expandTip:htmlEncode}"></span>',
130
            '</td>',
131
        '</tr>'
132
    ],
133

  
134
    /**
135
     * @cfg {Ext.XTemplate/String/String[]}} childrenLineTpl Simple child inner line connector template
136
     * @private
137
     */
138
    childrenLineTpl: [
139
        '<div class="{view.baseCls}-left" style="border-top-width:{view.lineWeight}px; height: {view.levelSpacing}px; border-color:{view.lineColor} !important;"></div>',
140
        '<div class="{view.baseCls}-right" style="border-top-width:{view.lineWeight}px; border-left-width:{view.lineWeight}px; height: {view.levelSpacing}px; border-color:{view.lineColor} !important;"></div>'
141
    ],
142

  
143
    /**
144
     * @cfg {Ext.XTemplate/String/String[]}} childrenLinesTpl Multiple child line connector template
145
     * @private
146
     */
147
    childrenLinesTpl: [
148
        '<tpl if="node.childNodes.length &gt; 1">',
149
            //multiple lines
150
            '<tr class="{view.baseCls}-lines {view.childrenLinesCls}">',
151
                '{[this.childLines(values.view, values.node.childNodes)]}',
152
            '</tr>',
153
        '</tpl>',
154
        {
155
            childLines: function(view, nodes){
156
                var out = [],
157
                    len = nodes.length,
158
                    last = len- 1,
159
                    cls = view.baseCls,
160
                    clsLeft = cls + '-left',
161
                    clsRight = cls + '-right',
162
                    lineWeight = view.lineWeight,
163
                    lineColor = view.lineColor,
164
                    height = view.levelSpacing,
165
                    div= '<div class="{0}" style="border-color: {1}; border-top-width: {2}px; border-left-width: {3}px; border-right-width: {4}px; height: {5}px;"></div>',
166
                    format = Ext.String.format,
167
                    i, td;
168

  
169
                for(i = 0; i<len; ++i){
170
                    td = '<td';
171
                    //it's a first or last line?
172
                    if(i == 0) td += ' class="' + cls + '-first"';
173
                    else if(i == last) td += ' class="' + cls + '-last"';
174
                    td += '>';
175

  
176
                    td += format(div, clsLeft, lineColor, lineWeight, 0, i == last ? lineWeight : 0, height);
177
                    td += format(div, clsRight, lineColor, lineWeight, lineWeight, 0, height);
178

  
179
                    td += '</td>';
180

  
181
                    out.push(td);
182
                }
183

  
184
                return out.join('');
185
            }
186
        }
187
    ],
188

  
189
    /**
190
     * @cfg {Ext.XTemplate/String/String[]}} childrenTpl Container with children template
191
     * @private
192
     */
193
    childrenTpl: [
194
        '<tr class="{view.containerCls}">',
195
            '{%values.view.renderNodes(values.node.childNodes, out)%}',
196
        '</tr>'
197
    ],
198

  
199
    /**
200
     * @cfg {Ext.XTemplate/String/String[]}} containerTpl Simple container template
201
     * @private
202
     */
203
    containerTpl: '<tr class="{view.containerCls}"></tr>',
204

  
205
    /**
206
     * Record node image format
207
     * @private
208
     */
209
    imgText: '<img src="{0}" class="{1}" />',
210

  
211
    /**
212
     * Inner node structure template
213
     * @private
214
     */
215
    innerNodeTpl: [
216
        '<table cellpadding="0" cellspacing="0" border="0"><tbody>',
217
            //node content
218
            '<tr class="{view.nodeContentRowCls}">',
219
                '<td colspan="{node.childNodes.length}">',
220
                    '<tpl if="node.data.icon || node.data.iconCls">',
221
                        '{[Ext.String.format(values.view.imgText, values.node.data.icon ? values.node.data.icon : Ext.BLANK_IMAGE_URL, values.node.data.iconCls ? values.node.data.iconCls : "")]}',
222
                    '</tpl>',
223
                    '<span id="{nodeId}" class="{view.nodeContentCls}' +
224
                        '{[values.view.itemCls ? " "+values.view.itemCls : ""]}',
225
                        '{[values.node.get("cls") ? " "+values.node.get("cls") : ""]}',
226
                        '" data-recordId="{[values.view.getRecordId(values.node)]}"',
227
                        '<tpl if="node.data.qtitle && node.data.qtip">',
228
                            ' data-qtitle="{node.data.qtitle:htmlEncode}"',
229
                        '</tpl>',
230
                        '<tpl if="node.data.qtip">',
231
                            ' data-qtip="{node.data.qtip:htmlEncode}"',
232
                        '</tpl>',
233
                        '>{[values.view.renderItem(values.view, values.node)]}',
234
                    '</span>',
235
                '</td>',
236
            '</tr>',
237

  
238
            //children
239
            '<tpl if="this.handleChildren(node)">',
240
                //down line
241
                '{[values.view.downLineTpl.apply(values)]}',
242

  
243
                //children lines
244
                '{[values.view.childrenLinesTpl.apply(values)]}',
245

  
246
                //children container
247
                '{[this.renderChildren(values)]}',
248
            '</tpl>',
249
        '</tbody></table>',
250
        {
251
            renderChildren: function(values){
252
                var out=[];
253
                values.view.childrenTpl.applyOut(values, out);
254
                return out.join('');
255
            },
256
            handleChildren: function(node){
257
                return (node.childNodes.length || (!node.isLeaf() && !node.get('loaded')));
258
            }
259
        }
260
    ],
261

  
262
    /**
263
     * @cfg {Ext.XTemplate/String/String[]}} nodeTpl Full node component template
264
     * @private
265
     */
266
    nodeTpl: [
267
        '<td class="{view.nodeCls}{[!values.node.isLeaf() && !values.node.isExpanded() ? " " + values.view.collapseCls: ""]}" style="padding: 0 {view.nodeSpacing}px;">',
268
        '{[values.view.innerNodeTpl.apply(values)]}',
269
        '</td>'
270
    ],
271

  
272
    /**
273
     * @cfg {Ext.XTemplate/String/String[]} itemTpl Template used to render the node's content.
274
     */
275
    itemTpl: '{text}',
276

  
277
    /**
278
     * @cfg {String} wrapperSelector Component wrapper CSS selector.
279
     * @private
280
     */
281
    wrapperSelector: '.'+Ext.baseCSSPrefix + 'ochart-wrap',
282

  
283
    /**
284
     * @cfg {String} itemSelector Node content CSS selector
285
     * private
286
     */
287
    itemSelector: '.'+Ext.baseCSSPrefix + 'ochart-node-content',
288

  
289
    /**
290
     * @cfg {String} itemRowSelector Item content row CSS selector
291
     * private
292
     */
293
    itemRowSelector: '.'+Ext.baseCSSPrefix + 'ochart-node-row',
294

  
295
    /**
296
     * @cfg {String} nodeItemContainerSelector Node content row CSS selector
297
     * private
298
     */
299
    nodeItemContainerSelector: 'table > tbody > .'+Ext.baseCSSPrefix + 'ochart-node-row',
300

  
301
    /**
302
     * @property {String} nodeSelector Node container CSS selector
303
     * private
304
     */
305
    nodeSelector: '.'+Ext.baseCSSPrefix + 'ochart-node',
306

  
307
    nodeBodySelector: 'table > tbody',
308

  
309
    nodeContainerSelector: 'table > tbody > .'+Ext.baseCSSPrefix + 'ochart-container',
310

  
311
    expanderSelector: '.'+Ext.baseCSSPrefix + 'ochart-expander',
312

  
313
    inlineExpanderContainerSelector: 'table > tbody > .'+Ext.baseCSSPrefix + 'ochart-expander-row',
314

  
315
    inlineExpanderContentSelector: 'table > tbody > .'+Ext.baseCSSPrefix + 'ochart-expander-row > td',
316

  
317
    downLineContainerSelector: 'table > tbody > .'+Ext.baseCSSPrefix + 'ochart-down',
318

  
319
    downLineSelector: 'table > tbody > .'+Ext.baseCSSPrefix + 'ochart-down > td',
320

  
321
    childrenLinesSelector: 'table > tbody > .' + Ext.baseCSSPrefix + 'ochart-children-lines',
322

  
323
    expandTip: 'Click here to expand this node.',
324

  
325
    collapseTip: 'Click here to collapse this node.',
326

  
327
    addBeforeTip: 'Add a new item before this.',
328

  
329
    addAfterTip: 'Add a new item after this.',
330

  
331
    addChildTip: 'Add a new child node to this item.',
332

  
333
    removeItemTip: 'Remove this item.',
334

  
335
    /**
336
     * @cfg {Boolean} trackOver
337
     * When `true` the {@link #overItemCls} will be applied to nodes when hovered over.
338
     * This in return will also cause {#highlightitem} and
339
     * {#unhighlightitem} events to be fired.
340
     *
341
     * Enabled automatically when the {@link #overItemCls} config is set.
342
     */
343
    trackOver: false,
344

  
345
    /**
346
     * @cfg {Number} [mouseOverOutBuffer=20]
347
     * The number of milliseconds to buffer mouseover and mouseout event handling on view items.
348
     *
349
     * Configure this as `false` to process mouseover and mouseout events immediately.
350
     */
351
    mouseOverOutBuffer: 20,
352

  
353
    inputTagRe: /^textarea$|^input$/i,
354

  
355
    /**
356
     * @cfg {String} overItemCls='x-ochart-over-node' Mouse over item class.
357
     */
358
    overItemCls: Ext.baseCSSPrefix + 'ochart-over-node',
359

  
360
    /**
361
     * @cfg {String} expanderCls Expand tool class.
362
     */
363
    expanderCls: null,
364

  
365
    /**
366
     * @cfg {String} addBeforeCls Add before tool class.
367
     */
368
    addBeforeCls: null,
369

  
370
    /**
371
     * @cfg {String} addAfterCls Add after tool class.
372
     */
373
    addAfterCls: null,
374

  
375
    /**
376
     * @cfg {String} addChildCls Add child tool class.
377
     */
378
    addChildCls: null,
379

  
380
    /**
381
     * @cfg {String} removeItemCls Remove item tool class.
382
     */
383
    removeItemCls: null,
384

  
385
    /**
386
     * @cfg {String} selectedItemCls
387
     * A CSS class to apply to each selected item in the view.
388
     */
389
    selectedItemCls: Ext.baseCSSPrefix + 'item-selected',
390

  
391
    /**
392
     * @cfg {String} collapseCls
393
     * A CSS class to apply to each item that is collapsed in the view.
394
     */
395
    collapseCls: Ext.baseCSSPrefix + 'item-collapsed',
396

  
397
    inheritableStatics: {
398
        /**
399
         * Event maps
400
         *
401
         * @static
402
         * @protected
403
         */
404
        EventMap: {
405
            mousedown  : 'MouseDown',
406
            mouseup    : 'MouseUp',
407
            click      : 'Click',
408
            dblclick   : 'DblClick',
409
            contextmenu: 'ContextMenu',
410
            mouseover  : 'MouseOver',
411
            mouseout   : 'MouseOut',
412
            mouseenter : 'MouseEnter',
413
            mouseleave : 'MouseLeave',
414
            keydown    : 'KeyDown',
415
            focus      : 'Focus'
416
        }
417
    },
418

  
419
    /**
420
     * @cfg {String} triggerEvent="itemclick"
421
     * Trigger event used by the selection model to handle item click
422
     *
423
     * @private
424
     */
425
    triggerEvent: 'itemclick',
426

  
427
    /**
428
     * @cfg {String} triggerCtEvent="containerclick"
429
     * Trigger event used by the selection model to handle container click
430
     *
431
     * @private
432
     */
433
    triggerCtEvent: 'containerclick',
434

  
435
    /** @inheritdoc */
436
    initComponent: function(){
437
        var me = this,
438
            store = me.store,
439
            root = me.root;
440

  
441
        /**
442
         * @cfg {String} wrapperCls Component wrapper class
443
         * @private
444
         */
445
        me.wrapperCls = me.baseCls + '-wrap';
446

  
447
        /**
448
         * @cfg {String} containerCls Node container class
449
         * @private
450
         */
451
        me.containerCls = me.baseCls + '-container';
452

  
453
        /**
454
         * @cfg {String} nodeCls Node component class
455
         * @private
456
         */
457
        me.nodeCls = me.baseCls + '-node';
458

  
459
        /**
460
         * @cfg {String} nodeContentRowCls Node's content line class
461
         * @private
462
         */
463
        me.nodeContentRowCls = me.baseCls + '-node-row';
464

  
465
        /**
466
         * @cfg {String} nodeContentCls Node's content class
467
         * @private
468
         */
469
        me.nodeContentCls = me.baseCls + '-node-content';
470

  
471
        /**
472
         * @cfg {String} downLineCls Node's down line connector class
473
         * @private
474
         */
475
        me.downLineCls = me.baseCls + '-down';
476

  
477
        /**
478
         * @cfg {String} expanderRowCls Inline expander row class
479
         * @private
480
         */
481
        me.expanderRowCls = me.baseCls + '-expander-row';
482

  
483
        /**
484
         * @cfg {String} expanderCmpCls Expander component class
485
         * @private
486
         */
487
        me.expanderCmpCls = me.baseCls + '-expander';
488

  
489
        /**
490
         * @cfg {String} addNodeCmpCls Add node component class
491
         * @private
492
         */
493
        me.addNodeCmpCls = me.baseCls + '-add';
494

  
495
        /**
496
         * @cfg {String} removeNodeCmpCls Remove node component class
497
         * @private
498
         */
499
        me.removeNodeCmpCls = me.baseCls + '-remove';
500

  
501
        /**
502
         * @cfg {String} childrenLinesCls Children connector lines row
503
         * @private
504
         */
505
        me.childrenLinesCls = me.baseCls + '-children-lines';
506

  
507
        //prepare templates
508
        me.rootTpl          = Ext.XTemplate.getTpl(this, 'rootTpl');
509
        me.nodesTpl         = Ext.XTemplate.getTpl(this, 'nodesTpl');
510
        me.nodeTpl          = Ext.XTemplate.getTpl(this, 'nodeTpl');
511
        me.innerNodeTpl     = Ext.XTemplate.getTpl(this, 'innerNodeTpl');
512
        me.downLineTpl      = Ext.XTemplate.getTpl(this, 'downLineTpl');
513
        me.childrenLinesTpl = Ext.XTemplate.getTpl(this, 'childrenLinesTpl');
514
        me.childrenLineTpl  = Ext.XTemplate.getTpl(this, 'childrenLineTpl');
515
        me.childrenTpl      = Ext.XTemplate.getTpl(this, 'childrenTpl');
516
        me.containerTpl     = Ext.XTemplate.getTpl(this, 'containerTpl');
517
        me.itemTpl          = Ext.XTemplate.getTpl(this, 'itemTpl');
518

  
519
        //adjust spacings
520
        if(me.levelSpacing < 5) me.levelSpacing = 5;
521

  
522
        //create mouse over buffer if need
523
        if (me.mouseOverOutBuffer) {
524
            me.handleMouseOverOrOut = Ext.Function.createBuffered(me.handleMouseOverOrOut, me.mouseOverOutBuffer, me);
525
            me.lastMouseOverOutEvent = new Ext.EventObjectImpl();
526
        }
527

  
528
        if (me.overItemCls) {
529
            me.trackOver = true;
530
        }
531

  
532
        this.addEvents(
533
            /**
534
             * @event beforeitemmousedown
535
             * Fires before the mousedown event on an item is processed. Returns false to cancel the default action.
536
             * @param {Ext.view.View} this
537
             * @param {Ext.data.Model} record The record that belongs to the item
538
             * @param {HTMLElement} item The item's element
539
             * @param {Number} index The item's index
540
             * @param {Ext.EventObject} e The raw event object
541
             */
542
            'beforeitemmousedown',
543
            /**
544
             * @event beforeitemmouseup
545
             * Fires before the mouseup event on an item is processed. Returns false to cancel the default action.
546
             * @param {Ext.view.View} this
547
             * @param {Ext.data.Model} record The record that belongs to the item
548
             * @param {HTMLElement} item The item's element
549
             * @param {Number} index The item's index
550
             * @param {Ext.EventObject} e The raw event object
551
             */
552
            'beforeitemmouseup',
553
            /**
554
             * @event beforeitemmouseenter
555
             * Fires before the mouseenter event on an item is processed. Returns false to cancel the default action.
556
             * @param {Ext.view.View} this
557
             * @param {Ext.data.Model} record The record that belongs to the item
558
             * @param {HTMLElement} item The item's element
559
             * @param {Number} index The item's index
560
             * @param {Ext.EventObject} e The raw event object
561
             */
562
            'beforeitemmouseenter',
563
            /**
564
             * @event beforeitemmouseleave
565
             * Fires before the mouseleave event on an item is processed. Returns false to cancel the default action.
566
             * @param {Ext.view.View} this
567
             * @param {Ext.data.Model} record The record that belongs to the item
568
             * @param {HTMLElement} item The item's element
569
             * @param {Number} index The item's index
570
             * @param {Ext.EventObject} e The raw event object
571
             */
572
            'beforeitemmouseleave',
573
            /**
574
             * @event beforeitemclick
575
             * Fires before the click event on an item is processed. Returns false to cancel the default action.
576
             * @param {Ext.view.View} this
577
             * @param {Ext.data.Model} record The record that belongs to the item
578
             * @param {HTMLElement} item The item's element
579
             * @param {Number} index The item's index
580
             * @param {Ext.EventObject} e The raw event object
581
             */
582
            'beforeitemclick',
583
            /**
584
             * @event beforeitemdblclick
585
             * Fires before the dblclick event on an item is processed. Returns false to cancel the default action.
586
             * @param {Ext.view.View} this
587
             * @param {Ext.data.Model} record The record that belongs to the item
588
             * @param {HTMLElement} item The item's element
589
             * @param {Number} index The item's index
590
             * @param {Ext.EventObject} e The raw event object
591
             */
592
            'beforeitemdblclick',
593
            /**
594
             * @event beforeitemcontextmenu
595
             * Fires before the contextmenu event on an item is processed. Returns false to cancel the default action.
596
             * @param {Ext.view.View} this
597
             * @param {Ext.data.Model} record The record that belongs to the item
598
             * @param {HTMLElement} item The item's element
599
             * @param {Number} index The item's index
600
             * @param {Ext.EventObject} e The raw event object
601
             */
602
            'beforeitemcontextmenu',
603
            /**
604
             * @event beforeitemkeydown
605
             * Fires before the keydown event on an item is processed. Returns false to cancel the default action.
606
             * @param {Ext.view.View} this
607
             * @param {Ext.data.Model} record The record that belongs to the item
608
             * @param {HTMLElement} item The item's element
609
             * @param {Number} index The item's index
610
             * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
611
             */
612
            'beforeitemkeydown',
613
            /**
614
             * @event itemmousedown
615
             * Fires when there is a mouse down on an item
616
             * @param {Ext.view.View} this
617
             * @param {Ext.data.Model} record The record that belongs to the item
618
             * @param {HTMLElement} item The item's element
619
             * @param {Number} index The item's index
620
             * @param {Ext.EventObject} e The raw event object
621
             */
622
            'itemmousedown',
623
            /**
624
             * @event itemmouseup
625
             * Fires when there is a mouse up on an item
626
             * @param {Ext.view.View} this
627
             * @param {Ext.data.Model} record The record that belongs to the item
628
             * @param {HTMLElement} item The item's element
629
             * @param {Number} index The item's index
630
             * @param {Ext.EventObject} e The raw event object
631
             */
632
            'itemmouseup',
633
            /**
634
             * @event itemmouseenter
635
             * Fires when the mouse enters an item.
636
             * @param {Ext.view.View} this
637
             * @param {Ext.data.Model} record The record that belongs to the item
638
             * @param {HTMLElement} item The item's element
639
             * @param {Number} index The item's index
640
             * @param {Ext.EventObject} e The raw event object
641
             */
642
            'itemmouseenter',
643
            /**
644
             * @event itemmouseleave
645
             * Fires when the mouse leaves an item.
646
             * @param {Ext.view.View} this
647
             * @param {Ext.data.Model} record The record that belongs to the item
648
             * @param {HTMLElement} item The item's element
649
             * @param {Number} index The item's index
650
             * @param {Ext.EventObject} e The raw event object
651
             */
652
            'itemmouseleave',
653
            /**
654
             * @event itemclick
655
             * Fires when an item is clicked.
656
             * @param {Ext.view.View} this
657
             * @param {Ext.data.Model} record The record that belongs to the item
658
             * @param {HTMLElement} item The item's element
659
             * @param {Number} index The item's index
660
             * @param {Ext.EventObject} e The raw event object
661
             */
662
            'itemclick',
663
            /**
664
             * @event itemdblclick
665
             * Fires when an item is double clicked.
666
             * @param {Ext.view.View} this
667
             * @param {Ext.data.Model} record The record that belongs to the item
668
             * @param {HTMLElement} item The item's element
669
             * @param {Number} index The item's index
670
             * @param {Ext.EventObject} e The raw event object
671
             */
672
            'itemdblclick',
673
            /**
674
             * @event itemcontextmenu
675
             * Fires when an item is right clicked.
676
             * @param {Ext.view.View} this
677
             * @param {Ext.data.Model} record The record that belongs to the item
678
             * @param {HTMLElement} item The item's element
679
             * @param {Number} index The item's index
680
             * @param {Ext.EventObject} e The raw event object
681
             */
682
            'itemcontextmenu',
683
            /**
684
             * @event itemkeydown
685
             * Fires when a key is pressed while an item is currently selected.
686
             * @param {Ext.view.View} this
687
             * @param {Ext.data.Model} record The record that belongs to the item
688
             * @param {HTMLElement} item The item's element
689
             * @param {Number} index The item's index
690
             * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
691
             */
692
            'itemkeydown',
693
            /**
694
             * @event beforecontainermousedown
695
             * Fires before the mousedown event on the container is processed. Returns false to cancel the default action.
696
             * @param {Ext.view.View} this
697
             * @param {Ext.EventObject} e The raw event object
698
             */
699
            'beforecontainermousedown',
700
            /**
701
             * @event beforecontainermouseup
702
             * Fires before the mouseup event on the container is processed. Returns false to cancel the default action.
703
             * @param {Ext.view.View} this
704
             * @param {Ext.EventObject} e The raw event object
705
             */
706
            'beforecontainermouseup',
707
            /**
708
             * @event beforecontainermouseover
709
             * Fires before the mouseover event on the container is processed. Returns false to cancel the default action.
710
             * @param {Ext.view.View} this
711
             * @param {Ext.EventObject} e The raw event object
712
             */
713
            'beforecontainermouseover',
714
            /**
715
             * @event beforecontainermouseout
716
             * Fires before the mouseout event on the container is processed. Returns false to cancel the default action.
717
             * @param {Ext.view.View} this
718
             * @param {Ext.EventObject} e The raw event object
719
             */
720
            'beforecontainermouseout',
721
            /**
722
             * @event beforecontainerclick
723
             * Fires before the click event on the container is processed. Returns false to cancel the default action.
724
             * @param {Ext.view.View} this
725
             * @param {Ext.EventObject} e The raw event object
726
             */
727
            'beforecontainerclick',
728
            /**
729
             * @event beforecontainerdblclick
730
             * Fires before the dblclick event on the container is processed. Returns false to cancel the default action.
731
             * @param {Ext.view.View} this
732
             * @param {Ext.EventObject} e The raw event object
733
             */
734
            'beforecontainerdblclick',
735
            /**
736
             * @event beforecontainercontextmenu
737
             * Fires before the contextmenu event on the container is processed. Returns false to cancel the default action.
738
             * @param {Ext.view.View} this
739
             * @param {Ext.EventObject} e The raw event object
740
             */
741
            'beforecontainercontextmenu',
742
            /**
743
             * @event beforecontainerkeydown
744
             * Fires before the keydown event on the container is processed. Returns false to cancel the default action.
745
             * @param {Ext.view.View} this
746
             * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
747
             */
748
            'beforecontainerkeydown',
749
            /**
750
             * @event containermouseup
751
             * Fires when there is a mouse up on the container
752
             * @param {Ext.view.View} this
753
             * @param {Ext.EventObject} e The raw event object
754
             */
755
            'containermouseup',
756
            /**
757
             * @event containermouseover
758
             * Fires when you move the mouse over the container.
759
             * @param {Ext.view.View} this
760
             * @param {Ext.EventObject} e The raw event object
761
             */
762
            'containermouseover',
763
            /**
764
             * @event containermouseout
765
             * Fires when you move the mouse out of the container.
766
             * @param {Ext.view.View} this
767
             * @param {Ext.EventObject} e The raw event object
768
             */
769
            'containermouseout',
770
            /**
771
             * @event containerclick
772
             * Fires when the container is clicked.
773
             * @param {Ext.view.View} this
774
             * @param {Ext.EventObject} e The raw event object
775
             */
776
            'containerclick',
777
            /**
778
             * @event containerdblclick
779
             * Fires when the container is double clicked.
780
             * @param {Ext.view.View} this
781
             * @param {Ext.EventObject} e The raw event object
782
             */
783
            'containerdblclick',
784
            /**
785
             * @event containercontextmenu
786
             * Fires when the container is right clicked.
787
             * @param {Ext.view.View} this
788
             * @param {Ext.EventObject} e The raw event object
789
             */
790
            'containercontextmenu',
791
            /**
792
             * @event containerkeydown
793
             * Fires when a key is pressed while the container is focused, and no item is currently selected.
794
             * @param {Ext.view.View} this
795
             * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
796
             */
797
            'containerkeydown',
798

  
799
            /**
800
             * @event
801
             * @inheritdoc Ext.selection.DataViewModel#selectionchange
802
             */
803
            'selectionchange',
804
            /**
805
             * @event
806
             * @inheritdoc Ext.selection.DataViewModel#beforeselect
807
             */
808
            'beforeselect',
809
            /**
810
             * @event
811
             * @inheritdoc Ext.selection.DataViewModel#beforedeselect
812
             */
813
            'beforedeselect',
814
            /**
815
             * @event
816
             * @inheritdoc Ext.selection.DataViewModel#select
817
             */
818
            'select',
819
            /**
820
             * @event
821
             * @inheritdoc Ext.selection.DataViewModel#deselect
822
             */
823
            'deselect',
824
            /**
825
             * @event
826
             * @inheritdoc Ext.selection.DataViewModel#focuschange
827
             */
828
            'focuschange',
829

  
830
            /**
831
             * @event highlightitem
832
             * Fires when a node is highlighted using keyboard navigation, or mouseover.
833
             * @param {Ext.view.View} view This View Component.
834
             * @param {Ext.Element} node The highlighted node.
835
             */
836
            'highlightitem',
837

  
838
            /**
839
             * @event unhighlightitem
840
             * Fires when a node is unhighlighted using keyboard navigation, or mouseout.
841
             * @param {Ext.view.View} view This View Component.
842
             * @param {Ext.Element} node The previously highlighted node.
843
             */
844
            'unhighlightitem',
845

  
846
            /**
847
             * @event additem
848
             * Fires when one of add tools is clicked.
849
             * @param {Ext.view.View} view This View Component.
850
             * @param {Ext.data.NodeInterface} record The reference record for add action.
851
             * @param {"before/after/child"} where Where to add the new record in relation to the reference record.
852
             * @param {Ext.dom.Element} node The node element.
853
             */
854
            'additem',
855

  
856
            /**
857
             * @event removeitem
858
             * Fires when remove item tool is clicked.
859
             * @param {Ext.view.View} view This View Component.
860
             * @param {Ext.data.NodeInterface} record The reference record for remove action.
861
             * @param {Ext.dom.Element/null} node The node element.
862
             */
863
            'removeitem',
864

  
865
            /**
866
             * @event itemupdate
867
             * Fires when one of nodes has been changed.
868
             * @param {Ext.view.View} view This View Component.
869
             * @param {Ext.data.NodeInterface} record The reference record for add action.
870
             * @param {Ext.dom.Element} node The node element.
871
             */
872
            'itemupdate'
873
        );
874

  
875
        //create store if needed
876
        if(Ext.isString(store)){
877
            //it's an store id
878
            store = Ext.StoreManager.lookup(store);
879
        }
880
        else if( !store || Ext.isObject(store) && !store.isStore){
881
            //it's an store object declaration
882
            store = me.store = new Ext.data.TreeStore(Ext.apply({
883
                root: root,
884
                fields: me.fields,
885
                model: me.model
886
            }), store);
887

  
888

  
889
        }
890
        else if (root) {
891
            store = me.store = Ext.data.StoreManager.lookup(store);
892
        }
893

  
894
        //sets the root node
895
        me.root = root || store.getRootNode();
896

  
897
        //binds the store
898
        me.bindStore(store, true, 'dataStore');
899
        me.callParent(arguments);
900
    },
901

  
902
    /** @inheritdoc */
903
    onRender: function(){
904
        var me = this;
905
        me.callParent(arguments);
906
        me.el.ddScrollConfig= {
907
            vthresh: 25,
908
            hthresh: 25,
909
            frequency: 300,
910
            increment: 100
911
        };
912
    },
913

  
914
    beforeRender: function() {
915
        var me = this;
916
        me.callParent(arguments);
917
        //me.protoEl.set('unselectable', true);
918
        me.getSelectionModel().beforeViewRender(me);
919
    },
920

  
921
    afterRender: function(){
922
        var me = this,
923
            store = this.store,
924
            onMouseOverOut = me.mouseOverOutBuffer ? me.onMouseOverOut : me.handleMouseOverOrOut;
925
        me.callParent();
926

  
927
        //todo handle keyboard an context menu
928
        //init component input event handler
929
        me.mon( me.el, {
930
            scope      : me,
931
            /*
932
             * We need to make copies of this since some of the events fired here will end up triggering
933
             * a new event to be called and the shared event object will be mutated. In future we should
934
             * investigate if there are any issues with creating a new event object for each event that
935
             * is fired.
936
             */
937
            freezeEvent: true,
938
            click      : me.handleEvent,
... This diff was truncated because it exceeds the maximum size that can be displayed.

Also available in: Unified diff