Category: extjs

Aug 10

Ext.js – First Program

Ext.js – First Program ”; Previous Next This chapter lists down the steps to write the first Hello World program in Ext JS. Step 1 Create an index.htm page in the editor of our choice. Include the required library files in the head section of html page as follows. index.htm Live Demo <!DOCTYPE html> <html> <head> <link href = “https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css” rel = “stylesheet” /> <script type = “text/javascript” src = “https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js”></script> <script type = “text/javascript”> Ext.onReady(function() { Ext.create(”Ext.Panel”, { renderTo: ”helloWorldPanel”, height: 200, width: 600, title: ”Hello world”, html: ”First Ext JS Hello World Program” }); }); </script> </head> <body> <div id = “helloWorldPanel” /> </body> </html> Explanation Ext.onReady() method will be called once the Ext JS is ready to render the Ext JS elements. Ext.create() method is used to create an object in Ext JS. Here we are creating an object of simple panel class Ext.Panel. Ext.Panel is the predefined class in Ext JS for creating a panel. Every Ext JS class has different properties to perform some basic functionalities. Ext.Panel class has various properties such as − renderTo is the element where this panel has to render. ”helloWorldPanel” is the div id in Index.html file. Height and width properties are for customizing the size of the panel. Title property is to provide the title to the panel. Html property is the html content to be shown in the panel. Step 2 Open the index.htm file in a standard browser and you will get the following output on the browser. Print Page Previous Next Advertisements ”;

Aug 10

Ext.js – Custom Events and Listeners

