← Back to branch summary

~cdparra/gelee/trunk

« back to all changes in this revision

Viewing changes to webui/ecosystem/workspace/extjs/docs/source/debug1.html

  • Committer: parra
  • Date: 2010-03-15 15:56:56 UTC
  • Revision ID: svn-v4:ac5bba68-f036-4e09-846e-8f32731cc928:trunk/gelee:1448
merged gelee at svn

Show diffs side-by-side

added added

removed removed

Lines of Context:
webui/ecosystem/workspace/extjs/docs/source/debug1.html
 
1
<html>
 
2
<head>
 
3
  <title>The source code</title>
 
4
    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
 
5
    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
 
6
</head>
 
7
<body  onload="prettyPrint();">
 
8
    <pre class="prettyprint lang-js">Ext.debug = {};
 
9
 
 
10
(function(){
 
11
 
 
12
var cp;
 
13
 
 
14
function createConsole(){
 
15
 
 
16
    var scriptPanel = new Ext.debug.ScriptsPanel();
 
17
    var logView = new Ext.debug.LogPanel();
 
18
    var tree = new Ext.debug.DomTree();
 
19
    var compInspector = new Ext.debug.ComponentInspector();
 
20
    var compInfoPanel = new Ext.debug.ComponentInfoPanel();
 
21
    var storeInspector = new Ext.debug.StoreInspector();
 
22
    var objInspector = new Ext.debug.ObjectInspector();
 
23
 
 
24
    var tabs = new Ext.TabPanel({
 
25
        activeTab: 0,
 
26
        border: false,
 
27
        tabPosition: 'bottom',
 
28
        items: [{
 
29
            title: 'Debug Console',
 
30
            layout:'border',
 
31
            items: [logView, scriptPanel]
 
32
        },{
 
33
            title: 'HTML Inspector',
 
34
            layout:'border',
 
35
            items: [tree]
 
36
        },{
 
37
            title: 'Component Inspector',
 
38
            layout: 'border',
 
39
            items: [compInspector,compInfoPanel]
 
40
        },{
 
41
            title: 'Object Inspector',
 
42
            layout: 'border',
 
43
            items: [objInspector]
 
44
        },{
 
45
            title: 'Data Stores',
 
46
            layout: 'border',
 
47
            items: [storeInspector]
 
48
        }]
 
49
    });
 
50
 
 
51
    cp = new Ext.Panel({
 
52
        id: 'x-debug-browser',
 
53
        title: 'Console',
 
54
        collapsible: true,
 
55
        animCollapse: false,
 
56
        style: 'position:absolute;left:0;bottom:0;z-index:101',
 
57
        height:200,
 
58
        logView: logView,
 
59
        layout: 'fit',
 
60
 
 
61
        tools:[{
 
62
            id: 'close',
 
63
            handler: function(){
 
64
                cp.destroy();
 
65
                cp = null;
 
66
                Ext.EventManager.removeResizeListener(handleResize);
 
67
            }
 
68
        }],
 
69
 
 
70
        items: tabs
 
71
    });
 
72
 
 
73
    cp.render(Ext.getBody());
 
74
 
 
75
    cp.resizer = new Ext.Resizable(cp.el, {
 
76
        minHeight:50,
 
77
        handles: "n",
 
78
        pinned: true,
 
79
        transparent:true,
 
80
        resizeElement : function(){
 
81
            var box = this.proxy.getBox();
 
82
            this.proxy.hide();
 
83
            cp.setHeight(box.height);
 
84
            return box;
 
85
        }
 
86
    });
 
87
 
 
88
//     function handleResize(){
 
89
//         cp.setWidth(Ext.getBody().getViewSize().width);
 
90
//     }
 
91
//     Ext.EventManager.onWindowResize(handleResize);
 
92
//
 
93
//     handleResize();
 
94
 
 
95
    function handleResize(){
 
96
        var b = Ext.getBody()
 
97
        var size = b.getViewSize();
 
98
        if(size.height < b.dom.scrollHeight) {
 
99
            size.width -= 18;
 
100
        }
 
101
        cp.setWidth(size.width);
 
102
    }
 
103
    Ext.EventManager.onWindowResize(handleResize);
 
104
    handleResize();
 
105
}
 
106
 
 
107
 
 
108
Ext.apply(Ext, {
 
109
    log : function(){
 
110
        if(!cp){
 
111
            createConsole();
 
112
        }
 
113
        cp.logView.log.apply(cp.logView, arguments);
 
114
    },
 
115
 
 
116
    logf : function(format, arg1, arg2, etc){
 
117
        Ext.log(String.format.apply(String, arguments));
 
118
    },
 
119
 
 
120
    dump : function(o){
 
121
        if(typeof o == 'string' || typeof o == 'number' || typeof o == 'undefined' || Ext.isDate(o)){
 
122
            Ext.log(o);
 
123
        }else if(!o){
 
124
            Ext.log("null");
 
125
        }else if(typeof o != "object"){
 
126
            Ext.log('Unknown return type');
 
127
        }else if(Ext.isArray(o)){
 
128
            Ext.log('['+o.join(',')+']');
 
129
        }else{
 
130
            var b = ["{\n"];
 
131
            for(var key in o){
 
132
                var to = typeof o[key];
 
133
                if(to != "function" && to != "object"){
 
134
                    b.push(String.format("  {0}: {1},\n", key, o[key]));
 
135
                }
 
136
            }
 
137
            var s = b.join("");
 
138
            if(s.length > 3){
 
139
                s = s.substr(0, s.length-2);
 
140
            }
 
141
            Ext.log(s + "\n}");
 
142
        }
 
143
    },
 
144
 
 
145
    _timers : {},
 
146
 
 
147
    time : function(name){
 
148
        name = name || "def";
 
149
        Ext._timers[name] = new Date().getTime();
 
150
    },
 
151
 
 
152
    timeEnd : function(name, printResults){
 
153
        var t = new Date().getTime();
 
154
        name = name || "def";
 
155
        var v = String.format("{0} ms", t-Ext._timers[name]);
 
156
        Ext._timers[name] = new Date().getTime();
 
157
        if(printResults !== false){
 
158
            Ext.log('Timer ' + (name == "def" ? v : name + ": " + v));
 
159
        }
 
160
        return v;
 
161
    }
 
162
});
 
163
 
 
164
})();
 
