In today post I collected the css grid system that can be used as your grid layout system, I found 12  tools for creating the grid online and 15 that can be downloaded, so you can create manually on your computer.

Downloadable

The first 15 tools are some css grid that available to download, some of them provide more than css grid, so it called a framework, and you might be need to dig a little bit to their documentation.

520 Grid

Columnal

Blueprint CSS

960gs

1140 CSS Grid

Bluetrip

52 Framework

Baseline CSS

Fluid Grid

Notjustagrid

Less Framework

Skeleton

1200 Grid System

YAML

Golden Grid System

Online Generator

And the next 12 tools are the online css grid generator that can provide you the grid you need on the fly, customize the number of column, column width, column separator width, container width, etc. These tools are great to build fast layout.

Tiny Fluid Grid

ZURB CSS Grid Builder

Gridr Buildrrr

Grid Calculator

Gridinator

1kb CSS Grid

YUI CSS Grid Builder

YAML Builder

Inuit Grid Builder

Net Protozo Grid Generator

Variable Grid System

Construct

Negative Grid

This is really simple actually, in this example I’m using static json file as a data source, the data are the company list and the company product list, i get all this data from wikipedia.

view demo | download source

First let define the data by creating two json file, I named company.json and products.json, these two data connected by company_id property that defined in products.json. Here the code look a like.

Company.json

{'companies': [{
    'id': '1',
    'name': 'Google',
    'founded': 'September 4, 1998',
    'people': 'Sergey Brin, Larry Page'
}, {
    'id': '2',
    'name': 'Microsoft',
    'founded': 'April 4, 1975',
    'people': 'Bill Gates, Paul Allen'
}, {
    'id': '3',
    'name': 'Yahoo',
    'founded': 'March 1, 1995',
    'people': 'Jerry Yang, David Filo'
}
]}

Products.js

{'products': [{
    'company_id': '1',
    'name': 'Google Analytics',
    'type': 'Web Statistics'
}, {
    'company_id': '1',
    'name': 'Gmail',
    'type': 'Communication'
}, {
    'company_id': '2',
    'name': 'Xbox',
    'type': 'Game Console'
}, {
    'company_id': '2',
    'name': 'Bing',
    'type': 'Web Search'
}, {
    'company_id': '3',
    'name': 'Yahoo! Publisher Network',
    'type': 'Web Advertising'
}
]}

Full Source Code

Ext.onReady(function() {
   Ext.define('Company', {
       extend: 'Ext.data.Model',
       fields: ['id', 'name', 'founded', 'people']
   });

   var store_company = new Ext.data.Store({
      model: 'Company',
      proxy: {
          type: 'ajax',
          url: 'company.json',
          reader: {
              type: 'json',
              root: 'companies'
          }
      }
   });

    var grid_company = Ext.create('Ext.grid.Panel', {
        store: store_company,
        columns: [
            {
                text     : 'Company Name',
                dataIndex: 'name'
            },
            {
                text     : 'Founded',
                width    : 200,
                dataIndex: 'founded'
            },
            {
                text     : 'Key People',
                width    : 250,
                dataIndex: 'people'
            }
        ],
        height: 200,
        width: 550,
        title: 'Company List',
        renderTo: 'grid-company',
        viewConfig: {
            stripeRows: true
        },
        listeners: {
            itemclick : function() {
                var data = grid_company.getSelectionModel().selected.items[0].data;
                grid_product.setTitle(data.name + ' Products List');
                store_product.clearFilter();
                store_product.filter('company_id', data.id);
                store_product.load();
            }
        }
    });

    store_company.load();

    Ext.define('Product', {
       extend: 'Ext.data.Model',
       fields: ['company_id', 'name', 'type']
    });

    var store_product = new Ext.data.Store({
      model: 'Product',
      proxy: {
          type: 'ajax',
          url: 'products.json',
          reader: {
              type: 'json',
              root: 'products'
          }
      }
    });

    var grid_product = Ext.create('Ext.grid.Panel', {
        store: store_product,
        columns: [
            {
                text     : 'Product Name',
                dataIndex: 'name',
                width    : 350,
            },
            {
                text     : 'Type',
                width    : 200,
                dataIndex: 'type'
            }
        ],
        height: 200,
        width: 550,
        title: 'Product List',
        renderTo: 'grid-product',
        viewConfig: {
            stripeRows: true
        }
    });
});

