Create First Ext JS Application:

In this section, we will create first Ext JS 6 application using Sencha Cmd.

As you learned in the previous section that Sencha Cmd can be used to generate an Ext JS application skeleton to get started on it quickly.

Let's generate Ext JS 6 application in Windows platform using Sencha Cmd. Make sure that you have installed Sencha Cmd and downloaded GPL Ext JS SDK.

Open Windows command prompt in admin mode as shown below.

first extjs application

Now, navigate to the path where you want to generate an application.

first extjs application

Now, write following generate command and press Enter.

    sencha -sdk /path/to/extjs/framework generate app AppName path/to/app
first extjs application

As you can see in the above figure, path of the Ext JS 6 sdk is "D:\ExtJS\ExtJS-SDK\ext-6.0.1". The application name would be "MyExtJSApp" and the path where an application will be generated is "C:\ExtJS\MyExtJSApp". It will take some time in executing the above command.

first extjs application

After successful execution, it will generate following folders and files.

first extjs application

Thus, we have created our Ext JS application's skeleton.

Run Ext JS Web Application:

Now, to run our sample Ext JS application, we need to setup a web server. Sencha Cmd includes light weight local web server. So we can run it using Sencha Cmd.

Open command prompt in windows and navigate to the directory where you have your Ext JS application as shown below.

first extjs application

Now, enter Sencha web –port xxxx start command as shown below. Use any unused port number.

first extjs application

Now, open browser (preferably Google Chrome) and enter the URL https://localhost:8008. This will display first default Ext JS 6 application as shown below.

first extjs application

Setup Web Server:

You can also use your local web server instead of Sencha Cmd. Here, we will setup IIS on windows platform.

First, open IIS manager by searching for "inetmgr" and click on it. IIS Manager will look like below.

first extjs application

Now, we need to add web site for our Ext JS app. So, right click on Sites and click Add Web Site.. This will open Add Web Site popup as shown below.

first extjs application

In the Add Web Site popup, enter Site name, and select physical path where you have generated Ext JS application. Also, enter any unused port number and click OK. This will add new website as shown below.

first extjs application

Now, open browser (preferably Google Chrome) and enter the URL http://localhost:8007. This will display first default Ext JS 6 application as shown below.

first extjs application

Thus, you can create and run your first default Ext JS 6 application.

Let's understand Ext JS folder structure in the next section.