{"id":181,"date":"2014-09-27T10:07:19","date_gmt":"2014-09-27T15:07:19","guid":{"rendered":"http:\/\/devroar.com\/?p=181"},"modified":"2014-09-30T15:47:08","modified_gmt":"2014-09-30T20:47:08","slug":"extjs-5-0-app-getcontroller-fixes","status":"publish","type":"post","link":"http:\/\/devroar.com\/index.php\/2014\/09\/27\/extjs-5-0-app-getcontroller-fixes\/","title":{"rendered":"ExtJS 5.0 – app.getController() fixes"},"content":{"rendered":"

\"Sencha\"<\/a>
\nRight out of the box I’ve noticed that the getController() method on the Ext.app.Application object instances does not function correctly when accessing it from the global app property configuration. I am not sure if this is a bug Sencha has overlooked in the open source version of ExtJS 5 or not, but with a few simple changes you can suppress the errors and continue on your merry way.<\/p>\n

<\/p>\n

Background Information<\/h2>\n

Before I begin I want to give a little background info about how these errors seem to come to light in my development. ExtJS has a application property called “appProperty”. When you set this property it enables you to access the app object globally from anywhere in your code like…<\/p>\n

appName.app<\/code><\/p>\n

The application object has a method called “getController” that you can use to get a reference to any controller in your application. It’s kind of the lazy man’s way of grabbing a reference in a complex app when you don’t want to or don’t have the time available to properly trace scope. It greatly helps for debugging scope issues and eliminating that as a factor. See ExtJS documentation<\/a> for more information about the application object.<\/p>\n

The problem is, right out of the box this functionality is broken for me. Luckily with just a few changes you can get it back in working order. To do this you will need to modify the code in \/ext folder within your application (one level up from the \/app folder). But in order to have it load this code you have to double check one thing in the “app.json” file first.<\/p>\n

Inside your app.json file you need to look for the “js” block. If it looks like the below example then you need to modify it.
\n\"js\": [
\n {
\n \"path\": \"${ext.dir}\/build\/ext-all-rtl-debug.js\"
\n },
\n {
\n \"path\": \"app.js\",
\n \"bundle\": true
\n }
\n],
\n<\/code><\/p>\n

Change your block to match below:
\n\"js\": [
\n {
\n \"path\": \"app.js\",
\n \"bundle\": true
\n }
\n],<\/code><\/p>\n

Now go find the following file in your \/ext folder.
\n\/ext\/src\/app\/Application.js<\/code><\/p>\n

You want to search for the method “getController”, this is where our changes are.<\/p>\n

The first errors that I come across when trying to use getController() is
\nTypeError: controller.doInit is not a function<\/code><\/p>\n

This will bring you to line 525 of Application.js
\nif (me._initialized) {<\/code><\/p>\n

Change it to the following to suppress the error
\nif (me._initialized && typeof controller.doInit != \"undefined\") {<\/code><\/p>\n

Now if you try to use getController() you’ll see a new error.
\nTypeError: c.getModuleClassName is not a function<\/code><\/p>\n

To fix this one we need to look at line 507 of Application.js
\nclassName = c.getModuleClassName();<\/code><\/p>\n

Modify this line to match
\nclassName = c.moduleClassName;<\/code><\/p>\n

Now getController() should start behaving as it should! I’m not sure if this is just a bug in ExtJS they haven’t fixed or if I’m maybe using it wrong? but I somehow doubt that because i’m simply making a method call to the function with a valid controller path. Anyways. I hope this was of help to somebody else and possibly saved them some time and headaches.<\/p>\n","protected":false},"excerpt":{"rendered":"

Download article as PDF Right out of the box I’ve noticed that the getController() method on the Ext.app.Application object instances does not function correctly when accessing it from the global app property configuration. I am not sure if this is…<\/span><\/p>\n

Read more ›<\/a><\/div>\n

<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[53],"tags":[94,95,101,103,102,105,56,57,58,104,98,99,96,97,100,54],"_links":{"self":[{"href":"http:\/\/devroar.com\/index.php\/wp-json\/wp\/v2\/posts\/181"}],"collection":[{"href":"http:\/\/devroar.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/devroar.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/devroar.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/devroar.com\/index.php\/wp-json\/wp\/v2\/comments?post=181"}],"version-history":[{"count":9,"href":"http:\/\/devroar.com\/index.php\/wp-json\/wp\/v2\/posts\/181\/revisions"}],"predecessor-version":[{"id":201,"href":"http:\/\/devroar.com\/index.php\/wp-json\/wp\/v2\/posts\/181\/revisions\/201"}],"wp:attachment":[{"href":"http:\/\/devroar.com\/index.php\/wp-json\/wp\/v2\/media?parent=181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/devroar.com\/index.php\/wp-json\/wp\/v2\/categories?post=181"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/devroar.com\/index.php\/wp-json\/wp\/v2\/tags?post=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}