This topic explains the procedure for implementing user interface screens using the Ext JS 4.x Sencha library. Ext JS 4.x is bundled with the charting capability and other features that you need for your Junos Space application.
Add a reference to ext4setup.jsp in <your-app>-module.xml. Enable Ext JS 4.x in the sandbox mode to work with the Junos Space SDK Application as shown in the following example by the red highlighted text:
Note: Once the Ext JS 4.x is enabled, modify the entry point for workspaces and tasks in the application.
If you only want to use Ext JS 4.x with module.xml workspaces, use the following steps. The HelloWorld reference application has an example of the top-level (entry-point) js script.
Note: The code for the top-level .js file is located at web/js/workspaces/helloworldws/HelloWorldWS.js folder in the HelloWorldWeb project of HelloWorld.
Note: Ensure that the custom Ext JS 4.x UI js panel code has a constructor matching the signature of its call in the build() function of the entry-point workspace script. For more information, see Using the Ext Designer with Junos Space SDK.
The HelloWorld reference application has an example of the top-level (entry-point) js script.
Note: The code for the entry-point js file is located under the web/js/tasks/helloworldext4task/HelloWorldWS.js folder in the HelloWorldWeb project of HelloWorld.
Note: This file would have already been created for your task by the module.xml editor. You need to overwrite it with the HelloWorld version, as auto-generated works for the Ext JS 3.x tasks. Also the Ext JS 4.x feature is not directly supported by the SDK plug-in. Modifying the task's configuration using the module.xml editor's tree view, will result in the editor overwriting your changes to the entry-point js file. Therefore, it is recommended not to use the tree view once you modify the file, instead use the xml view.
We are providing "sandbox mode" support for the code written using Ext JS 4.x libraries. You must explicitly use the "Ext4." prefix, if you want to use the Ext JS 4.x components and functions.
Note: The Sencha Ext 1.2.2 Designer does not support the "sandbox mode" directly, and all code generated by the designer, must be ported to use the "sandbox mode" library. So all the references to Ext from the designer-generated code must be replaced with the "Ext4." prefix.
The code written to implement both the workspace and task charts in the HelloWorld application, uses "Ext4." prefix to call the Ext JS 4.x functions.
Note: The task panel (helloworldext4task.HelloWorldExt.js) and the workspace panel (helloworldext4ws.HelloWorldExt.js) do not contain any custom code for enabling either the task or the workspace functionality. You can use both the panels for the task and the workspace infrastructure.