165
 
 
166
 
 
167
Ext.debug.ScriptsPanel = Ext.extend(Ext.Panel, {
 
168
    id:'x-debug-scripts',
 
169
    region: 'east',
 
170
    minWidth: 200,
 
171
    split: true,
 
172
    width: 350,
 
173
    border: false,
 
174
    layout:'anchor',
 
175
    style:'border-width:0 0 0 1px;',
 
176
 
 
177
    initComponent : function(){
 
178
 
 
179
        this.scriptField = new Ext.form.TextArea({
 
180
            anchor: '100% -26',
 
181
            style:'border-width:0;'
 
182
        });
 
183
 
 
184
        this.trapBox = new Ext.form.Checkbox({
 
185
            id: 'console-trap',
 
186
            boxLabel: 'Trap Errors',
 
187
            checked: true
 
188
        });
 
189
 
 
190
        this.toolbar = new Ext.Toolbar([{
 
191
                text: 'Run',
 
192
                scope: this,
 
193
                handler: this.evalScript
 
194
            },{
 
195
                text: 'Clear',
 
196
                scope: this,
 
197
                handler: this.clear
 
198
            },
 
199
            '->',
 
200
            this.trapBox,
 
201
            ' ', ' '
 
202
        ]);
 
203
 
 
204
        this.items = [this.toolbar, this.scriptField];
 
205
 
 
206
        Ext.debug.ScriptsPanel.superclass.initComponent.call(this);
 
207
    },
 
208
 
 
209
    evalScript : function(){
 
210
        var s = this.scriptField.getValue();
 
211
        if(this.trapBox.getValue()){
 
212
            try{
 
213
                var rt = eval(s);
 
214
                Ext.dump(rt === undefined? '(no return)' : rt);
 
215
            }catch(e){
 
216
                Ext.log(e.message || e.descript);
 
217
            }
 
218
        }else{
 
219
            var rt = eval(s);
 
220
            Ext.dump(rt === undefined? '(no return)' : rt);
 
221
        }
 
222
    },
 
223
 
 
224
    clear : function(){
 
225
        this.scriptField.setValue('');
 
226
        this.scriptField.focus();
 
227
    }
 
228
 
 
229
});
 
