Junos Space SDK > Developer Guides > Junos Space Application Developer Guide > Programming with the Junos Space SDK > Developing Junos Space Applications > Creating the UI

Using Ext JS 4.x with the Junos Space SDK

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.

The Junos Space SDK is packaged with Ext JS 3.x to support all JavaScript components. To upgrade to the Ext JS 4.x version, a "sandbox" is provided that enables the Ext JS 3.x and Ext JS 4.x components in a single screen.

Installing Ext JS 4.x

  1. Copy the HelloWorldWeb/web/ext4-sandbox folder from the HelloWorld application into your application.

  2. 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.

Enabling entry point js files for workspaces

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.

  1. Click the workspace button to call custom Ext 4.x code. The Ext JS 4.x workspace of HelloWorld is displayed.



  2. Copy the file (HelloWorldWS.js) and its corresponding folder structure into your workspace.
  3. 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.

  4. Modify the text in RED to the corresponding values in your application's workspace.


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.

Enabling entry-point js files for tasks

The HelloWorld reference application has an example of the top-level (entry-point) js script.

  1. Click the task button to call custom Ext 4.x panel code, as displayed below.


  2. Copy this file and its corresponding folder structure into your task and modify all references to HelloWorld to the corresponding values of your application's workspace.
  3. 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.

Writing Ext JS 4.x panel code

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.