Showing posts with label Ext.js Tutorial. Show all posts
Showing posts with label Ext.js Tutorial. Show all posts
Friday, February 17, 2017
Ext.js - Environment Setup
Try it Option Online
We have set up ExtJS Programming environment online, so that you can compile and execute all the available examples online. It gives you confidence in what you are reading and enables you to verify the programs with different options. Feel free to modify any example and execute it online.
Ext.js - Naming Convention
Naming convention is a set of rule to be followed for identifiers.
It makes code more readable and understandable to the 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 makes code more readable and understandable to the other programmers as well.
Naming convention in Ext JS follows the standard JavaScript convention which is not mandatory but a good practice to follow.
Ext.js - Architecture
Ext JS follows MVC/ MVVM architecture.
MVC – Model View Controller architecture (version 4)
MVVM – Model View Viewmodel (version 5)
This architecture is not mandatory for the program but it is best practice to follow this structure to make your code highly maintainable and organized.
MVC – Model View Controller architecture (version 4)
MVVM – Model View Viewmodel (version 5)
This architecture is not mandatory for the program but it is best practice to follow this structure to make your code highly maintainable and organized.
Ext.js - First Program
This chapter list down the steps to write first Hello World program in Ext JS:
Step 1
Create index.htm page in an editor of our choice. Include the required library files in head section of html page as mentioned below:Ext.js - Class System
Ext JS is a JavaScript framework which has functionalities of object oriented programming.
Ext is the namespace which encapsulates all the classes in Ext JS.
Defining a class in Ext JS
Defining a class in Ext JS
Ext.js - Containers
Containers
Container in Ext JS is the component where we can add other container or child components. These containers can have multiple layout to arrange the components in the containers. We can add or remove components from container and from its child elements. Ext.container.Container is the base class for all the containers in Ext JS.Ext.js - Layouts
Layout is the way the elements are arranged in a container. That
could be horizontal, vertical or any other. Ext JS has different layout
defined in its library but we can always write custom layouts as well.
Ext.js - Components
ExtJS UI is made up of one or many widgets called Components.Ext Js
has various UI components defined which can be customised as per your
requirements.
Ext.js - Drag and Drop
Description
Drag and drop feature is one of the powerful feature added for making developers 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.Ext.js - Themes
Ext.js provides a number of themes to be used in your applications.
You can add different theme inplace of classic theme and see the
difference in output, this is done simply by replacing theme CSS file as
explained below.
Ext.js - Custom Events and listeners
Events are something which get fired when something happens to the
class. For example when a button is getting clicked or before/ after
element is rendered.
Ext.js - Data
Data package is used for loading and saving all the data in the application.
The data package has numerous number of classes but the most important classes are:
The data package has numerous number of classes but the most important classes are:
- Modal
- Store
- Proxy
Ext.js - Fonts
Description
Extjs provides the facility to use different font packages. Font packages are used to add different classes for icons available in package.1. Font-Awesome
2. Font-Pictos
Ext.js - Style
Application Styling refers to user adjustment of the look and feel of
components. These adjustments may include: color, color gradients,
font, margins/padding, etc. Ext JS 6 has a new way of styling the
application.
It uses SCSS for styling. SCSS is the more dynamic way of writing CSS code.
It uses SCSS for styling. SCSS is the more dynamic way of writing CSS code.
Ext.js - Drawing
Drawing package in ExtJS enables you to draw general purpose
graphics. This can be used to graphics that work on all browsers and
mobile devices.
Ext.js - Localization
It is always best to communicate users in the language they
understand and prefer. Extjs localization package supports over 40
languages like German, French, Korean, Chinese etc.
It is very simple to implement the locale in ExtJs.You’ll find all of
the bundled locale files in the override folder of the ext-locale
package.
Ext.js - Accessibility
What is accessibility?
In general accessibility means availability, the content is accessible means the content is available.In software terms the application is accessible means the application is available for all. Here all means the persons with disabilities, the visually impaired once or those who use screen readers, to use a computer or those who prefers all the navigation with keyboard instead of using a mouse.
Ext.js - Debugging Ext JS code
Any JavaScript code can be debug using alert() box or console.log() or with the debug pointer in a debugger.
- Alert box:
place an alert box in the code where you want to check the flow or any variable value. e.g alert('message to show' + variable);
Ext.js - Methods
Below are few inbuilt functions which are used mostly in Ext JS:
Ext.is class:
This class checks the platform you are using, whether it is a phone or desktop, a mac or windows operating system. These are the following methods related to Ext.is class
Ext.is class:
This class checks the platform you are using, whether it is a phone or desktop, a mac or windows operating system. These are the following methods related to Ext.is class
Subscribe to:
Posts (Atom)