TechHeap: Create a Grid Panel with renderer in EXT JS 4

March 08, 2014

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.

TechHeap

Pages

March 08, 2014

Create a Grid Panel with renderer in EXT JS 4

No comments:

Post a Comment