Thursday, June 23, 2011

Managing Grid CRUD In ExtJS 4

I read a discussion on Sencha forum (here). Obviously, ExtJS 4 make user to be frustrating because of the lack of well organized document and lack of well commented sample code. Probably, it is just because ExtJS 4 is too new that developers have not catch up. However, since ExtJS is partially commercial product instead of a pure open source project, its quality should be well controlled before it announce final release. Here is a little bit experiece on how to make a CRUD grid with ExtJS 4.

To successfully use Grid, auto sync store, and rowediting plugin in ExtJS 4, there are several points need to be highlighted. I listed them as below,


  1. In your Model class, you have to either define a hardcoded 'id' property or use 'idProperty' to specify one column as 'id'.
  2. You server side code need to return processed records back to browser. I tried only send back "id" in "data" part. But, it is not successful.
  3. Be aware that the format of record in the "data" has JSON format.
  4. Be sure to implemented at least one Validator in your Model class because, in ExtJS source code AbstractStore.js, you can find the following code, which may always return true for a new created record in RowEditing plugin when the store is set as autoSync = true

/**
     * @private
     * Filter function for new records.
     */
    filterNew: function(item) {
        // only want phantom records that are valid
        return item.phantom === true && item.isValid();
    },

Most likely, we wont use auto sync store in real product. But, this example could be a good start.

1 comment:

  1. There's an example of using the remoting interface of Ext.direct in the examples. Look in the 'direct' folder. The remoting provider uses JSON to transport values to and from the server using an RPC-like architecture. This way you are using an 'object' interface to server classes.

    There's also an example of using the REST in the restful folder.

    I found these really useful.

    ReplyDelete