The main function in this example is the itemclick listener on the company name grid, we can directly filter the store by using filter() method, but remember to use clearFilter() too, otherwise each time the filter called, the filter condition will be stacked, somekind the “and” operator in programming.

listeners: {
    itemclick : function() {
        var data = grid_company.getSelectionModel().selected.items[0].data;
        grid_product.setTitle(data.name + ' Products List');
        store_product.clearFilter();
        store_product.filter('company_id', data.id);
        store_product.load();
    }
}

That a simple example using the static json data, to use other data like array or dynamic data, like fetching from php, you can modified the store component for example using the arraystore.

view demo | download source

If you want to know the detail about google search API, you can refer this link.

The ExtJS Code

The ExtJS code contains Windows, gridPanel, pagingToolbar, searchField

Ext.onReady(function() {
    var store = new Ext.data.JsonStore({
        root: 'results',
        totalProperty: 'totalCount',
        remoteSort: true,

        fields: [
            'GsearchResultClass',
            'unescapedUrl',
            'url',
            'visibleUrl',
            'cacheUrl',
            'title',
            'titleNoFormatting',
            'content'
        ],

        proxy: new Ext.data.HttpProxy({
            url: 'search.php'
        })
    });

    function renderResult(value, p, record){
        return String.format(
            '<a class="link" href="{1}" target="_blank">{0}</a>',
            record.data.title, record.data.unescapedUrl);
    }

    var grid = new Ext.grid.GridPanel({
        border: false,
        width: 485,
        height: 430,
        store: store,
        loadMask: true,
        columns: [{
            header: 'Results',
            dataIndex: 'title',
            width: 480,
            renderer: renderResult
        }],

        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                p.body = '<p class="excerpt">'+record.data.content+'</p>';
            }
        },
        tbar: [
            '->',
            new Ext.ux.form.SearchField({
                store: store,
                width: 200,
                emptyText: 'Google Search'
            })
        ],
        bbar: new Ext.PagingToolbar({
            pageSize: 8,
            store: store,
            displayInfo: true
        })
    });

    var window = new Ext.Window({
        title: 'Google Web Search - ExtJS & PHP',
        width: 500,
        height: 460,
        closable: false,
        resizable: false,
        items: [grid]
    }).show();
});

The Search Field used is from the ExtJS ux you can found it on the example section, and it placed in the gridPanel toolbar, inside the GridPanel there is a viewConfig, I’m following this example, this is for displaying search result content (short description)

The PHP Code

The PHP code used to make me easier generating json format so ExtJS can be easily read all the data

<?php

$start = isset($_REQUEST['start']) ? $_REQUEST['start'] : 0;
$limit = isset($_REQUEST['limit']) ? $_REQUEST['limit'] : 8;

$q = str_replace(" ", "%20", $_REQUEST['query']);
$key = "insert your key";

$url = 'https://ajax.googleapis.com/ajax/services/search/web?v=1.0&q='.$q.'&start='.$start.'&rsz='.$limit.'&key='.$key;

$content = file_get_contents($url);
$array = json_decode($content);

$data = array();

foreach ($array->responseData->results as $var => $value)
{
    $data[] = array(
        "GsearchResultClass" => $value->GsearchResultClass,
        "unescapedUrl"       => $value->unescapedUrl,
        "visibleUrl"         => $value->visibleUrl,
        "cacheUrl"           => $value->cacheUrl,
        "title"              => $value->title,
        "titleNoFormatting"  => $value->titleNoFormatting,
        "content"            => $value->content
    );
}

