Create Application Using Ext Js
Total Page：16
File Type：pdf, Size：1020Kb
Create Application using Ext Js By Dattu Dave Create Application using Ext Js | 1 1. Getting All Required Resources So these are the things we will develop, Now Let's start creating an application but before that you should have following things to develop application in EXT- JS I.Sencha Command - http://www.sencha.com/products/sencha-cmd/download II.Java Sdk - http://www.oracle.com/technetwork/java/javase/downloads/index.html (it is require to run sencha cmd properly) III. A web server - Xampp (http://www.apachefriends.org/en/xampp.html) we will use PHP as server side code we use database from xampp IV. EXT JS : http://www.sencha.com/products/extjs/ (download Ext JS 4.x) If you have all the above things in your pc, you can now start developing an application First Extract the EXT JS zip file you have downloaded from above url, we are here using Ext Js 4 for developing our application so, if you have any older version please download Ext Js 4.x version from http://www.sencha.com/products/extjs/ After downloading zip file extract the zip file into your servers root folder in our case we are using xampp so extract inside htdocs folder and rename it to extjs. 2. Creating an Application structure using Sencha Cmd The next step is to use the Sencha Cmd to create the application structure (MVC) for us. To do so, we need to open the terminal application that comes with the operating system we use. For Linux and Mac OS users, it is the terminal application, and for Windows users, the command prompt application. Now we need to change the current directory location in terminal or command prompt to Ext JS directory (htdocs/extjs directory in this case), and then we will use the following command: sencha generate app MyApp ../result as shown in following screenshot: Sencha generate command is use to create an directory structure of Ext Js for that you must require a directory of Ext Js that’s why we change our current location in terminal to Ext Js The directory structure of Ext Js follows MVC architecture, MyApp is the name of the namespace of our application, meaning that every class we create is going to start with MyApp, as for example: MyApp.model.Student, MyApp.view.Result, and so on. And the last argument passed to the command is the directory where the application will be created. In this case it is inside a folder named result, which is located inside the htdocsfolder. Create Application using Ext Js | 2 So when we execute this command we get following output: 3. Creating the loading page Let's start with the hands-on now! First, we need to edit the result/app.js file. This is how the file looks like: Ext.application({ name: 'MyApp', views: [ 'Main', 'Viewport' ], controllers: [ 'Main' ], autoCreateViewport: true }); Create Application using Ext Js | 3 We are going to change it so that it looks like the following(result/app.js): Ext.application({ name: 'MyApp', launch: function() { console.log('launch'); } }); On first line of the previous code we have the Ext.application declaration. This means that our application will have a single page and the parent container of the app will be the Viewport. The Viewport is a specialized container representing the viewable application area that is rendered inside the body tag of the HTML page (<body></body>). It also manages the application's size inside the browser and manages the window resizing. Inside Ext.application we can also declare models, views, stores, and controllers used by the application. We will add this information to this file as we create new classes for our project. We need to declare the name of the application “MyAPP” which will be the namespace. We can also create a launch function inside Ext.application. This function will be called after all the application's controllers are initialized and this means that the application is completely loaded. So this function is a good place to instantiate our main view. For now, we will only add console.log, which just prints on the browser's JavaScript interpreter console to verify if the application was loaded successfully. To execute this application on the browser, we can access http://localhost/result, and we will get the following output in console press(CTRL + SHIFT + I ) in chrome or (CTRL+SHIFT + K) in firefox: When working with large Ext JS applications, it is normal to have a small delay when loading the application. This happens because Ext JS is loading all the required classes to have the Create Application using Ext Js | 4 application up and running and meanwhile, all the users see is a blank screen, which can be annoying for them. A very common solution to this problem is to have a loading page, also known as a splash screen. So let's add a splash screen to our application that looks like the following: First we need to understand how this splash screen will work. At the moment the user loads the application and the loading screen will be displayed. The application will show the splash screen while it loads all the required classes and code so the application can be used. We already know that the application calls the launch function when it is ready to be used. So we know that we will need to remove the splash screen from the launch method. The question now is where inside Ext.application can we call the splash screen? The answer is inside the init function. The init function is called when the application boots so it gives some time for all required code to be loaded and after that the launch function is called. Now that we know how the splash screen will work, let's implement it. Inside Ext.application, we will implement a function called init: result/app.js Ext.application({ name: 'MyApp', Create Application using Ext Js | 5 init: function() { splashscreen = Ext.getBody().mask('Loading Please Wait', 'splashscreen'); }, launch: function() { console.log('launch'); } }); All we need to do is apply a mask into the HTML body of the application (Ext.getBody()), and that is why we are calling the mask method passing the loading message ("Loading Please Wait") and applying a CSS, which will be loading gif and is already part of the Ext JS CSS ("splashscreen"). The mask method will return Ext.dom.Element, which we will need to manipulate later (remove the mask from the HTML body) and for this reason, we need to keep a reference to Ext.dom.Element and we will store this reference inside an attribute of Ext.application: result/app.js Ext.application({ name: 'MyApp', splashscreen: {}, init : function() { … … }, .. … }); With the code of the init method only, we will have a loading screen as the following: Create Application using Ext Js | 6 If this is all you need that is ok. But let's go a little bit further and customize the loading screen adding a logo image so it can look like the first image of this topic, which is our final output. First, we need to create a CSS file which will contain all the CSS for our application. First create css folder inside result/resources/ and then create css file We will name it as app.css and put it inside a result/resources/css/ folder: Inside resources we will also create an images folder with the Attuneuniversity logo image. We also must not forget to add the new CSS file into result/index.html: <link rel="stylesheet" href="resources/css/app.css"> Now add following things to result/resources/css/app.css file we just created .x-mask.splashscreen { background-color: #efefef; opacity: 1; } .x-mask-msg.splashscreen, .x-mask-msg.splashscreen div { font-size: 16px; font-weight: bold; padding-top : 17px; padding-right : 40px; border: none; background-color: transparent; background-position: top center; } .x-message-box .x-window-body .x-box-inner { min-height: 93px !important; } .x-splash-icon { background-image: url('../images/logo.png') !important; background-repeat : no-repeat; margin-top: -30px; margin-bottom: 15px; height: 100px; width : 200px; } We will be adding a new CSS style to the loading DIV tag. Note that the following styles from our app.css file will be applied: .x-mask.splashscreen and .x-mask-msg.splashscreendiv. This Create Application using Ext Js | 7 will going to change the font of the "Loading Please Wait" message. Now we will add the following code in the init function inside result/app.js: init: function() { splashscreen = Ext.getBody().mask('Loading Please Wait' , 'splashscreen'); splashscreen.addCls('splashscreen'); Ext.DomHelper.insertFirst(Ext.query('.x-mask-msg')[0], { cls: 'x-splash-icon' }); }, After we execute the previous code, we will have an output exactly as the image we showed at the beginning of this topic. Now we already have the splash screen being displayed. We need to work on the launch function to remove the splash screen after all the code the application needs is loaded, otherwise the loading message will be there indefinitely! To remove the splash screen the only code we need to add to the launch function is the following one, which is removing the mask from the HTML body: result/app.js Ext.getBody().unmask(); However, removing the mask abruptly is not nice because the user cannot even see the loading message. Instead of only removing the mask, let's give the user 2 seconds to see the loading message after the application is ready: result/app.js var task = new Ext.util.DelayedTask(function() { Ext.getBody().unmask(); }); task.delay(2000); To do so, we are going to use the DelayedTask class, which is a class that provides a chance of a function to be executed after the given timeout in milliseconds.