Dynamic fields and columns in a grid

[messyOne]

Hi,

I want to build a grid with indefinite count of columns in ExtJS 4.1. The data should be passed by an AJAX request. At the moment I generate the ExtJS code with PHP but this anything but pretty.

Has anyone an example or anything for me?

[vietits]

Try this:

Ext.Ajax.request({
    ...
    success: function(response){
        var columnDefs = Ext.decode(response.responseText);
        var grid = Ext.create('Ext.grid.Panel', {
            ...
            columns: columnDefs,
            ...
        });
    }
});

[messyOne]

Thank you! It works. Here my sample code for anyone who has the same problem.

ExtJS code

Ext.onReady(function() {
       
       /**
         * create grid
         * 
         * @return void
         * @param column data in ExtJS format
         */
        var createGrid = function(columndata) {
            grid = Ext.create('Ext.grid.Panel', {
                store: store,
                columns: columndata,
                stripeRows: true,
                height:180,
                width:500,
                renderTo: 'grid-example',
                title:'Straw Hats Crew'
            });
        }
        
        /**
         * create store
         * 
         * @return void
         * @param field data in ExtJS format
         * @param values in ExtJS format
         */
        var createStore = function(fielddata, values) {
            store = Ext.create('Ext.data.ArrayStore', {
        fields: fielddata,
        data: values
            });
        }
        
        /**
         * get the data via ajax request
         * 
         * @return void
         */
        Ext.Ajax.request({
            url: 'data.php',
            success: function(response){
                var data = Ext.decode(response.responseText);
                
                createStore(data.fielddata, data.values);
                createGrid(data.columndata);
            }
        });
    
});

<?php

echo json_encode(
    array(
        'columndata' => array(
            array('id' => 'id', 'header' => 'ID', 'width' => 30, 'sortable' => true, 'dataIndex' => 'id'),
            array('header' => 'Name', 'width' => 100, 'dataIndex' => 'name'),
            array('header' => 'Position', 'width' => 100, 'dataIndex' => 'position'),
            array('header' => 'Ambition', 'width' => 250, 'dataIndex' => 'ambition')
        ),
        'fielddata' => array(
            array('name' => 'id', 'type' => 'int'),
            array('name' => 'name'),
            array('name' => 'position'),
            array('name' => 'ambition')    
        ),
        'values' => array(
            array(1,'Monkey D Luffy','Captain','I will become the pirate king'),
            array(2,'Roronoa Zoro','Swordman','Become the greatest swordman'),
            array(3,'Sanji','Cook','Find all blue'),
            array(4,'Usopp','Sniper','Become the greatest warrior'),
            array(5,'Nami','Navigator','Draw map of the world')            
        )
    )
);

[alex9311]

If you were coding in MVC, where would the Ajax request code go?

[DeanSheppard]

The contoller

[Inaamullah]

can any body provide a fiddle for adding a grid inside a grid column?