$out = array(
    "success" => true,
    "totalCount" => $array->responseData->cursor->estimatedResultCount,
    "results" => $data
);

echo json_encode($out);

?>

The CSS Code

This is the simple CSS code for customizing the grid row style

.link {
    color: #333;
    line-height: 25px;
    text-decoration: none;
    font-size: 13px;
    padding: 5px 10px;
    display: block;
    -webkit-border-radius: 1.0em;
    -moz-border-radius: 1.0em;
    border-radius: 1.0em;
}
.link:hover {
    background: #333;
    color: #f3f3f3;
}
.excerpt {
    padding: 5px 20px;
    color: #999;
}

Here is the result

View Demo | Download Source

This is what to be included in view “system/views/user/index.php”

<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/plugins/searchfield.js"; ?>"></script>

Create and add new search field plugin to the grid toolbar

// the new search field
var searchUsers = new Ext.app.SearchField({
    store: strUsers,
    params: {start: 0, limit: 10},
    width: 180,
    id: 'fieldUsersSearch'
});

// add to the toolbar grid
var tbUsers = new Ext.Toolbar({
    items:[{
        text: 'Add',
        icon: BASE_ICONS + 'user_add.png',
        handler: function() {
            var User = gridUsers.getStore().recordType;
            var u = new User({
                fullname: 'New Full Name',
                email: 'New Email',
                country: 'Water Seven',
                occupation: 'Occupation',
                birthdate: '1899-10-10'
            });
            gridUsers.stopEditing();
            strUsers.insert(0, u);
            gridUsers.startEditing(0, 0);
        }
    }, '-', {
        text: 'Save Selected',
        disabled: true,
        id: 'btnSave',
        icon: BASE_ICONS + 'save.gif',
        handler: updateUsers
    }, '-', {
        text: 'Delete',
        icon: BASE_ICONS + 'user_delete.png',
        handler: deleteUsers
    }, '->', searchUsers]
});

Alternatively you can use saki grid search plugin follow this link http://gridsearch.extjs.eu/

And a little modification in controller “system/controller/user.php”

When you add search grid and doing a search query, the search field will give $_POST['query'] to the server and all we have to do is check whether the $_POST['query'] is set or not, if is set then do some query LIKE, in codeigniter you can see on the active record class .

public function ext_get_all()
{
    $start = isset($_REQUEST['start']) ? $_REQUEST['start'] : 0;
    $limit = isset($_REQUEST['limit']) ? $_REQUEST['limit'] : 10;

    if (isset($_POST['query']))
    {
        $this->db->like('users.fullname', $_POST['query']);
        $this->db->or_like('users.email', $_POST['query']);
        $this->db->or_like('users.occupation', $_POST['query']);
        $this->db->or_like('users.birthdate', $_POST['query']);
        $this->db->or_like('countries.country_name', $_POST['query']);
    }

    $this->db->select('users.*, countries.country_name');
    $this->db->from('users');
    $this->db->join('countries',
            'countries.id = users.country_id');
    $this->db->order_by('users.fullname');

    $this->db->limit($limit, $start);

    $query = $this->db->get();
    $results = $this->db->count_all('users');
    $arr = array();
    foreach ($query->result() as $obj)
    {
        $arr[] = $obj;
    }
    echo '{success:true,results:'. $results .
            ',rows:'.json_encode($arr).'}';
}

you can download all the source code in this post and here the final screen thumbnail result from all the of the post

Download Source

First Edit The View ( in “application/views/user/index.php” )

We will use the editorGrid, one of them should be editable on the combobox field and the value is fetched from the database, so we create country store component and set like the code below (in this step we haven’t created the method to get all countries. it described in the controller section).

var strCountries = new Ext.data.Store({
    reader: new Ext.data.JsonReader({
        fields: ['id', 'country_name'], root: 'countries'
    }),
    proxy: new Ext.data.HttpProxy({
        url: BASE_URL + 'user/ext_get_all_countries', method: 'POST'
    })
});