230
 
 
231
Ext.debug.LogPanel = Ext.extend(Ext.Panel, {
 
232
    autoScroll: true,
 
233
    region: 'center',
 
234
    border: false,
 
235
    style:'border-width:0 1px 0 0',
 
236
 
 
237
    log : function(){
 
238
        var markup = [  '<div style="padding:5px !important;border-bottom:1px solid #ccc;">',
 
239
                    Ext.util.Format.htmlEncode(Array.prototype.join.call(arguments, ', ')).replace(/\n/g, '<br />').replace(/\s/g, '&#160;'),
 
240
                    '</div>'].join('');
 
241
 
 
242
        this.body.insertHtml('beforeend', markup);
 
243
        this.body.scrollTo('top', 100000);
 
244
    },
 
245
 
 
246
    clear : function(){
 
247
        this.body.update('');
 
248
        this.body.dom.scrollTop = 0;
 
249
    }
 
250
});
 
251
 
 
252
Ext.debug.DomTree = Ext.extend(Ext.tree.TreePanel, {
 
253
    enableDD:false ,
 
254
    lines:false,
 
255
    rootVisible:false,
 
256
    animate:false,
 
257
    hlColor:'ffff9c',
 
258
    autoScroll: true,
 
259
    region:'center',
 
260
    border:false,
 
261
 
 
262
    initComponent : function(){
 
263
 
 
264
 
 
265
        Ext.debug.DomTree.superclass.initComponent.call(this);
 
266
 
 
267
        // tree related stuff
 
268
        var styles = false, hnode;
 
269
        var nonSpace = /^\s*$/;
 
270
        var html = Ext.util.Format.htmlEncode;
 
271
        var ellipsis = Ext.util.Format.ellipsis;
 
272
        var styleRe = /\s?([a-z\-]*)\:([^;]*)(?:[;\s\n\r]*)/gi;
 
273
 
 
274
        function findNode(n){
 
275
            if(!n || n.nodeType != 1 || n == document.body || n == document){
 
276
                return false;
 
277
            }
 
278
            var pn = [n], p = n;
 
279
            while((p = p.parentNode) && p.nodeType == 1 && p.tagName.toUpperCase() != 'HTML'){
 
280
                pn.unshift(p);
 
281
            }
 
282
            var cn = hnode;
 
283
            for(var i = 0, len = pn.length; i < len; i++){
 
284
                cn.expand();
 
285
                cn = cn.findChild('htmlNode', pn[i]);
 
286
                if(!cn){ // in this dialog?
 
287
                    return false;
 
288
                }
 
289
            }
 
290
            cn.select();
 
291
            var a = cn.ui.anchor;
 
292
            treeEl.dom.scrollTop = Math.max(0 ,a.offsetTop-10);
 
293
            //treeEl.dom.scrollLeft = Math.max(0 ,a.offsetLeft-10); no likey
 
294
            cn.highlight();
 
295
            return true;
 
296
        }
 
297
 
 
298
        function nodeTitle(n){
 
299
            var s = n.tagName;
 
300
            if(n.id){
 
301
                s += '#'+n.id;
 
302
            }else if(n.className){
 
303
                s += '.'+n.className;
 
304
            }
 
305
            return s;
 
306
        }
 
307
 
 
308
        function onNodeSelect(t, n, last){
 
309
            return;
 
310
            if(last && last.unframe){
 
311
                last.unframe();
 
312
            }
 
313
            var props = {};
 
314
            if(n && n.htmlNode){
 
315
                if(frameEl.pressed){
 
316
                    n.frame();
 
317
                }
 
318
                if(inspecting){
 
319
                    return;
 
320
                }
 
321
                addStyle.enable();
 
322
                reload.setDisabled(n.leaf);
 
323
                var dom = n.htmlNode;
 
324
                stylePanel.setTitle(nodeTitle(dom));
 
325
                if(styles && !showAll.pressed){
 
326
                    var s = dom.style ? dom.style.cssText : '';
 
327
                    if(s){
 
328
                        var m;
 
329
                        while ((m = styleRe.exec(s)) != null){
 
330
                            props[m[1].toLowerCase()] = m[2];
 
331
                        }
 
332
                    }
 
333
                }else if(styles){
 
334
                    var cl = Ext.debug.cssList;
 
335
                    var s = dom.style, fly = Ext.fly(dom);
 
336
                    if(s){
 
337
                        for(var i = 0, len = cl.length; i<len; i++){
 
338
                            var st = cl[i];
 
339
                            var v = s[st] || fly.getStyle(st);
 
340
                            if(v != undefined && v !== null && v !== ''){
 
341
                                props[st] = v;
 
342
                            }
 
343
                        }
 
344
                    }
 
345
                }else{
 
346
                    for(var a in dom){
 
347
                        var v = dom[a];
 
348
                        if((isNaN(a+10)) && v != undefined && v !== null && v !== '' && !(Ext.isGecko && a[0] == a[0].toUpperCase())){
 
349
                            props[a] = v;
 
350
                        }
 
351
                    }
 
352
                }
 
353
            }else{
 
354
                if(inspecting){
 
355
                    return;
 
356
                }
 
357
                addStyle.disable();
 
358
                reload.disabled();
 
359
            }
 
360
            stylesGrid.setSource(props);
 
361
            stylesGrid.treeNode = n;
 
362
            stylesGrid.view.fitColumns();
 
363
        }
 
364
 
 
365
        this.loader = new Ext.tree.TreeLoader();
 
366
        this.loader.load = function(n, cb){
 
367
            var isBody = n.htmlNode == document.body;
 
368
            var cn = n.htmlNode.childNodes;
 
369
            for(var i = 0, c; c = cn[i]; i++){
 
370
                if(isBody && c.id == 'x-debug-browser'){
 
371
                    continue;
 
372
                }
 
373
                if(c.nodeType == 1){
 
374
                    n.appendChild(new Ext.debug.HtmlNode(c));
 
375
                }else if(c.nodeType == 3 && !nonSpace.test(c.nodeValue)){
 
376
                    n.appendChild(new Ext.tree.TreeNode({
 
377
                        text:'<em>' + ellipsis(html(String(c.nodeValue)), 35) + '</em>',
 
378
                        cls: 'x-tree-noicon'
 
379
                    }));
 
380
                }
 
381
            }
 
382
            cb();
 
383
        };
 
384
 
 
385
        //tree.getSelectionModel().on('selectionchange', onNodeSelect, null, {buffer:250});
 
386
 
 
387
        this.root = this.setRootNode(new Ext.tree.TreeNode('Ext'));
 
388
 
 
389
        hnode = this.root.appendChild(new Ext.debug.HtmlNode(
 
390
                document.getElementsByTagName('html')[0]
 
391
        ));
 
392
 
 
393
    }
 
394
});
 
