ExtJS 5+ compatibility

app/AppInspector/about.html

@@ -1,6 +1,7 @@
-<img src="resources/images/banner-440x280.png" alt="Sencha App Inspector" />
+<!--<img src="resources/images/banner-440x280.png" alt="Sencha App Inspector" />-->
 
 <p class="description">
+    <b>Original project:</b><br>
     View the project on <a href="https://github.com/senchalabs/AppInspector" target="_blank">Sencha Labs</a> -
     it was originally developed by <a href="http://www.sencha.com/services/">Sencha Professional Services</a>
     and is 100% open source!
@@ -16,4 +17,5 @@
     <li><a href="http://bruno.tavares.me" target="_blank">Bruno Tavares</a></li>
     <li><a href="http://kawanoshinobu.com" target="_blank">KAWANO Shinobu</a></li>
     <li><a href="http://mitchellsimoens.com" target="_blank">Mitchell Simoens</a></li>
+    <li><a href="http://jorgeblom.com" target="_blank">Jorge Blom-Dahl</a></li>
 </ul>

app/AppInspector/app/controller/Components.js

@@ -34,7 +34,7 @@ Ext.define('AI.controller.Components', {
         'ComponentsTreeGrid'
     ],
 
-    init: function(application) {
+    init: function (application) {
         var me = this;
 
         me.control({
@@ -48,7 +48,8 @@ Ext.define('AI.controller.Components', {
                 'applyfilter': me.onFilterComponentTree
             },
             'componentstreegrid#ComponentTree': {
-                'itemclick': me.onSelectComponent
+                'itemclick': me.onSelectComponent,
+                'itemdblclick': me.onDblClickComponent,
             },
             // properties
             'gridpanel#ComponentProps': {
@@ -68,7 +69,22 @@ Ext.define('AI.controller.Components', {
         });
     },
 
-    onActivate: function(panel) {
+    onDblClickComponent: function (tree, record, item, index, e, eOpts) {
+        // Objetivo llevar este componente a la consola
+        AI.util.InspectedWindow.eval(
+            AI.util.InspectedWindow.highlight,
+            record.get('cmpId'),
+            Ext.emptyFn
+        );
+
+        AI.util.InspectedWindow.eval(
+            AI.util.InspectedWindow.setComponentAsGlobalVar,
+            record.get('cmpId'),
+            Ext.emptyFn
+        );
+    },
+
+    onActivate: function (panel) {
         // load the "Components" upfront ...
         var initialLoad = panel.initialLoad,
             tree = panel.down('#ComponentTree');
@@ -81,7 +97,7 @@ Ext.define('AI.controller.Components', {
         }
     },
 
-    onComponentTreeActivate: function(tree) {
+    onComponentTreeActivate: function (tree) {
         var nodes = [],
             root = tree.getRootNode();
 
@@ -107,15 +123,15 @@ Ext.define('AI.controller.Components', {
         );
     },
 
-    onRefreshComponentsClick: function(btn) {
+    onRefreshComponentsClick: function (btn) {
         var tree = btn.up('#ComponentTree'),
             filter = tree.down('#FilterComponentsTree');
 
         filter.reset();
         this.onComponentTreeActivate(tree);
     },
 
-    onFilterComponentTree: function(field, value) {
+    onFilterComponentTree: function (field, value) {
         var tree = field.up('#ComponentTree');
 
         if (value === '') {
@@ -125,7 +141,7 @@ Ext.define('AI.controller.Components', {
         }
     },
 
-    onSelectComponent: function(tree, record, item, index, e, eOpts) {
+    onSelectComponent: function (tree, record, item, index, e, eOpts) {
         var parent = tree.up('components'),
             propsGrid = parent.down('#ComponentProps'),
             propsGridStore = propsGrid.getStore(),
@@ -141,7 +157,7 @@ Ext.define('AI.controller.Components', {
         AI.util.InspectedWindow.eval(
             AI.util.Component.getInspectedComponent,
             record.get('cmpId'),
-            function(result, isException) {
+            function (result, isException) {
                 if (result) {
                     propsGridStore.loadData(result.properties);
                     methodGridStore.loadData(result.methods);
@@ -153,23 +169,23 @@ Ext.define('AI.controller.Components', {
         );
     },
 
-    toggleComponentsDetailsTips: function(grid) {
+    toggleComponentsDetailsTips: function (grid) {
         var tips = grid.up('#ComponentInspector').down('toolbar[dock=bottom]'),
             isProps = grid.itemId === 'ComponentProps',
             props = tips.query('[tipGroup=props]'),
             methods = tips.query('[tipGroup=methods]'),
             i;
 
-        for(i = 0; i < props.length; i++) {
+        for (i = 0; i < props.length; i++) {
             props[i].setVisible(isProps);
         }
 
-        for(i = 0; i < methods.length; i++) {
+        for (i = 0; i < methods.length; i++) {
             methods[i].setVisible(!isProps);
         }
     },
 
-    onFilterComponentDetails: function(field, value) {
+    onFilterComponentDetails: function (field, value) {
         var grid = field.up('gridpanel'),
             store = grid.getStore();
 
@@ -185,7 +201,7 @@ Ext.define('AI.controller.Components', {
         }
     },
 
-    onDetailValueEdit: function() {
+    onDetailValueEdit: function () {
         // cancel edit to reset original value
         return false;
     }

app/AppInspector/app/controller/MVC.js

@@ -42,7 +42,9 @@ Ext.define('AI.controller.MVC', {
                 activate: this.onActivate
             },
             'mvc treepanel': {
-                select: this.onMVCSelect
+                select: this.onMVCSelect,
+                'itemdblclick' : this.onDblClickComponent
+
             },
             'mvc_records gridpanel': {
                 itemclick: this.onRecordGridSelection
@@ -73,6 +75,16 @@ Ext.define('AI.controller.MVC', {
         );
     },
 
+
+    onDblClickComponent : function( tree, record, item, index, e, eOpts ) {
+        debugger;
+        AI.util.InspectedWindow.eval(
+            AI.util.InspectedWindow.setComponentAsGlobalVar,
+            record.get('id'),
+            Ext.emptyFn
+        );
+    },
+
     onMVCSelect: function(rowmodel, record) {
         var type = record.get('type');
 

app/AppInspector/app/controller/Main.js

@@ -73,7 +73,8 @@ Ext.define('AI.controller.Main', {
 
                         tabpanel.down('#AppDetails').setSource(source);
                         tabpanel.child('mvc').setDisabled(!data.isMVC);
-                        tabpanel.down('#LayoutRuns').setDisabled(app.info.framework === 'touch');
+                        //tabpanel.down('#LayoutRuns').setDisabled(app.info.framework === 'touch');
+                        //tabpanel.down('#LayoutRuns').setDisabled(true);
 
                         main.setLoading(false);
                     }

app/AppInspector/app/util/InspectedWindow.js

@@ -62,6 +62,20 @@ Ext.define('AI.util.InspectedWindow', {
         }
     },
 
+    setComponentAsGlobalVar : function(cmpId) {
+        var cmp = Ext.getCmp(cmpId);
+        var globalVarName =  'x0';
+        window[globalVarName + ''] = cmp;
+        window.console.log('Component stored in window.' + globalVarName);
+    },
+
+
+    setVariableAsGlobalVar : function(value) {
+        var globalVarName =  'x0';
+        window[globalVarName + ''] = value;
+        window.console.log('Variable ' + value +  'stored in window.' + globalVarName);
+    },
+
     /**
      * @param {Function} closure
      * @param {String/Array} argString
@@ -211,4 +225,6 @@ Ext.define('AI.util.InspectedWindow', {
 
         return data;
     }
+
+
 });

app/AppInspector/app/util/extjs/MVC.js

@@ -127,7 +127,12 @@ Ext.define('AI.util.extjs.MVC', {
 
             if (Ext.isString(store)) {
                 getter = Ext.app.Controller.getGetterName(store, 'Store');
-                store  = instance[getter]();
+                //FIXME This fails in ExtJs 6
+                try {
+                    store = instance[getter]();
+                } catch(e) {
+                    store = instance.getStore(store);
+                }
             }
 
             stores.push({

app/AppInspector/app/view/ComponentsTreeGrid.js

@@ -50,6 +50,10 @@ Ext.define('AI.view.ComponentsTreeGrid', {
                             iconCls: 'icn-refresh',
                             text: 'Refresh'
                         },
+                        {
+                            xtype: 'label',
+                            text: '(Dbl Click to eval)'
+                        },
                         {
                             xtype: 'tbfill'
                         },

app/AppInspector/app/view/MainView.js

@@ -44,15 +44,18 @@ Ext.define('AI.view.MainView', {
                         {
                             xtype: 'about'
                         },
+                        // {
+                        //     xtype: 'query'
+                        // },
                         {
                             xtype: 'components'
                         },
                         {
                             xtype: 'stores'
                         },
-                        {
-                            xtype: 'layouts'
-                        },
+                        // {
+                        //      xtype: 'layouts'
+                        // },
                         {
                             xtype: 'eventgrid'
                         },

app/AppInspector/index.html

@@ -7,14 +7,17 @@
     <!-- <x-compile> -->
         <!-- <x-bootstrap> -->
             <link rel="stylesheet" href="bootstrap.css">
-            <script src="ext/ext-dev.js"></script>
-            <script src="bootstrap.js"></script>
+            <link rel="stylesheet" href="override.css">
+            <script src="ext/ext-all.js"></script>
+            <!--<script src="bootstrap.js"></script> -->
         <!-- </x-bootstrap> -->
         <script src="ext/ext-theme-neptune.js"></script>
         <script src="mocks.js"></script>
         <script type="text/javascript" src="app.js"></script>
     <!-- </x-compile> -->
 </head>
 <body>
+    <h2>Loading...</h2>
+    <p>Please wait</p>
 </body>
 </html>

app/AppInspector/override.css

@@ -0,0 +1,3 @@
+html, body {
+    font-size: 14px;
+}

app/devtools-page.html

@@ -5,6 +5,7 @@
     <title>App Inspector for Sencha</title>
     <script type="text/javascript" src="devtools/panel.js"></script>
     <script type="text/javascript" src="devtools/elements.js"></script>
+    <script type="text/javascript" src="devtools/ext-utils.user.js"></script>
 </head>
 
 <body>

app/devtools/elements.js

@@ -3,19 +3,31 @@
 /**
  * Elements Side Panel
  */
+
 var elementsPanel = chrome.devtools.panels.elements,
 
     pageDetectSenchaComponent = function pageDetectSenchaComponent() {
         var cmp, data, xtype,
             selectedEl = $0, //https://developers.google.com/chrome-developer-tools/docs/commandline-api#0_-_4
             ref = '';
 
-        if (window.Ext) {
-            cmp = Ext.getCmp(selectedEl.id);
 
+        var getComponentOrParent = function(domEl, classPrefix) {
+            var cmp = cmp = Ext.getCmp(domEl.id);
+            ///
+            if (cmp && (!classPrefix || Ext.getClassName(cmp).indexOf(classPrefix) > -1 )) {
+                return cmp;
+            } else if (domEl && domEl.parentNode && domEl.parentNode != document.body){
+                return getComponentOrParent(domEl.parentNode, classPrefix);
+            }
+            //
+        };
+
+        var getData = function(cmp) {
+            var data;
             if (cmp) {
                 data = Object.create(null); //which sets __proto__ to undefined
-
+                
                 // class name
                 if (Ext.getClassName) {
                     ref = Ext.getClassName(cmp);
@@ -34,13 +46,51 @@ var elementsPanel = chrome.devtools.panels.elements,
 
                 data[ref] = cmp;
             }
+            return data;
+        }
+
+        data = Object.create(null); //which sets __proto__ to undefined
+
+
+
+        if (window.Ext) {
+            cmp = getComponentOrParent(selectedEl);           
+
+
+
+            var names = [];
+            try {
+                names = Ext.ClassManager.names.reduce((a,b) => (a.indexOf(b)==-1) ? a + ","+ b : a).split(',') ;
+            } catch(e) {
+                names = Object.keys(Ext.ClassManager.classes)
+                    .filter((k) => k.indexOf("Ext") == -1)
+                    .map((k) => k.substr(0, k.indexOf(".")))
+                    .reduce((a,b) => (a.indexOf(b) == -1) ? (a + "," + b) :  a)
+                    .split(",").filter(v => v.length > 0);
+            }    
+
+            var addedPrefixes = 0;
+            names.forEach(function(name) {
+                var prefixedCmp = getComponentOrParent(selectedEl, name);
+                if (prefixedCmp && prefixedCmp != cmp) {
+                    data[name] = getData(prefixedCmp);
+                    addedPrefixes++;
+                }
+            });
+
+            if (addedPrefixes === 0) {
+                data = getData(cmp);
+            } else {
+                data['$0'] = getData(cmp);
+            }
 
+
         }
 
         return data;
     };
 
-elementsPanel.createSidebarPane('Sencha Component', function (sidebar) {
+elementsPanel.createSidebarPane('Sencha/ExtJS', function (sidebar) {
     var onSelectionChanged = function () {
         sidebar.setExpression('(' + pageDetectSenchaComponent.toString() + ')()');
     };