Question

2

Creating a Dynamic Grid with ExtJS

rated 0 times [ 3] [ 1] / answers: 1 / hits: 28602 / 12 Years ago, tue, june 12, 2012, 12:00:00

I'm trying to make a Dynamic Grid class (where I do not know any information about the columns but they are given from the json response and the gird prepares itself accordingly). Here I have found exactly what I was looking for however it gives me an error:

me.model is undefined

me.setProxy(me.proxy || me.model.getProxy());

ext-all-debug.js (line 47323)

I have tried to add both proxy and model but I was not successful, I kept getting the same error.

Here is the ExtJS code that I'm working on:

 // ExtJS 4.1

 Ext.Loader.setConfig({

     enabled: true

 });

 Ext.Loader.setPath('Ext.ux', '../extjs-4.1.0/examples/ux');

 Ext.require([

     'Ext.grid.*',

     'Ext.data.*', ]);





 Ext.define('DynamicGrid', {

     extend: 'Ext.grid.GridPanel',

     storeUrl: '',

     enableColumnHide: true,

     initComponent: function () {

         var store = new Ext.data.Store({

             url: this.storeUrl,

             reader: new Ext.data.JsonReader(),

             autoLoad: true,

             scope: this,

             listeners: {

                 scope: this,

                 metachange: function (store, meta) {

                     if (typeof (store.reader.jsonData.columns) === 'object') {

                         var columns = [];

                         /**

                          * Adding RowNumberer or setting selection model as CheckboxSelectionModel

                          * We need to add them before other columns to display first

                          */

                         if (this.rowNumberer) {

                             columns.push(new Ext.grid.RowNumberer());

                         }

                         if (this.checkboxSelModel) {

                             columns.push(new Ext.grid.CheckboxSelectionModel());

                         }

                         Ext.each(store.reader.jsonData.columns, function (column) {

                             columns.push(column);

                         }); // Set column model configuration 

                         this.getColumnModel().setConfig(columns);

                         this.reconfigure(store, this.getColumnModel());

                     }

                 }

             }

         });

         var config = {

             title: 'Dynamic Columns',

             viewConfig: {

                 emptyText: 'No rows to display'

             },

             loadMask: true,

             border: false,

             stripeRows: true,

             store: store,

             columns: []

         }

         Ext.apply(this, config);

         Ext.apply(this.initialConfig, config);

         DynamicGrid.superclass.initComponent.apply(this, arguments);

     },

     onRender: function (ct, position) {

         this.colModel.defaultSortable = true;

         DynamicGrid.superclass.onRender.call(this, ct, position);

     }

 });



 Ext.onReady(function () {



     Ext.QuickTips.init();



     var grid = Ext.create('DynamicGrid', {

         storeUrl: 'http://300.79.103.188/ApplicationJs/jsontest.json'

     });



     var depV = Ext.create('Ext.Viewport', {

         title: 'Departman Tanımları',

         layout: 'fit',

         items: grid

     }).show();



 });

What I have to do inorder to make it run?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

laytonlamontm

Add To Favorites

Follow

Total Points: 745

Total Questions: 130

Total Answers: 130

Location: Cambodia

Member since Thu, Oct 7, 2021

3 Years ago

answered 12 Years ago gerardob · Accepted Answer

That is a pretty old post so you may have more workarounds coming soon, but that error is because you do not have a model config or fields config defined for your store. The model will also need to be defined dynamically if you want your grid created with json data alone.

As far as I know, the fields config is pretty forgiving, so you may be able to just set this with a maximum possible number of fields like 20 or 30 or so, but the field names would have to match with the json field names for it to be usable. I.e. if you use:

var store = new Ext.data.Store({

    url: this.storeUrl,

    reader: new Ext.data.JsonReader(),

    fields: [

        'column1',

        'column2',

        'column3',

        'column4',

        'column5',

        // etc

    ],

Then your json data would need to come from the database like:

[{column1:data1, column2:data2, // etc

Another thing I've done in the past is to have a reference store loaded first which contained a record with the name and datatype for each of the dynamic fields (meta data). Then I iterated through this reference store and added a model field and the column definition at each iteration, then I loaded the grid's store which now had the correct data model defined and the grid would have the correct column defintion.

You may have do something like that if you don't want to make your database return generic column names as covered above, because I don't know how you will load the data into your grid store initially before you give it a data model to use.

UPDATE 13 Jun:

I haven't tried it yet, but I just came across this in the 4.1 docs (scroll down to the Response MetaData section in the intro). It describes using metaData in your json response to accomplish exactly what you are going for with a dynamic model and grid columns.

You would probably still have to do the iteration I described above once you process the metaData, but you can use it to cut out that additional request to get the meta data.

I suppose if your field configuration doesn't change with each request then it would be easier to simply to do the extra request at the beginning, but if you want something really dynamic this would do it.