395
 
 
396
Ext.debug.ComponentNodeUI = Ext.extend(Ext.tree.TreeNodeUI,{
 
397
    onOver : function(e){
 
398
        Ext.debug.ComponentNodeUI.superclass.onOver.call(this);
 
399
        var cmp = this.node.attributes.component;
 
400
        if (cmp.el && cmp.el.mask && cmp.id !='x-debug-browser') {
 
401
            try { // Oddly bombs on some elements in IE, gets any we care about though
 
402
                cmp.el.mask();
 
403
            } catch(e) {}
 
404
        }
 
405
    },
 
406
 
 
407
    onOut : function(e){
 
408
        Ext.debug.ComponentNodeUI.superclass.onOut.call(this);
 
409
        var cmp = this.node.attributes.component;
 
410
        if (cmp.el && cmp.el.unmask && cmp.id !='x-debug-browser') {
 
411
            try {
 
412
                cmp.el.unmask();
 
413
            } catch(e) {}
 
414
        }
 
415
    }
 
416
});
 
417
 
 
418
Ext.debug.ComponentInspector = Ext.extend(Ext.tree.TreePanel, {
 
419
    enableDD:false ,
 
420
    lines:false,
 
421
    rootVisible:false,
 
422
    animate:false,
 
423
    hlColor:'ffff9c',
 
424
    autoScroll: true,
 
425
    region:'center',
 
426
    border:false,
 
427
 
 
428
    initComponent : function(){
 
429
        this.loader = new Ext.tree.TreeLoader();
 
430
        this.bbar = new Ext.Toolbar([{
 
431
            text: 'Refresh',
 
432
            handler: this.refresh,
 
433
            scope: this
 
434
        }]);
 
435
        Ext.debug.ComponentInspector.superclass.initComponent.call(this);
 
436
 
 
437
        this.root = this.setRootNode(new Ext.tree.TreeNode({
 
438
            text: 'Ext Components',
 
439
            component: Ext.ComponentMgr.all,
 
440
            leaf: false
 
441
        }));
 
442
        this.parseRootNode();
 
443
 
 
444
        this.on('click', this.onClick, this);
 
445
    },
 
446
 
 
447
    createNode: function(n,c) {
 
448
        var leaf = (c.items && c.items.length > 0);
 
449
        return n.appendChild(new Ext.tree.TreeNode({
 
450
            text: c.id + (c.getXType() ? ' [ ' + c.getXType() + ' ]': '' ),
 
451
            component: c,
 
452
            uiProvider:Ext.debug.ComponentNodeUI,
 
453
            leaf: !leaf
 
454
        }));
 
455
    },
 
456
 
 
457
    parseChildItems: function(n) {
 
458
        var cn = n.attributes.component.items;
 
459
        if (cn) {
 
460
            for (var i = 0;i < cn.length; i++) {
 
461
                var c = cn.get(i);
 
462
                if (c.id != this.id && c.id != this.bottomToolbar.id) {
 
463
                    var newNode = this.createNode(n,c);
 
464
                    if (!newNode.leaf) {
 
465
                        this.parseChildItems(newNode)
 
466
                    }
 
467
                }
 
468
            }
 
469
        }
 
470
    },
 
471
 
 
472
    parseRootNode: function() {
 
473
        var n = this.root;
 
474
        var cn = n.attributes.component.items;
 
475
        for (var i = 0,c;c = cn[i];i++) {
 
476
            if (c.id != this.id && c.id != this.bottomToolbar.id) {
 
477
                if (!c.ownerCt) {
 
478
                    var newNode = this.createNode(n,c);
 
479
                    if (!newNode.leaf) {
 
480
                        this.parseChildItems(newNode);
 
481
                    }
 
482
                }
 
483
            }
 
484
        }
 
485
    },
 
486
 
 
487
    onClick: function(node, e) {
 
488
        var oi = Ext.getCmp('x-debug-objinspector');
 
489
        oi.refreshNodes(node.attributes.component);
 
490
        oi.ownerCt.show();
 
491
    },
 
492
 
 
493
    refresh: function() {
 
494
        while (this.root.firstChild) {
 
495
            this.root.removeChild(this.root.firstChild);
 
496
        }
 
497
        this.parseRootNode();
 
498
        var ci = Ext.getCmp('x-debug-compinfo');
 
499
        if (ci) {
 
500
            ci.message('refreshed component tree - '+Ext.ComponentMgr.all.length)
 
501
        }
 
502
    }
 
503
});
 
