Sencha Ext JS 5 is the first version of the Ext framework to fully support iOS tablets.
Perhaps the most important task that you’ll need to do in order add tablet support to your application is to automatically switch between desktop and touch-based themes (CSS files), depending on the type of device being used.
This tutorial demonstrates how to add this capability to your application.
Step 1: Create the App
- Open a command prompt to your Ext JS 5 folder
- Run the following command:
sencha generate app TestApp ../TestApp
Step 2: Define the Themes
- In your command prompt, change directories to the TestApp folder.
- Enter the following commands:
- sencha generate theme TestApp-Desktop
- sencha generate theme TestApp-Tablet
- Using your editor, open /TestApp/packages/TestApp-Desktop/package.json
- Modify the “extend” property to extend ext-theme-neptune.
- Save the file.
- Using your editor, open /TestApp/packages/TestApp-Tablet/package.json
- Change the “extend” property from ext-theme-classic to ext-theme-neptune-touch.
Step 3: Modify your App.json file to support multiple platform builds
- Using your editor, open /TestApp/app.json
- Add a “builds” property as illustrated here:
"builds": {
"testAppDesktop": {
"theme": "TestApp-Desktop"
},
"testAppTouch": {
"theme": "TestApp-Tablet"
}
}
Step 4: Modify your output definition to create multiple application manifests
Replace the output config property in your app.json with the following:
"output": {
"base": "${workspace.build.dir}/${build.environment}/${app.name}/${build.id}",
"page": "./index.html",
"manifest": "../${build.id}.json",
"deltas": {
"enable": false
},
"cache": {
"enable": false
}
}
Step 5: Refresh your App
Return to your command prompt and type the following:
sencha app refresh
This will generate two manifest files: testAppDesktop.json and testAppTouch.json
Step 6: Replace the CSS config in the App.json
Replace the css configuration property in your App.json with the following:
"css": [{
"path": "${build.out.css.dir}/TestApp-all.css",
"bootstrap": true
}]
Step 7: Replace the bootstrap property to load the appropriate manifest file
"bootstrap": {
"manifest": "${build.id}.json"
}
Step 8: Add the following code into a script tag in your index.html file, just above the microloader, to load the appropriate manifest:
var Ext = Ext || {};
Ext.beforeLoad = function(tags){
var theme = location.href.match(/theme=([\w-]+)/);
theme = (theme && theme[1]) || (tags.desktop ? 'testAppDesktop' : 'testAppTouch');
Ext.manifest = theme;
tags.test = /testMode=true/.test(location.search);
Ext.microloaderTags = tags;
};
Step 9: Build the Application
Return to your command prompt and type the following:
sencha app build development
Druck-I.T. 