Now edit the toolbar so it can manipulate the grid and the data inside it, the “Add” button is to creating new data by adding the new row on the grid, and the user has to double click the new row to be edited. “Save Selected” button is to save the selected row button, it means user have to click the button and select the row to be saved, means can save multiple row at the save time. Last is “Delete” button that can be delete multiple row.

var tbUsers = new Ext.Toolbar({
    items:[{
        text: 'Add',
        icon: BASE_ICONS + 'user_add.png',
        handler: function() {
            var User = gridUsers.getStore().recordType;
            var u = new User({
                fullname: 'New Full Name',
                email: 'New Email',
                country: 'Water Seven',
                occupation: 'Occupation',
                birthdate: '1899-10-10'
            });
            gridUsers.stopEditing();
            strUsers.insert(0, u);
            gridUsers.startEditing(0, 0);
        }
    }, '-', {
        text: 'Save Selected',
        disabled: true,
        id: 'btnSave',
        icon: BASE_ICONS + 'save.gif',
        handler: updateUsers
    }, '-', {
        text: 'Delete',
        icon: BASE_ICONS + 'user_delete.png',
        handler: deleteUsers
    }]
});

function updateUsers() {
    var sm = gridUsers.getSelectionModel();
    var sel = sm.getSelections();
    var data = '';
    for (i = 0; i<sel.length; i++) {
        data = data + sel[i].get('id') + ';'
                + sel[i].get('fullname')
                + ';' + sel[i].get('email')
                + ';' + sel[i].get('country_id')
                + ';' + sel[i].get('occupation')
                + ';' + sel[i].get('birthdate')
                + '||';
    }
    Ext.Ajax.request({
        url: BASE_URL + 'user/ext_update',
        method: 'POST',
        params: { postdata: data }
    });
    strUsers.load();
}

function deleteUsers() {
    Ext.Msg.show({
        title: 'Confirm',
        msg: 'Delete Selected Users ?',
        buttons: Ext.Msg.YESNO,
        fn: function(btn) {
            if (btn == 'yes') {
                var sm = gridUsers.getSelectionModel();
                var sel = sm.getSelections();
                var data = '';
                for (i = 0; i<sel.length; i++) {
                    data = data + sel[i].get('id') + ';';
                }
                Ext.Ajax.request({
                    url: BASE_URL + 'user/ext_delete',
                    method: 'POST',
                    params: { postdata: data }
                });
                strUsers.load();
            }
        }
    });
}

And don’t forget to change the grid panel component from Ext.grid.GridPanel to Ext.grid.EditorGridPanel and add the editor property to each column like this one.

columns: [
    cbGrid, {
        header: "Fullname",
        dataIndex: 'fullname',
        width: 180,
        editor: new Ext.form.TextField({
            allowBlank: false
        })
    }, {
        header: "Email",
        dataIndex: 'email',
        width: 180,
        editor: new Ext.form.TextField({
            allowBlank: false,
            vtype: 'email'
        })
    }, {
        header: "Country",
        dataIndex: 'country_name',
        width: 120,
        editor: new Ext.form.ComboBox({
            id: 'cbCountry',
            triggerAction: 'all',
            store: strCountries,
            valueField: 'id',
            displayField: 'country_name'
        })
    }, {
        header: "Occupation",
        dataIndex: 'occupation',
        width: 120,
        editor: new Ext.form.TextField({
            allowBlank: false
        })
    }, {
        header: "Birth",
        dataIndex: 'birthdate',
        width: 80,
        renderer : Ext.util.Format.dateRenderer('d/m/Y'),
        editor: new Ext.form.DateField({
            format: 'd/m/Y',
            allowBlank: false
        })
    }
]

Second Edit The Controller (in “application/controllers/user.php”)

Add new function inside the controller to get all the countries, add user, edit user and delete user. The first snippet below is function to get all the countries data, ideally I always create another controller because it accessing the different table and this country data have “has one” relationship to user controller, but in this post to make it fast I put that function in the same controller.