504
 
 
505
Ext.debug.ComponentInfoPanel = Ext.extend(Ext.Panel,{
 
506
    id:'x-debug-compinfo',
 
507
    region: 'east',
 
508
    minWidth: 200,
 
509
    split: true,
 
510
    width: 350,
 
511
    border: false,
 
512
    autoScroll: true,
 
513
    layout:'anchor',
 
514
    style:'border-width:0 0 0 1px;',
 
515
 
 
516
    initComponent: function() {
 
517
        this.watchBox = new Ext.form.Checkbox({
 
518
            id: 'x-debug-watchcomp',
 
519
            boxLabel: 'Watch ComponentMgr',
 
520
            listeners: {
 
521
                check: function(cb, val) {
 
522
                    if (val) {
 
523
                        Ext.ComponentMgr.all.on('add', this.onAdd, this);
 
524
                        Ext.ComponentMgr.all.on('remove', this.onRemove, this);
 
525
                    } else {
 
526
                        Ext.ComponentMgr.all.un('add', this.onAdd, this);
 
527
                        Ext.ComponentMgr.all.un('remove', this.onRemove, this);
 
528
                    }
 
529
                },
 
530
                scope: this
 
531
            }
 
532
        });
 
533
 
 
534
        this.tbar = new Ext.Toolbar([{
 
535
            text: 'Clear',
 
536
            handler: this.clear,
 
537
            scope: this
 
538
        },'->',this.watchBox
 
539
        ]);
 
540
        Ext.debug.ComponentInfoPanel.superclass.initComponent.call(this);
 
541
    },
 
542
 
 
543
    onAdd: function(i, o, key) {
 
544
        var markup = ['<div style="padding:5px !important;border-bottom:1px solid #ccc;">',
 
545
                    'Added: '+o.id,
 
546
                    '</div>'].join('');
 
547
        this.insertMarkup(markup);
 
548
    },
 
549
 
 
550
    onRemove: function(o, key) {
 
551
        var markup = ['<div style="padding:5px !important;border-bottom:1px solid #ccc;">',
 
552
                    'Removed: '+o.id,
 
553
                    '</div>'].join('');
 
554
        this.insertMarkup(markup);
 
555
    },
 
556
 
 
557
    message: function(msg) {
 
558
        var markup = ['<div style="padding:5px !important;border-bottom:1px solid #ccc;">',
 
559
                    msg,
 
560
                    '</div>'].join('');
 
561
        this.insertMarkup(markup);
 
562
    },
 
563
    insertMarkup: function(markup) {
 
564
        this.body.insertHtml('beforeend', markup);
 
565
        this.body.scrollTo('top', 100000);
 
566
    },
 
567
    clear : function(){
 
568
        this.body.update('');
 
569
        this.body.dom.scrollTop = 0;
 
570
    }
 
571
});
 
