EXTjs - Eval multi json elements

Question

Hi, I want to take some data from the server and eval it.
if i eval 1 element in the json, it works fine, but if i eval more, i get an error
this is the operation (Using jquery for the ajax):

  ,getColsFromServer : function(){
    return [new Ext.grid.RowNumberer(),
          Ext.util.JSON.decode('{"id":"id","dataIndex":"id","header":"ID","width":"20","sortable":"true","editor":{"xtype":"textfield","allowBlank":"false"}},{"dataIndex":"email","header":"Title","width":"120","sortable":"true","editor":{"xtype":"textfield","allowBlank":"false"}}')//,{"id":"pixels","dataIndex":"pixels","header":"pixels","width":"120","sortable":"true","editor":{"xtype":"textarea","allowBlank":"false"}})
           ];
    }

if you take a look, i have 2 columns id+email. using 2 columns return error: this.config[col] is undefined
[Break on this error] return this.config[col].width;

usind one column - works fine.

this is the context: i am tring to build my own grid object so this is the usage:

var grid = new Ext.grid.GridPanel({
              loadMask: true,
            store: store,
            margins: '0 5 5 5',
            autoExpandColumn: 'id',
            plugins: [editor],

            tbar: minisites.getTopBar(editor,store,grid),

            bbar: minisites.getPagingBar(store , 1),

            columns: minisites.getCols()// THIS FUNCTION WILL RETURN THE OBJ FROM THE SERVER USING SYNCED AJAX REQUEST
        });

Any idea?

Answer 1

If you want to eval more than one object, you should place them inside an array. For example:

Ext.util.JSON.decode('[{"id":"id","dataIndex":"id","header":"ID","width":"20","sortable":"true","editor":{"xtype":"textfield","allowBlank":"false"}},{"dataIndex":"email","header":"Title","width":"120","sortable":"true","editor":{"xtype":"textfield","allowBlank":"false"}}]')

edit:

If you want to return a hash to access each item by a name ("id" and "email" if I got it right), you should do this:

Ext.util.JSON.decode('{ "id": {"id":"id","dataIndex":"id","header":"ID","width":"20","sortable":"true","editor":{"xtype":"textfield","allowBlank":"false"}}, "email": {"dataIndex":"email","header":"Title","width":"120","sortable":"true","editor":{"xtype":"textfield","allowBlank":"false"}}}')

edit #2:

In this context, "getColsFromServer" should return the array of columns like this:

getColsFromServer : function(){
    return Ext.util.JSON.decode('[{"id":"id","dataIndex":"id","header":"ID","width":"20","sortable":"true","editor":{"xtype":"textfield","allowBlank":"false"}},{"dataIndex":"email","header":"Title","width":"120","sortable":"true","editor":{"xtype":"textfield","allowBlank":"false"}}]');
    }

Answer 2

I suspect that your column definition is not correct. If you change your code for this, what gets shown in the console ?

var col = minisites.getCols();// THIS FUNCTION WILL RETURN THE OBJ FROM THE SERVER USING SYNCED AJAX REQUEST
console.dir(col);
var grid = new Ext.grid.GridPanel({
              loadMask: true,
            store: store,
            margins: '0 5 5 5',
            autoExpandColumn: 'id',
            plugins: [editor],

            tbar: minisites.getTopBar(editor,store,grid),

            bbar: minisites.getPagingBar(store , 1),

            columns: col
        });