Our competences at your disposal on our blog
We love our job and we are glad to share it with you! Keep yourself fully informed about news and technologies we use to develop and which you may need! Follow our blog.
×

Error message

The spam filter installed on this site is currently unavailable. Per site policy, we are unable to accept new submissions until that problem is resolved. Please try resubmitting the form in a couple of minutes.
enrico.gramellini's picture

Sencha Cmd is a cross-platform command line tool that provides many automated tasks around the full life-cycle of your applications from generating a new project to deploying an application to production.

In this post I’m going to analyze in detail some tools that allows the creation and theming of an application made with ExtJS 4.2.

Requisites

In order to use the tools provided by Sencha Cmd it is necessary to set up the system in which the application will be developed so that it presents the following requisites:

  • It should be installed Java JRE (preferably in the latest version);
  • The ExtJS 4.2. Library has to be located in its completeness into the local system;
  • Ruby needs to be set up in version
  • You have to set up Sencha Cmd 3.

Creating a new project

Having the local system perfectly configured you can go on with the creation of a new ExtJS 4.2. project.

After you opened a command line terminal, you have to place into the directory in which the workspace is located.

Thereafter, we execute the first Sencha Cmd command in order to create the workspace:

$ sencha -sdk [PATH]/ext-4.2.0 generate workspace my-workspace

This command needs to be completed specifying the path in which the ExtJS SDK has been saved on local and has the effect of creating a directory called, in this case, my-workspace. Inside this directory, the ExtJS SDK will be patterned and a new directory will be created so that it can contain possible Sencha’s packages (hereafter we will see an example of when the application theme will be generated).

At this point, defined the workspace, it is possible to create an ExtJS application that we call ThemeDemoApp and that it will be organized inside the theme-demo-app directory of the workspace just created:

$ sencha -sdk ext generate app ThemeDemoApp theme-demo-app

Moving now inside the directory concerning the application just created, it is possible to notice how an ExtJS application prototype has been generated: starting from this, it will be possible to develop the created application.

The further Sencha Cmd command useful to the life-cycle of your application concerns the deploy phase. This phase consists in producing, starting from the development version of the application, an optimized version containing only the essential in order to run the application on a production environment. The following command, performed into the application directory, launch this phase:

$ sencha app build

The build phase just showed, avails itself of an application configuration file which describes some of its features. Changing this file in order to make effective the changes produced (i.e. changing a theme), it is necessary to compile again the application so that you will regenerate the production version. As an essential step it is always a good practice to clean the application using this command:

$ sencha ant clean

The clean simply delete the directory content that was contained into the production version.

Theming

Even the generation of a customized theme for the application just created it is supported by Sencha Cmd.

Creating a theme means to create a package inside the workspace that can be used by the applications realized within it.

In order to create a customized theme it is necessary to run this command from the inside of the application directory:

$ sencha generate theme my-custom-theme

A theme can extend an already existing theme and, a just created theme is an exstension of the ExtJS default theme called ext-theme-classic.
To set up a different extension it is required to edit the file package.json placed inside the theme directory (in this case: packages/my-custom-theme/package.json) substituting the name, present as a value for the “extend” key, with the name of the desired theme.

To use the theme, it is necessary to compile it and position it inside its directory running the following command:

$ sencha package build

You should compile a theme everytime that you set in/modify one of its component and, in order to have at your disposal the compiled version even inside the application that uses it, you should compile even the latter (before running the clean).

The last step consists in setting the application so that it can use the customized theme that you have just created: to this aim, it is necessary to substitute, within the app configuration file (theme-demo-app/.sencha/app/sencha.cfg), the name theme inserting a new one.

app.theme=my-custom-theme

Even in this case, dealing with a change to a configuration file, it is required to compile the application using the habitual command Clean and Build.

Concerning the customization of the theme i heartily recommend you to read the guidebook that you will find in the ExtJS 4.2 documentation, following this
link.
Inside the guidebook there is a description that explains how to act in order to obtain the desired results.

Another interesting guidebook concerning the contents presented in this post, is available at this link and describes others Sencha Cmd commands useful for the development of an ExtJS application.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.