Ext.js – Custom Events and listeners ”; Previous Next Events are something which get fired when something happens to the class. For example, when a button is getting clicked or before/after the element is rendered. Methods of Writing Events Built-in events using listeners Attaching events later Custom events Built-in Events Using Listeners Ext JS provides listener property for writing events and custom events in Ext JS files. Writing listener in Ext JS We will add the listener in the previous program itself by adding a listen property to the panel. Live Demo <!DOCTYPE html> <html> <head> <link href = “https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css” rel = “stylesheet” /> <script type = “text/javascript” src = “https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js”></script> <script type = “text/javascript”> Ext.onReady(function() { Ext.create(”Ext.Button”, { renderTo: Ext.getElementById(”helloWorldPanel”), text: ”My Button”, listeners: { click: function() { Ext.MessageBox.alert(”Alert box”, ”Button is clicked”); } } }); }); </script> </head> <body> <p> Please click the button to see event listener </p> <div id = ”helloWorldPanel” /> <!– panel will be rendered here– > </body> </html> The above program will produce the following result − This way we can also write multiple events in listeners property. Multiple Events in the Same Listener Live Demo <!DOCTYPE html> <html> <head> <link href = “https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css” rel = “stylesheet” /> <script type = “text/javascript” src = “https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js”></script> <script type = “text/javascript”> Ext.onReady(function() { Ext.get(”tag2”).hide() Ext.create(”Ext.Button”, { renderTo: Ext.getElementById(”helloWorldPanel”), text: ”My Button”, listeners: { click: function() { this.hide(); }, hide: function() { Ext.get(”tag1”).hide(); Ext.get(”tag2”).show(); } } }); }); </script> </head> <body> <div id = “tag1”>Please click the button to see event listener.</div> <div id = “tag2″>The button was clicked and now it is hidden.</div> <div id = ”helloWorldPanel” /> <!– panel will be rendered here– > </body> </html> Attaching an Event Later In the previous method of writing events, we have written events in listeners at the time of creating elements. The other way is to attach events. Live Demo <!DOCTYPE html> <html> <head> <link href = “https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css” rel = “stylesheet” /> <script type = “text/javascript” src = “https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js”></script> <script type = “text/javascript”> Ext.onReady(function() { var button = Ext.create(”Ext.Button”, { renderTo: Ext.getElementById(”helloWorldPanel”), text: ”My Button” }); // This way we can attach event to the button after the button is created. button.on(”click”, function() { Ext.MessageBox.alert(”Alert box”, ”Button is clicked”); }); }); </script> </head> <body> <p> Please click the button to see event listener </p> <div id = ”helloWorldPanel” /> <!– panel will be rendered here– > </body> </html> The above program will produce the following result − Custom Events We can write custom events in Ext JS and fire the events with fireEvent method. Following example explains how to write custom events. Live Demo <!DOCTYPE html> <html> <head> <link href = “https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css” rel = “stylesheet” /> <script type = “text/javascript” src = “https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js”></script> <script type = “text/javascript”> Ext.onReady(function() { var button = Ext.create(”Ext.Button”, { renderTo: Ext.getElementById(”helloWorldPanel”), text: ”My Button”, listeners: { myEvent: function(button) { Ext.MessageBox.alert(”Alert box”, ”My custom event is called”); } } }); Ext.defer(function() { button.fireEvent(”myEvent”); }, 5000); }); </script> </head> <body> <p> The event will be called after 5 seconds when the page is loaded. </p> <div id = ”helloWorldPanel” /> <!– panel will be rendered here– > </body> </html> Once the page is loaded and the document is ready, the UI page with a button will appear and as we are firing an event after 5 secs, the document is ready. The alert box will appear after 5 seconds. Here, we have written the custom event ”myEvent” and we are firing events as button.fireEvent(eventName); Print Page Previous Next Advertisements ”;

Aug 10

Ext.js – Naming Convention

Ext.js – Naming Convention ”; Previous Next Naming convention is a set of rule to be followed for identifiers. It makes the code more readable and understandable to other programmers as well. Naming convention in Ext JS follows the standard JavaScript convention, which is not mandatory but a good practice to follow. It should follow the camel case syntax for naming the class, method, variable and properties. If the name is combined with two words, the second word will start with an uppercase letter always. For example, doLayout(), StudentForm, firstName, etc. Name Convention Class Name It should start with an uppercase letter, followed by camel case. For example, StudentClass Method Name It should start with a lowercase letter, followed by camel case. For example, doLayout() Variable Name It should start with a lowercase letter, followed by camel case. For example, firstName Constant Name It should be in uppercase only. For example, COUNT, MAX_VALUE Property Name It should start with a lowercase letter, followed by camel case. For example, enableColumnResize = true Print Page Previous Next Advertisements ”;

Aug 10

Ext.js – Class System

Ext.js – Class System ”; Previous Next Ext JS is a JavaScript framework having functionalities of object oriented programming. Ext is the namespace, which encapsulates all the classes in Ext JS. Defining a Class in Ext JS Ext provides more than 300 classes, which we can use for various functionalities. Ext.define() is used for defining the classes in Ext JS. Syntax Ext.define(class name, class members/properties, callback function); Class name is the name of the class according to app structure. For example, appName.folderName.ClassName studentApp.view.StudentView. Class properties/members defines the behavior of class. Callback function is optional. It is called when the class has loaded properly. Example of Ext JS Class Definition Ext.define(studentApp.view.StudentDeatilsGrid, { extend : ”Ext.grid.GridPanel”, id : ”studentsDetailsGrid”, store : ”StudentsDetailsGridStore”, renderTo : ”studentsDetailsRenderDiv”, layout : ”fit”, columns : [{ text : ”Student Name”, dataIndex : ”studentName” },{ text : ”ID”, dataIndex : ”studentId” },{ text : ”Department”, dataIndex : ”department” }] }); Creating Objects As like other OOPS based languages, we can create objects in Ext JS as well. Following are the different ways of creating objects in Ext JS. Using new keyword var studentObject = new student(); studentObject.getStudentName(); Using Ext.create() Ext.create(”Ext.Panel”, { renderTo : ”helloWorldPanel”, height : 100, width : 100, title : ”Hello world”, html : ”First Ext JS Hello World Program” }); Inheritance in Ext JS Inheritance is the principle of using functionality defined in class A into class B. In Ext JS, inheritance can be done using two methods − Ext.extend Ext.define(studentApp.view.StudentDetailsGrid, { extend : ”Ext.grid.GridPanel”, … }); Here, our custom class StudentDetailsGrid is using the basic features of Ext JS class GridPanel. Using Mixins Mixins is a different way of using class A in class B without extend. mixins : { commons : ”DepartmentApp.utils.DepartmentUtils” }, Mixins are added in the controller where we declare all the other classes such as store, view, etc. In this way, we can call DepartmentUtils class and use its functions in the controller or in this application. Print Page Previous Next Advertisements ”;

Aug 10

Ext.js – Drag & Drop

Ext.js – Drag and Drop ”; Previous Next Drag and drop feature is one of the powerful features added to make the developer’s task easy. A drag operation, essentially, is a click gesture on some UI element, while the mouse button is held down and the mouse is moved. A drop operation occurs when the mouse button is released after a drag operation. Syntax Adding drag and drop class to the draggable targets. var dd = Ext.create(”Ext.dd.DD”, el, ”imagesDDGroup”, { isTarget: false }); Adding drag and drop target class to drappable target. var mainTarget = Ext.create(”Ext.dd.DDTarget”, ”mainRoom”, ”imagesDDGroup”, { ignoreSelf: false }); Example Following is a simple example. Live Demo <!DOCTYPE html> <html> <head> <link href = “https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css” rel = “stylesheet” /> <script type = “text/javascript” src = “https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js”></script> <script type = “text/javascript”> Ext.application ({ launch: function() { var images = Ext.get(”images”).select(”img”); Ext.each(images.elements, function(el) { var dd = Ext.create(”Ext.dd.DD”, el, ”imagesDDGroup”, { isTarget: false }); }); } }); var mainTarget = Ext.create(”Ext.dd.DDTarget”, ”mainRoom”, ”imagesDDGroup”, { ignoreSelf: false }); </script> <style> #content { width:600px; height:400px; padding:10px; border:1px solid #000; } #images { float:left; width:40%; height:100%; border:1px solid Black; background-color:rgba(222, 222, 222, 1.0); } #mainRoom { float:left; width:55%; height:100%; margin-left:15px; border:1px solid Black; background-color:rgba(222, 222, 222, 1.0); } .image { width:64px; height:64px; margin:10px; cursor:pointer; border:1px solid Black; display: inline-block; } </style> </head> <body> <div id = “content”> <div id = “images”> <img src = “/extjs/images/1.jpg” class = “image” /> <img src = “/extjs/images/2.jpg” class = “image” /> <img src = “/extjs/images/3.jpg” class = “image” /> <img src = “/extjs/images/4.jpg” class = “image” /> <img src = “/extjs/images/5.jpg” class = “image” /> <img src = “/extjs/images/6.jpg” class = “image” /> <img src = “/extjs/images/7.jpg” class = “image” /> <img src = “/extjs/images/8.jpg” class = “image” /> </div> <div id = “mainRoom”></div> </div> </body> </html> The above program will produce the following result − With the help of drag and drop in Extjs, we can move data from grid to grid and grid to form. Following are the examples of moving data between grids and forms. Drag and drop – Grid to Grid drag and drop – Grid to Form Print Page Previous Next Advertisements ”;