How to implement Dynamic Grid in Extjs?

Question

I want to implement dynamic grid in Extjs. I have found this How do you create table columns and fields from json? (Dynamic Grid) and the accepted answer looks good. In my case I have no proxy store but a proxy model:

 fields: [ {name: 'id', type: 'int', persist: false},
              {name: 'gender', type: 'auto'},
              {name: 'name', type: 'auto'},
              {name: 'age', type: 'int'}],

     identifier: 'sequential', // to generate -1, -2 etc on the client

    proxy: {
        type: 'rest',
        idParam: "id",

        url:'http://localhost:3000/posts',
        api: 
        {
            read  : 'http://localhost:3000/db',
            create: 'http://localhost:3000/posts',
            update  : 'http://localhost:3000/posts' ,
            destroy : 'http://localhost:3000/posts' 

        },

        headers: {'Content-Type': "application/json" },     

        reader: {
        type: 'json',
        rootProperty:'posts',

        totalProperty: 'total'

        },
        writer: {
            type: 'json'
        }

My store looks like is:

model: 'ThemeApp.model.peopleModel',

    storeId: 'peopleStore',
        pageSize: 500,  
        autoLoad: true,
        autoSync: true,     
        pageSize: 5,    

        autoLoad: {start: 0, limit: 5},
        autoSync: true,

        sorters: [{
            property : 'age',
            direction:'ASC'
                    }],

        groupField: 'gender'

});

In my view I have defined columns:[] But I don't know where to call metachange function.

Can anyone tell me where to use metachange function and should I use metachange function of store or proxy?

score 1 · Answer 1 · answered Apr 27 '15 at 21:40

Generally you don't want to configure proxy on the model, that is only useful when you want to use standalone Model instances without a store.

Move the proxy config to the Store, and make the server respond to read requests with additional metadata object, which you can then use in the metachange event handler to configure the grid.

Using Reader metadata is the right way to do "dynamic" Grids.

How to implement Dynamic Grid in Extjs?

1 Answers1