public function ext_get_all_countries()
{
    $this->db->order_by('country_name');
    $query = $this->db->get('countries');
    $json = "{'countries':[";
    foreach($query->result() as $data)
    {
        $json .= '{"id":"'.$data->id .
                '", country_name:"' . $data->country_name.'"},';
    }
    $json .= "]}";
    echo $json;
}

And next is adding function for adding new data and edit existing data, you can see below there are looping when inserting the data, it because from the Extjs grid send multiple value, so I need to break down in array using explode function ini PHP, and there some converting date format cause the Extjs given the different date format when converting to string than mysql.

public function ext_update()
{
    /* ex ext date: 1899-11-27T00:00:00
       mysql : YYYY-MM-DD */

    $records = explode('||', $_POST['postdata']);

    foreach ($records as $row)
    {
        $field = explode(';', $row);

        $birthdate = substr($field[5], 0, 10);

        $data = array(
            'fullname' => $field[1],
            'email' => $field[2],
            'occupation' => $field[4],
            'birthdate' => $birthdate
        );

        if (is_numeric($field[3]))
        {
            $data['country_id'] = $field[3];
        }
        else
        {
            $data['country_id'] = 1;
        }

        if (is_numeric($field[0]))
        {
            $this->db->where('id', $field[0]);
            $this->db->update('users', $data);
        }
        else
        {
            $this->db->insert('users', $data);
        }
    }
}

And the last is to delete all selected row from the grid, it is the way from the above snippet, the id that we want to deleted
consolidated in one string, and php explode it to an array

public function ext_delete()
{
    $records = explode(';', $_POST['postdata']);
    foreach($records as $id)
    {
        $this->db->where('id', $id);
        $this->db->delete('users');
    }
}

Well that for the part two, most feature have already been added for the CRUD grid, for part just for finishing I may add a quaick search field on the grid, and here’s below the complete code from this post.

Download Source

1. Create Database Schema

The table that we will use is two tables with “has one” relationship, namely users table with foreign key country_id and countries table that store all the countries data, so when we want to know the country name from the users we have to get from the countries table, and here the sql for creating the table.

--
-- Table structure for table `countries`
--

CREATE TABLE IF NOT EXISTS `countries` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `country_name` varchar(150) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=102 ;

-- --------------------------------------------------------

--
-- Table structure for table `users`
--

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `fullname` varchar(150) NOT NULL,
  `email` varchar(100) NOT NULL,
  `country_id` int(11) NOT NULL DEFAULT '1',
  `occupation` varchar(150) NOT NULL,
  `birthdate` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=26 ;

2. Setup Codeigniter

Like we always do in previous tutorial, there are the files that we have to setup: config.php, database.php, autoload.php and route.php, all this files are inside the same folder in codeigniter namely “application/system/config”, and don’t forget to setup the extjs file.
config.php file

$config['base_url'] = "http://localhost/ci_extjs_crud/";

database.php file

$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "";
$db['default']['database'] = "ci_extjs_crud";
$db['default']['dbdriver'] = "mysql";

autoload.php file

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

route.php file

$route['default_controller'] = "user";

we will create user class so set the default route to user and the extjs file looks on my project folder (inside codeigniter)

I already remove only the used extjs file so, it much smaller than the fresh copy

3. Create The Controller

Create file image.php inside codeigniter controller folder and add this code below, this class only have 3 function. First function is to initialize the controller class, the index function only to render the view file and the ext_get_all function is to get the data from database that will displayed on the grid, you can see inside that function there are code to handle the pagination and the related table, the output from this function have to be in JSON format, so it will make easier to be displayed on Extjs grid.

<?php

class User extends Controller {

    public function  __construct()
    {
        parent::Controller();
    }

    public function index()
    {
        $this->load->view('user/index');
    }

    public function ext_get_all()
    {
        $start = isset($_REQUEST['start']) ? $_REQUEST['start'] : 0;
	$limit = isset($_REQUEST['limit']) ? $_REQUEST['limit'] : 10;

        $this->db->select('users.*, countries.country_name');
        $this->db->from('users');
        $this->db->join('countries',
                'countries.id = users.country_id');

        $this->db->limit($limit, $start);

        $query = $this->db->get();
        $results = $this->db->count_all('users');
        $arr = array();
        foreach ($query->result() as $obj)
        {
            $arr[] = $obj;
        }
        echo '{success:true,results:'. $results .
                ',rows:'.json_encode($arr).'}';
    }
}

4. Create The View

Create file index.php inside folder “application/views/user/”, just include the extjs file on the header that linked to file that we already setup on the step 2, and add this code below in the javascript tag (whatever you like whether in the separate file or in the same file)

<script type="text/javascript">
var BASE_URL = '<?php echo base_url(); ?>' + 'index.php/';
var BASE_PATH = '<?php echo base_url(); ?>';
var BASE_ICONS = BASE_PATH + 'assets/icons/';
Ext.onReady(function() {
    var strUsers = new Ext.data.Store({
        reader: new Ext.data.JsonReader({
            fields: [
                'id', 'fullname', 'email', 'country_id',
                'country_name', 'occupation', 'birthdate'
            ],
            root: 'rows', totalProperty: 'results'
        }),
        proxy: new Ext.data.HttpProxy({
            url: BASE_URL + 'user/ext_get_all',
            method: 'POST'
        })
    });

    var tbUsers = new Ext.Toolbar({
        items:[{
            text: 'Add',
            icon: BASE_ICONS + 'user_add.png'
        }, '-', {
            text: 'Delete',
            icon: BASE_ICONS + 'user_delete.png'
        }]
    });

    var cbGrid = new Ext.grid.CheckboxSelectionModel();

    var gridUsers = new Ext.grid.GridPanel({
        frame: true, border: true, stripeRows: true, sm: cbGrid,
        store: strUsers, loadMask: true, title: 'Users List',
        style: 'margin:0 auto;', height: 330, width: 722,
        columns: [
            cbGrid, {
                header: "Fullname",
                dataIndex: 'fullname',
                width: 180
            }, {
                header: "Email",
                dataIndex: 'email',
                width: 180
            }, {
                header: "Country",
                dataIndex: 'country_name',
                width: 120
            }, {
                header: "Occupation",
                dataIndex: 'occupation',
                width: 120
            }, {
                header: "Birth",
                dataIndex: 'birthdate',
                width: 80,
                renderer : Ext.util.Format.dateRenderer('d/m/Y')
            }
        ],
        tbar: tbUsers,
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: strUsers,
            displayInfo: true
        })
    });

    gridUsers.render('divgrid');
    strUsers.load();
});
</script>

The first screenshot from this tutorial is something like this and you can download all the code below, i have included the sql schema and all the extjs file that needed in this post.

Download Source

1. Setting the main page
Include the EXTJS file (javascript and css) in html header file, then create single div with an id to where the grid to put on, and i’m using inline css style to centering the div the on the page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"; ?>"></script>
<script type="text/javascript" src="extjs/ext-all.js"; ?>"></script>
</head>

/* This should be fill with the EXTJS script code
 * It explain on the next step
 */

// on the body section
<body>
<div id="grid-example1" style="height: 200px;width:600px;margin:0 auto;padding:20px;"></div>
</body>
</html>

2. Create the data in array for store inside the grid
To make it simple I using data for grid from an array, for more expert use, maybe using Json data reader will be fit

var myData = [
	[1, 'Luffy', 'Monkey D Luffy', 'monkeyd@luffy.com', 'East Blue'],
	[2, 'Zoro', 'Roronoa Zoro', 'roronoa@zoro.com', 'East Blue'],
	[3, 'Sanji', 'Leg Sanji', 'sanji@baratie.net', 'East Blue'],
	[4, 'Usop', 'Soge King', 'usap@sogevillage.com', 'East Blue'],
	[5, 'Franky', 'Franky Cyborg', 'franky@water7.com', 'East Blue'],
	[6, 'Chopper', 'Tony Chopper', 'chopper@drum.com', 'East Blue']
];

