CRUD using CodeIgniter and EXTJS Grid Part 4

August 11th, 2010 by aditia rahman / 15 Comments  


It’s been quite a long time since I updated this blog, just continue my blogging journey with very simple post. I have been suggested by Taguchi from the previous post, to adding autosearch filtering to this example, the system will search while user input a value in the searchbox. If you haven’t follow any of this here is the link:
1. CRUD using CodeIgniter and EXTJS Grid Part 1
2. CRUD using CodeIgniter and EXTJS Grid Part 2
3. CRUD using CodeIgniter and EXTJS Grid Part 3
Actually it is quite easy you just have to enable the keyEvent and add a key listeners to the searchUsers component, this is how it look:

var searchUsers = new{
    store: strUsers,
    params: {start: 0, limit: 10},
    width: 180,
    enableKeyEvents: true,
    listeners: {
        'keyup': function() {
            var v = this.getRawValue();
            if (v.length < 1) {
            var o = {
                start : 0,
                limit : 10
   = || {};
  [this.paramName] = v;
                        params : o
            this.hasSearch = true;


You can see on the code above I’m using the keyup event, and all the function inside it, is the same like in the searchfield.js file, on onTrigger2Click function, the last is don’t forget to set enableKeyEvents config to true. Well that quite easy isn’t it? and I think is not necessary to providing the source code.

        submit to reddit Delicious

15 Comments Leave a Comment Subscribe RSS

  • Taguchi says:

    Hi Aditia,

    Thanks for whipping this up. This is a great example.

    I didn’t even know EXTJS had a keyup event handler.

    As a hobby, a buddy and I have been trying to teach ourselves ExtJs since mid-July. But I confess, it been very grueling. ExtJS it not easy an easy framework.

    Do you have any advice fto help us in speeding up the learning curve? Our progress is going very slow. Your examples are thoroughly helpful. But we couldn’t figure the autosearch filtering stuff for ourselves. The ExtJS API docs are very intimidating and can be quite confusing.

    We didn’t realize that the auto-search filter was so straight-forward. But again we could not figure it our for ourselves :-(

    Thanks in advance for the help and advice. I am definately appreciative of this latest example!.


    • the API doc have 4 main section: config, properties, method and event. This is very useful refrence to do something with the component
      when you dealling with a component better you know what the available component in API
      for example: this search box example is using 3rd party (i’m not writing it) and if you open the searchfield.js file you can see the component is extending “Ext.form.TwinTriggerField” so you can search this TwinTriggerField on the API and add config, method, or event that you want

      other resource that very useful is the examples and the forum,

      I started learning ExtJS a year ago, and at least finish 2 simple project using it,
      but since this year my job far from ExtJS, I just continue exploring by my self

      maybe you have to do is dive in to real project too or make your personal project from ExtJS,
      I have a friend that have personal project too using ExtJS, he always ask me how to do things is ExtJS and most of them I cannot answer the question, cause I haven’t do that before, and I think his understanding in ExtJS is better than me now, although he just learned in a month and half

      since it is your hobby keep enjoy and relax and keep the spirit too :D

  • Mike says:

    nice information for usefull.

  • Hi, i am new in Extjs and code Igniter. I understand the functionality the of each 4 part of code. But i want to combine these.
    Like user login/register then list of all users.

    Can any one give me complete code of all 4 parts.

  • Taguchi says:

    Hi Aditia,

    Hope you’re doing well. It’s been a while since we swapped messages.

    I’ve been progressing steadily with EXT JS. But I encountered the following problem:

    Would you have any thoughts on the best way to display custom alerts/responses from the server using EXT JS message (alert) boxes?

    For example, a user fills out an Ext JS form and adds his email address. On pressing submit button, the server validates whether the email address is unique. If the address is not unique the server sends a message back to the client that is displayed in an Ext JS message box window.

    My question is what would be the mechanics of displaying server-side messages (e.g., email address is NOT unique) on the client-side via Ext JS. I already undertsand the mechanics of having the server generate the message, but not sure how to send and display it in an EXT JS message box.

    Thanks in advance and keep up the great posts!


    • hmm the best way…. i think on the sencha forum have better way to do it,

      I’m not really sure it is the best way, but I only use simple Ext Alert Box like this code
      Ext.Msg.alert(“Alert Title”, “Message Content”);

      and the “Message Content” can be replaced by the varible from server response text, whether it’s error message or success message

      • Taguchi says:

        Hi Aditia,

        Thanks for the good advice.

        Looks like the secret is to store the sever response in a variable that is sent via JSON. If the error variable is not “NULL” display the alert otherwise proceed as normal.

        That is, I can place a conditional statement around the

        Ext.Msg.alert(‘Alert Title’, ‘Message Content’)


  • Esente says:

    There is a small bug when adding only one record. In function updateUsers, there should be a check for:
    if (i<sel.length-1)
    data += '||';

    Otherwise, when adding only one record, it will have the "||" at the end, and your controller will add two times.

    With that said, this is a really good tutorial. However, I'm struggling with how to put an upload input in the EditorGridPanel to allow me upload avatar for user.

    • Damon says:

      Is you multi row update working? My single row works just fine but if I select more then 1 row it only updates the last row I changed.

  • Israel says:

    dont work in ubuntu (linux), why

    solution please, thanks

  • drawred says:

    mas.. saya kan coba nampilin crud ini dari javascript..
    load(‘crud, #content);

    script di atas masksudnya me load controler CRUD ke

    ko ga ke luar ya mas?

    klo langsung panggil dari browser “http://localhost/test/index.php/crud/” bisa tampil dengan baik..

    itu kenapa ya mas? apa extJs ga bisa di load di dalem div ya mas?


  • Hi there, I found your website via Google while looking for a related topic, your site came up, it looks good. I’ve bookmarked it in my google bookmarks.

  • BullS_eYe says:

    Hi Aditia,

    I am trying to use your search field functionality in my grid component but I am getting the following error while hit enter after filling the search field..
    this.triggers is undefined
    error source line: [Break On This Error];

    I am new to extjs and having hard time implementing it.
    Any help would be greatly appropriated.

  • Mochammad Yusuf says:

    Keren sekali mas tutorialnya saya sudah coba tapi saya mengalami masalah pada saat edit menggunakan combobox untuk countrie . pada saat melakukan edit pada combobox tidak bisa melakukan update dengan data yang sudah di rubah . saya sudah cocokin dengan codenya mas punya tidak ada yang beda .

    mohon bantuannya mas .


Leave a Comment