With the release of Ext JS 5; we finally have Touch experience in the framework. So yes, you can start creating tablet applications. Maybe you are now wondering, can I also package Ext JS 5 apps with Apache Cordova or Adobe Phonegap, so I can sell my app in the App Stores? Well yes, you can! Here are the steps I took; for porting my app with Cordova/Phonegap.
note, instead of using the keyword
Cordova users may use the keyword
note2: you will need to have the following dependencies
installed: (Sencha Cmd, Node JS and Phonegap or Cordova)
There we go:
- Let’s generate a new Ext JS 5 app
Browse with your terminal to your Ext JS 5 SDK folder. Run the following command:
sencha generate app MyApp ../phonegapdemoHere we generate an Ext JS 5 demo app, in the phonegapdemo folder, which stands next to the downloaded extjs5 sdk folder.
- Open app.json
Add the following code block:
Here I’m adding a custom phonegap build for iOS. I used as a build
name the keyword
ios, a name i choose to recognize iOS
builds, but incase you want to make for example Android builds, I
could change it for
android. In case of an Android I
would also need to change the
platform keyword. Note
id property, which expects an id in reversed
domain style; and
name which should be the name of the
Sencha App namespace. In case I want to build via the Phonegap
cloud web service; I should set the property
true. Then, you will also need to create a
file in the phonegapdemo folder; with the login details
Create a native build
Back to your terminal, navigate to the phonegapdemo folder, and run the following command:
sencha app build ios
Note the keyword
ios, that’s the build name which was set in app.json! Mac OSX users, might need to prefix with the word
sudo. In case you are using Phonegap cloud webservice, it will now upload your app. In case of Phonegap local or Cordova, this command will now generate the following folderstructure like below. Instead of the command
sencha app build, I could also use the command
sencha app prepare; it would prepare the folderstructure as well.
The www folder, will be the place, where a copy of your Sencha Ext JS 5 app will be located. The plugin folder will contain Device API plugins after installing those. (see the steps below, woot!)
Enable the JS Phonegap/Cordova API
Although you could build and run your application on a device by now; it might be handy when you enable the Phonegap/Cordova device API. For example, in case you need to install plugins, such as the inappbrowser plugin. Open in an editor phonegapdemo/index.html and add the following line, before the micoloader bootstrap.js script:
You might wonder, why I won’t add this cordova.js file to the
Let’s build it (again)!
sencha app build ios
In case you are building with the PhoneGap cloud webservice, you can start scanning the QR code. Cordova or PhoneGap local users, can start opening the project file from the phonegapdemo/phonegap/platforms/
folder, and build it via the developer toolkit.
Wait, let’s add another step, as a BONUS! What about installing the inAppBrowser plugin, to make sure PhoneGap/Cordova will open your external hyperlinks in browser window within your app! (That’s it’s what you want iOS user! Cause iOS ignores opening new browser windows. grrrumbll!!!!) These steps are for PhoneGap Local / Cordova users:
You can find it here: phonegapdemo/phonegap/config.xml Now add the following line, (if not already available):
Install the plugin:
Run from the command-line the following command, from the phonegapdemo/phonegap folder:
phonegap plugin add org.apache.cordova.inappbrowser
Again, Mac OSX users, you will need to have admin rights, so prefix with
sudo. This command will add the plugin into the phonegapdemo/phonegap/plugins/ folder.
How to open URLs
Edit the demo app, and create a button, which will open an external URL in a separate browser. For example: phonegapdemo/app/view/main/Main.js
text: 'Open Web Page',
And note here, the magic:
window.open(). See below,
the implementation in my viewcontroller: phonegapdemo/app/view/main/MainController.js
BAMMM!!! Build and Test your inAppBrowser, it should work!