572
 
 
573
Ext.debug.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
 
574
    focus: Ext.emptyFn, // prevent odd scrolling behavior
 
575
 
 
576
    renderElements : function(n, a, targetNode, bulkRender){
 
577
        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
 
578
 
 
579
        var t = n.getOwnerTree();
 
580
        var cols = t.columns;
 
581
        var bw = t.borderWidth;
 
582
        var c = cols[0];
 
583
 
 
584
        var buf = [
 
585
             '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',
 
586
                '<div class="x-tree-col" style="width:',c.width-bw,'px;">',
 
587
                    '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
 
588
                    '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',
 
589
                    '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on">',
 
590
                    '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',
 
591
                    a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
 
592
                    '<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",
 
593
                "</div>"];
 
594
         for(var i = 1, len = cols.length; i < len; i++){
 
595
             c = cols[i];
 
596
 
 
597
             buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
 
598
                        '<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",
 
599
                      "</div>");
 
600
         }
 
601
         buf.push(
 
602
            '<div class="x-clear"></div></div>',
 
603
            '<ul class="x-tree-node-ct" style="display:none;"></ul>',
 
604
            "</li>");
 
605
 
 
606
        if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
 
607
            this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
 
608
                                n.nextSibling.ui.getEl(), buf.join(""));
 
609
        }else{
 
610
            this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
 
611
        }
 
612
 
 
613
        this.elNode = this.wrap.childNodes[0];
 
614
        this.ctNode = this.wrap.childNodes[1];
 
615
        var cs = this.elNode.firstChild.childNodes;
 
616
        this.indentNode = cs[0];
 
617
        this.ecNode = cs[1];
 
618
        this.iconNode = cs[2];
 
619
        this.anchor = cs[3];
 
620
        this.textNode = cs[3].firstChild;
 
621
    }
 
622
});
 
