Starting ExtJs sample

This is my first ExtJs sample. in this I am going to explain about how to start a sample in ExtJs.

first download the ExtJs library files

https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug.css

https://extjs.cachefly.net/ext/gpl/5.1.0/packages/sencha-charts/build/crisp/resources/sencha-charts-all-debug.css

https://extjs.cachefly.net/ext/gpl/5.1.0/build/ext-all-debug.js

https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-crisp/build/ext-theme-crisp.js

https://extjs.cachefly.net/ext/gpl/5.1.0/packages/sencha-charts/build/sencha-charts-debug.js

Include them into the html file.

create a script block in html like below

 


      lessThan script type="text/javascript" greaterThan //<![CDATA[
         window.onload=function(){ }  //]] greaterThan 
         
      lessThan /script greaterThan

Now let’s create a simple grid with some JSON data inside window.onload function,

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [ 'name', 'email', 'phone' ]
});

This is going to be our model. In ExtJs a model is the JSON structure not the actual data. The model is a part of Ext.data Object. And it has fields which is an Array. Each field can be a simple name or you can define the type as well for the field like below

fields: [  { name: ‘id’, type: ‘int’ }  ]

Now time to create the actual JSON data. ExtJs holds the actual data in Store Object. Store takes at least two parameters model and data.

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    data: [
        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
    ]
});

Let’s render the data into a grid container.

Ext.create('Ext.grid.Panel', {
    renderTo: document.body,
    store: userStore,
    width: 400,
    height: 200,
    title: 'Application Users',
    columns: [
        {
            text: 'Name',
            width: 100,
            sortable: false,
            hideable: false,
            dataIndex: 'name'
        },
        {
            text: 'Email Address',
            width: 150,
            dataIndex: 'email',
            hidden: true
        },
        {
            text: 'Phone Number',
            flex: 1,
            dataIndex: 'phone'
        }
    ]
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s