Results 1 to 6 of 6

Thread: Dynamic fields and columns in a grid

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    15

    Default Answered: Dynamic fields and columns in a grid

    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?

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

  3. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

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

  4. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    15

    Default

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

    ExtJS code
    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 Code:
    <?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')            
            )
        )
    );

  5. #4
    Sencha User
    Join Date
    Aug 2012
    Posts
    92
    Answers
    6

    Default

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

  6. #5
    Sencha Premium Member
    Join Date
    Aug 2014
    Posts
    54
    Answers
    2

    Default

    The contoller

  7. #6

    Default

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •