TechHeap

Create a Grid Panel with renderer in EXT JS 4

Lets create a simple Grid Panel with renderer in EXT JS 4.2. In this tutorial we will also understand each code written.

Basic Structure of application:
<application>
---- index.html
---- css folder
      ----- ext-all.css
      ----- ext-theme-classic folder
---- js folder
      ----- app.js
      ----- ext-debug.js
      ----- src folder

The above structure contains all the required css and javascript that will help us to create and run an EXTJS application. We will add all javascrupt code of application in app.js and include that in index.html

Add following code snippet in index.html. This html file will be our main file and in this we are including all the required extjs scripts and css files. Also, we will add grid panel code into app.js which has also been included in index.html


<html>
<head>
    <title>Grid Panel Example</title><meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-8">

     <link rel="stylesheet" type="text/css" href="css/ext-all.css">
    <script type="text/javascript" src="js/ext-debug.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</head>
<body>

<div id="gridpaneldiv"></div>

</body>
</html>

For creating a Grid Panel we will require 3 things. First is the data to show in grid known as Store, second data to grid mapping columns known as Model and third is the panel where we will show the grid. First we will define a Model (A Model is just a collection of fields that represents a type of data.)

Ext.define('UserModel', { /* defining a Model */
    extend: 'Ext.data.Model', /* defining the type */
    fields: [ 'name', 'email', 'phone' ] /* defining data structure */
});

Now create a Store that will contain the data to show in Grid.

var userStore = Ext.create('Ext.data.Store', {
    model: 'UserModel', /* mapping store to model defined above */
    data: [ 
        { name: 'User1', email: 'user1@abcd.com', phone: '222-111-1224' },
        { name: 'User2', email: 'user2@abcd.com', phone: '222-222-1234' },
        { name: 'User3', email: 'user3@abcd.com', phone: '222-333-1244' },
        { name: 'User4', email: 'user4@abcd.com', phone: '222-444-1254' }
    ]
});

In Last lets define the Grid Panel:

Ext.create('Ext.grid.Panel', {
    renderTo: "gridpaneldiv", /* defining where this panel will display in html*/
    store: userStore, /* mapping with store */
    width: 400,
    height: 200,
    title: 'Application Users',
    columns: [
        {
            text: 'Name',
            width: 100,
            sortable: false,
            hideable: false, 
            dataIndex: 'name' /* mapping panel column with store data attribute */
        },
        {
            text: 'Email Address',
            width: 150,
            dataIndex: 'email'
        },
        {
            text: 'Phone Number',
            flex: 1,
            dataIndex: 'phone'
        }
    ]
});

Enclose all above source code written in app.js under EXT ready function:


Ext.onReady(function(){ 

/////

});

Run the application and you will see below as output:

extjs 4 gridpanel

Download the source code from here.

Create HelloWorld Page in EXT JS 4.2

Lets create a simple HelloWorld Page in EXT JS 4.2.

Basic Structure of application:

<application>
---- index.html
---- css folder
      ----- ext-all.css
      ----- ext-theme-classic folder
---- js folder
      ----- app.js
      ----- ext-debug.js
      ----- src folder

The above structure contains all the required css and javascript that will help us to create and run an EXTJS application. We will add all javascrupt code of application in app.js and include that in index.html

Add following code snippet in index.html

<html>
<head>
    <title>HelloWorld!</title>
    <link rel="stylesheet" type="text/css" href="css/ext-all.css">
    <script type="text/javascript" src="js/ext-debug.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</head>
<body></body>
</html>

Add follwing code snippet in app.js file

Ext.require('Ext.container.Viewport');
Ext.application({
    name: 'HelloWorld',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    title: 'Hello World',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});

Save files and run the application. You will see below page as output.

HTML5 Tutorial: Introduction and New Features

HTML5 is the latest standard for HTML. The previous version of HTML was HTML 4.01 which has limited features and many browser compatibilty issues.
HTML5 was designed to replace both HTML 4, XHTML, and the HTML DOM Level 2.
This new version of HTML has comes with great advance features and capabilities like deliver of rich content without the need for additional plugins, animation, graphics, audio, and can also be used to build complicated web applications with local storage (act like internal mini database).
HTML5 is also cross-platform. It is designed to work whether you are using a PC, or a Tablet, a Smartphone, or a Smart TV.

HTML5: Sample Code Snippet

<!DOCTYPE html> <!— doctype declaration for HTML5 -->
<html>
<head> < title>Title of the document</title>< /head>
<body> Content of the document......< /body>
</html>

HTML5 - New Features

Some of the most interesting new features in HTML5 are:

The <canvas> element for 2D drawing. You can do graphic drawing using JavaScript.
The <video> and <audio> elements for media playback. Can easily add audios or videos into your HTML pages.
Support for local storage. You can maintain data within the browser using this feature.
New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
New form controls, like calendar, date, time, email, url, search
Supports all major browsers like Chrome, Firefox, Internet Explorer, Safari, Opera

TechHeap

Pages

March 08, 2014

Create a Grid Panel with renderer in EXT JS 4

Create HelloWorld Page in EXT JS 4.2

HTML5 Tutorial: Introduction and New Features

HTML5: Sample Code Snippet

HTML5 - New Features

Other tutorials based on new features and capabilities of HTML5: