CRUD using CodeIgniter and EXTJS Grid – Part 3

July 13th, 2010 by aditia rahman / 37 Comments  

     

This is the final post of the series CodeIgniter and Extjs CRUD, if you want to read the previous posts, here the first part and the second part of this post. Basically we already finish all the crud feature on the second part this only another common feature to add in the application, so we will add a quick search field on the grid, and what you need is the search grid plugin, I’m using the extjs example search field plugin from this extjs grid tutorial, you can download the complete code and find this file searchfield.js and put it your desire folder, in this post i put on the “assets/js/ext/plugins/” folder. Now all you have to do just include the js file in the view file and change the controller method.

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

ci_extjs_crud_3_final

Download Source

        submit to reddit Delicious

Others You May Like

37 Comments Leave a Comment Subscribe RSS

Leave a Comment

You must be logged in to post a comment.