623
 
 
624
Ext.debug.ObjectInspector = Ext.extend(Ext.tree.TreePanel, {
 
625
    id: 'x-debug-objinspector',
 
626
    enableDD:false ,
 
627
    lines:false,
 
628
    rootVisible:false,
 
629
    animate:false,
 
630
    hlColor:'ffff9c',
 
631
    autoScroll: true,
 
632
    region:'center',
 
633
    border:false,
 
634
    lines:false,
 
635
    borderWidth: Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
 
636
    cls:'x-column-tree',
 
637
 
 
638
    initComponent : function(){
 
639
        this.showFunc = false;
 
640
        this.toggleFunc = function() {
 
641
            this.showFunc = !this.showFunc;
 
642
            this.refreshNodes(this.currentObject);
 
643
        }
 
644
        this.bbar = new Ext.Toolbar([{
 
645
            text: 'Show Functions',
 
646
            enableToggle: true,
 
647
            pressed: false,
 
648
            handler: this.toggleFunc,
 
649
            scope: this
 
650
        }]);
 
651
 
 
652
        Ext.apply(this,{
 
653
            title: ' ',
 
654
            loader: new Ext.tree.TreeLoader(),
 
655
            columns:[{
 
656
                header:'Property',
 
657
                width: 300,
 
658
                dataIndex:'name'
 
659
            },{
 
660
                header:'Value',
 
661
                width: 900,
 
662
                dataIndex:'value'
 
663
            }]
 
664
        });
 
665
 
 
666
        Ext.debug.ObjectInspector.superclass.initComponent.call(this);
 
667
 
 
668
        this.root = this.setRootNode(new Ext.tree.TreeNode({
 
669
            text: 'Dummy Node',
 
670
            leaf: false
 
671
        }));
 
672
 
 
673
        if (this.currentObject) {
 
674
            this.parseNodes();
 
675
        }
 
676
    },
 
677
 
 
678
    refreshNodes: function(newObj) {
 
679
        this.currentObject = newObj;
 
680
        var node = this.root;
 
681
        while(node.firstChild){
 
682
            node.removeChild(node.firstChild);
 
683
        }
 
684
        this.parseNodes();
 
685
    },
 
686
 
 
687
    parseNodes: function() {
 
688
        for (var o in this.currentObject) {
 
689
            if (!this.showFunc) {
 
690
                if (Ext.isFunction(this.currentObject[o])) {
 
691
                    continue;
 
692
                }
 
693
            }
 
694
            this.createNode(o);
 
695
        }
 
696
    },
 
697
 
 
698
    createNode: function(o) {
 
699
        return this.root.appendChild(new Ext.tree.TreeNode({
 
700
            name: o,
 
701
            value: this.currentObject[o],
 
702
            uiProvider:Ext.debug.ColumnNodeUI,
 
703
            iconCls: 'x-debug-node',
 
704
            leaf: true
 
705
        }));
 
706
    },
 
707
 
 
708
    onRender : function(){
 
709
        Ext.debug.ObjectInspector.superclass.onRender.apply(this, arguments);
 
710
        this.headers = this.header.createChild({cls:'x-tree-headers'});
 
711
 
 
712
        var cols = this.columns, c;
 
713
        var totalWidth = 0;
 
714
 
 
715
        for(var i = 0, len = cols.length; i < len; i++){
 
716
             c = cols[i];
 
717
             totalWidth += c.width;
 
718
             this.headers.createChild({
 
719
                 cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
 
720
                 cn: {
 
721
                     cls:'x-tree-hd-text',
 
722
                     html: c.header
 
723
                 },
 
724
                 style:'width:'+(c.width-this.borderWidth)+'px;'
 
725
             });
 
726
        }
 
727
        this.headers.createChild({cls:'x-clear'});
 
728
        // prevent floats from wrapping when clipped
 
729
        this.headers.setWidth(totalWidth);
 
730
        this.innerCt.setWidth(totalWidth);
 
731
    }
 
732
});
 
733
 
 
734
 
 
735
Ext.debug.StoreInspector = Ext.extend(Ext.tree.TreePanel, {
 
736
    enableDD:false ,
 
737
    lines:false,
 
738
    rootVisible:false,
 
739
    animate:false,
 
740
    hlColor:'ffff9c',
 
741
    autoScroll: true,
 
742
    region:'center',
 
743
    border:false,
 
744
 
 
745
    initComponent: function() {
 
746
        this.bbar = new Ext.Toolbar([{
 
747
            text: 'Refresh',
 
748
            handler: this.refresh,
 
749
            scope: this
 
750
        }]);
 
751
        Ext.debug.StoreInspector.superclass.initComponent.call(this);
 
752
 
 
753
        this.root = this.setRootNode(new Ext.tree.TreeNode({
 
754
            text: 'Data Stores',
 
755
            leaf: false
 
756
        }));
 
757
        this.on('click', this.onClick, this);
 
758
 
 
759
        this.parseStores();
 
760
    },
 
761
 
 
762
    parseStores: function() {
 
763
        var cn = Ext.StoreMgr.items;
 
764
        for (var i = 0,c;c = cn[i];i++) {
 
765
            this.root.appendChild({
 
766
                text: c.storeId + ' - ' + c.totalLength + ' records',
 
767
                component: c,
 
768
                leaf: true
 
769
            });
 
770
        }
 
771
    },
 
772
 
 
773
    onClick: function(node, e) {
 
774
        var oi = Ext.getCmp('x-debug-objinspector');
 
775
        oi.refreshNodes(node.attributes.component);
 
776
        oi.ownerCt.show();
 
777
    },
 
778
 
 
779
    refresh: function() {
 
780
        while (this.root.firstChild) {
 
781
            this.root.removeChild(this.root.firstChild);
 
782
        }
 
783
        this.parseStores();
 
784
    }
 
785
});
 
786
 
 
787
// highly unusual class declaration
 
