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

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: '',
    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 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('', {
    model: 'User',
    data: [
        { name: 'Lisa', email: '', phone: '555-111-1224' },
        { name: 'Bart', email: '', phone: '555-222-1234' },
        { name: 'Homer', email: '', phone: '555-222-1244' },
        { name: 'Marge', email: '', 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'

Leave a Reply

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

You are commenting using your 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