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