← Back to branch summary

~mortenoh/+junk/dhis2-detailed-import-export

« back to all changes in this revision

Viewing changes to gis/dhis-gis-geostat/mfbase/ext/source/widgets/tree/TreeEditor.js

  • Committer: larshelge at gmail
  • Date: 2009-03-03 16:46:36 UTC
  • Revision ID: larshelge@gmail.com-20090303164636-2sjlrquo7ib1gf7r
Initial check-in

Show diffs side-by-side

added added

removed removed

Lines of Context:
gis/dhis-gis-geostat/mfbase/ext/source/widgets/tree/TreeEditor.js
 
1
/*
 
2
 * Ext JS Library 2.2
 
3
 * Copyright(c) 2006-2008, Ext JS, LLC.
 
4
 * licensing@extjs.com
 
5
 * 
 
6
 * http://extjs.com/license
 
7
 */
 
8
 
 
9
/**
 
10
 * @class Ext.tree.TreeEditor
 
11
 * @extends Ext.Editor
 
12
 * Provides editor functionality for inline tree node editing.  Any valid {@link Ext.form.Field} subclass can be used
 
13
 * as the editor field.
 
14
 * @constructor
 
15
 * @param {TreePanel} tree
 
16
 * @param {Object} fieldConfig (optional) Either a prebuilt {@link Ext.form.Field} instance or a Field config object
 
17
 * that will be applied to the default field instance (defaults to a {@link Ext.form.TextField}).
 
18
 * @param {Object} config (optional) A TreeEditor config object
 
19
 */
 
20
Ext.tree.TreeEditor = function(tree, fc, config){
 
21
    fc = fc || {};
 
22
    var field = fc.events ? fc : new Ext.form.TextField(fc);
 
23
    Ext.tree.TreeEditor.superclass.constructor.call(this, field, config);
 
24
 
 
25
    this.tree = tree;
 
26
 
 
27
    if(!tree.rendered){
 
28
        tree.on('render', this.initEditor, this);
 
29
    }else{
 
30
        this.initEditor(tree);
 
31
    }
 
32
};
 
33
 
 
34
Ext.extend(Ext.tree.TreeEditor, Ext.Editor, {
 
35
    /**
 
36
     * @cfg {String} alignment
 
37
     * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "l-l").
 
38
     */
 
39
    alignment: "l-l",
 
40
    // inherit
 
41
    autoSize: false,
 
42
    /**
 
43
     * @cfg {Boolean} hideEl
 
44
     * True to hide the bound element while the editor is displayed (defaults to false)
 
45
     */
 
46
    hideEl : false,
 
47
    /**
 
48
     * @cfg {String} cls
 
49
     * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
 
50
     */
 
51
    cls: "x-small-editor x-tree-editor",
 
52
    /**
 
53
     * @cfg {Boolean} shim
 
54
     * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
 
55
     */
 
56
    shim:false,
 
57
    // inherit
 
58
    shadow:"frame",
 
59
    /**
 
60
     * @cfg {Number} maxWidth
 
61
     * The maximum width in pixels of the editor field (defaults to 250).  Note that if the maxWidth would exceed
 
62
     * the containing tree element's size, it will be automatically limited for you to the container width, taking
 
63
     * scroll and client offsets into account prior to each edit.
 
64
     */
 
65
    maxWidth: 250,
 
66
    /**
 
67
     * @cfg {Number} editDelay The number of milliseconds between clicks to register a double-click that will trigger
 
68
     * editing on the current node (defaults to 350).  If two clicks occur on the same node within this time span,
 
69
     * the editor for the node will display, otherwise it will be processed as a regular click.
 
70
     */
 
71
    editDelay : 350,
 
72
 
 
73
    initEditor : function(tree){
 
74
        tree.on('beforeclick', this.beforeNodeClick, this);
 
75
        tree.on('dblclick', this.onNodeDblClick, this);
 
76
        this.on('complete', this.updateNode, this);
 
77
        this.on('beforestartedit', this.fitToTree, this);
 
78
        this.on('startedit', this.bindScroll, this, {delay:10});
 
79
        this.on('specialkey', this.onSpecialKey, this);
 
80
    },
 
81
 
 
82
    // private
 
83
    fitToTree : function(ed, el){
 
84
        var td = this.tree.getTreeEl().dom, nd = el.dom;
 
85
        if(td.scrollLeft >  nd.offsetLeft){ // ensure the node left point is visible
 
86
            td.scrollLeft = nd.offsetLeft;
 
87
        }
 
88
        var w = Math.min(
 
89
                this.maxWidth,
 
90
                (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
 
91
        this.setSize(w, '');
 
92
    },
 
93
 
 
94
    // private
 
95
    triggerEdit : function(node, defer){
 
96
        this.completeEdit();
 
97
                if(node.attributes.editable !== false){
 
98
               /**
 
99
                * The tree node this editor is bound to. Read-only.
 
100
                * @type Ext.tree.TreeNode
 
101
                * @property editNode
 
102
                */
 
103
                        this.editNode = node;
 
104
            if(this.tree.autoScroll){
 
105
                node.ui.getEl().scrollIntoView(this.tree.body);
 
106
            }
 
107
            this.autoEditTimer = this.startEdit.defer(this.editDelay, this, [node.ui.textNode, node.text]);
 
108
            return false;
 
109
        }
 
110
    },
 
111
 
 
112
    // private
 
113
    bindScroll : function(){
 
114
        this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
 
115
    },
 
116
 
 
117
    // private
 
118
    beforeNodeClick : function(node, e){
 
119
        clearTimeout(this.autoEditTimer);
 
120
        if(this.tree.getSelectionModel().isSelected(node)){
 
121
            e.stopEvent();
 
122
            return this.triggerEdit(node);
 
123
        }
 
124
    },
 
125
 
 
126
    onNodeDblClick : function(node, e){
 
127
        clearTimeout(this.autoEditTimer);
 
128
    },
 
129
 
 
130
    // private
 
131
    updateNode : function(ed, value){
 
132
        this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
 
133
        this.editNode.setText(value);
 
134
    },
 
135
 
 
136
    // private
 
137
    onHide : function(){
 
138
        Ext.tree.TreeEditor.superclass.onHide.call(this);
 
139
        if(this.editNode){
 
140
            this.editNode.ui.focus.defer(50, this.editNode.ui);
 
141
        }
 
142
    },
 
143
 
 
144
    // private
 
145
    onSpecialKey : function(field, e){
 
146
        var k = e.getKey();
 
147
        if(k == e.ESC){
 
148
            e.stopEvent();
 
149
            this.cancelEdit();
 
150
        }else if(k == e.ENTER && !e.hasModifier()){
 
151
            e.stopEvent();
 
152
            this.completeEdit();
 
153
        }
 
154
    }
 
155
});
 
 
b'\\ No newline at end of file'