3. Create the data store for editable grid, in this case i’m using Form.ComboBox

// main store for grid
var store_mbti = new Ext.data.ArrayStore({
	fields: [
		{ name: 'id' }, { name: 'username' }, { name: 'full_name' },
		{ name: 'email' }, { name: 'village' }
	]
});

// store including the data for editable grid, using Form.ComboBox
var strVillage = new Ext.data.SimpleStore({
	fields: ['village'],
	data : [['Baratie'], ['Drum Island'],
		['Soge Island'],['Swordmen Land']]
});

4. Create the checkboxselectionmodel
This component have to be created and included in grid config options named sm, the selModel, this is to make the entire single row selectable

var cb_select = new Ext.grid.CheckboxSelectionModel();

5. Create the main grid component
If you want the grid to be manually selectable by the user you need to add cb_select in the grid column header

var grid_mbti = new Ext.grid.EditorGridPanel({
	store: store_mbti,  frame: true, border: true, autoHeight: true,
	resizable: true, loadMask: true, stripeRows: true,
	title:'Grid Select All', sm: cb_select,
	columns: [
		// cb_select, // uncomment, if using checkboxselectionmodel
		{ header: "Username", dataIndex: 'username', },
		{ header: "Full Name", dataIndex: 'full_name', width: 150 },
		{ header: "Email", dataIndex: 'email', width: 150 },
		{ header: "Village", dataIndex: 'village', width: 120,
			editor: new Ext.form.ComboBox({
				allowBlank: false,
				mode: 'local',
				store: strVillage,
				valueField: 'village',
				displayField: 'village',
				triggerAction: 'all',
				editable: false
			})
		}],
	tbar: [{
		text: 'Submit',
		handler: function() {
			// the implementation is in the next step
		}
	}]
});

6. Load the store and render the grid

store_mbti.loadData(myData);
grid_mbti.render('grid-example1');

The alternative way from using render grid is, to add config option on grid named renderTo and fill it with html id that you desire

7. Function handling on the toolbar, using ajax or not it’is up to you
Creating function handler should be in handler config in toolbar button, when I try my self it got some error on firebug

// this implementation is inside button handler on step 5
handler: function() {
	grid_mbti.getSelectionModel().selectAll();
	var sm = grid_mbti.getSelectionModel().getSelections();
	var temp = '';
	for (i=0; i<=sm.length-1; i++) {
		temp = temp + '|' + sm[i].get('village')
	}
	Ext.Ajax.request({
		url: 'process_data.php',
		method: 'POST',
		params: 'village=' + temp,
		success: function(obj) {
			var resp = obj.responseText;
			if (resp != 0) {
				Ext.MessageBox.alert('Success', resp + ' Processed');
			} else {
				Ext.MessageBox.alert('Failed', 'No Processed');
			}
		}
	});
}

8. Handling the server side process
Like the previous step, the php file I called is process_data.php, the php script convert the variable received to an array, and then you can loop through the array

<?php

$arr_village = explode('|', $_POST['village']);
$count = count($arr_village) - 1;
if ($count != 0) {
    foreach ($arr_village as $value) {
        // data process in here, manipulate db or whatever
    }
    echo $count;
} else {
    echo 0;
}

?>

The result screen should be like this, first before submit with the last one column editable

And after click the submit button on the top left of the grid toolbar, all the row in the grid should be selected

Yup that’s all, you can download all the code from the link below but once again i’m not included the EXTJS file, you just can download it by your self on the official site. In the downloaded code I provide 2 grid with different use of selection model so you can clearly see the different, and I welcome for any suggestion from you thanks.

DOWNLOAD SOURCE