788
Ext.debug.HtmlNode = function(){
 
789
    var html = Ext.util.Format.htmlEncode;
 
790
    var ellipsis = Ext.util.Format.ellipsis;
 
791
    var nonSpace = /^\s*$/;
 
792
 
 
793
    var attrs = [
 
794
        {n: 'id', v: 'id'},
 
795
        {n: 'className', v: 'class'},
 
796
        {n: 'name', v: 'name'},
 
797
        {n: 'type', v: 'type'},
 
798
        {n: 'src', v: 'src'},
 
799
        {n: 'href', v: 'href'}
 
800
    ];
 
801
 
 
802
    function hasChild(n){
 
803
        for(var i = 0, c; c = n.childNodes[i]; i++){
 
804
            if(c.nodeType == 1){
 
805
                return true;
 
806
            }
 
807
        }
 
808
        return false;
 
809
    }
 
810
 
 
811
    function renderNode(n, leaf){
 
812
        var tag = n.tagName.toLowerCase();
 
813
        var s = '&lt;' + tag;
 
814
        for(var i = 0, len = attrs.length; i < len; i++){
 
815
            var a = attrs[i];
 
816
            var v = n[a.n];
 
817
            if(v && !nonSpace.test(v)){
 
818
                s += ' ' + a.v + '=&quot;<i>' + html(v) +'</i>&quot;';
 
819
            }
 
820
        }
 
821
        var style = n.style ? n.style.cssText : '';
 
822
        if(style){
 
823
            s += ' style=&quot;<i>' + html(style.toLowerCase()) +'</i>&quot;';
 
824
        }
 
825
        if(leaf && n.childNodes.length > 0){
 
826
            s+='&gt;<em>' + ellipsis(html(String(n.innerHTML)), 35) + '</em>&lt;/'+tag+'&gt;';
 
827
        }else if(leaf){
 
828
            s += ' /&gt;';
 
829
        }else{
 
830
            s += '&gt;';
 
831
        }
 
832
        return s;
 
833
    }
 
834
 
 
835
    var HtmlNode = function(n){
 
836
        var leaf = !hasChild(n);
 
837
        this.htmlNode = n;
 
838
        this.tagName = n.tagName.toLowerCase();
 
839
        var attr = {
 
840
            text : renderNode(n, leaf),
 
841
            leaf : leaf,
 
842
            cls: 'x-tree-noicon'
 
843
        };
 
844
        HtmlNode.superclass.constructor.call(this, attr);
 
845
        this.attributes.htmlNode = n; // for searching
 
846
        if(!leaf){
 
847
            this.on('expand', this.onExpand,  this);
 
848
            this.on('collapse', this.onCollapse,  this);
 
849
        }
 
850
    };
 
851
 
 
852
 
 
853
    Ext.extend(HtmlNode, Ext.tree.AsyncTreeNode, {
 
854
        cls: 'x-tree-noicon',
 
855
        preventHScroll: true,
 
856
        refresh : function(highlight){
 
857
            var leaf = !hasChild(this.htmlNode);
 
858
            this.setText(renderNode(this.htmlNode, leaf));
 
859
            if(highlight){
 
860
                Ext.fly(this.ui.textNode).highlight();
 
861
            }
 
862
        },
 
863
 
 
864
        onExpand : function(){
 
865
            if(!this.closeNode && this.parentNode){
 
866
                this.closeNode = this.parentNode.insertBefore(new Ext.tree.TreeNode({
 
867
                    text:'&lt;/' + this.tagName + '&gt;',
 
868
                    cls: 'x-tree-noicon'
 
869
                }), this.nextSibling);
 
870
            }else if(this.closeNode){
 
871
                this.closeNode.ui.show();
 
872
            }
 
873
        },
 
874
 
 
875
        onCollapse : function(){
 
876
            if(this.closeNode){
 
877
                this.closeNode.ui.hide();
 
878
            }
 
879
        },
 
880
 
 
881
        render : function(bulkRender){
 
882
            HtmlNode.superclass.render.call(this, bulkRender);
 
883
        },
 
884
 
 
885
        highlightNode : function(){
 
886
            //Ext.fly(this.htmlNode).highlight();
 
887
        },
 
888
 
 
889
        highlight : function(){
 
890
            //Ext.fly(this.ui.textNode).highlight();
 
891
        },
 
892
 
 
893
        frame : function(){
 
894
            this.htmlNode.style.border = '1px solid #0000ff';
 
895
            //this.highlightNode();
 
896
        },
 
897
 
 
898
        unframe : function(){
 
899
            //Ext.fly(this.htmlNode).removeClass('x-debug-frame');
 
900
            this.htmlNode.style.border = '';
 
901
        }
 
902
    });
 
903
 
 
904
    return HtmlNode;
 
905
}();</pre>    
 
906
</body>
 
907
</html>
 
 
b'\\ No newline at end of file'