1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    4
    Vote Rating
    0
    peteedley is on a distinguished road

      0  

    Default Adding a grid to a viewport region after viewport creation

    Adding a grid to a viewport region after viewport creation


    ok I am trying to build the view port with a dropdown in it's toolbar. This dropdown runs a function on select that generates a grid I then want to insert that grid into the center region of the viewport after many different attempts this is the current state of my code.

    Code:
    var reportForm = function(){    var Pupil = Ext.data.Record.create([
            'rolenumber',
            'name'
        ]);
    
    
        var pupils = new Ext.data.Store({
            url:'controllers/getgroup.php',
            baseParams :{
                group : Ext.getCmp('groupSelect').getValue()
            },
            reader : new Ext.data.JsonReader({
                root : 'rows',
                idProperty : 'rolenumber'
            },Pupil),
            autoLoad: true
        });
    
    
        grid = new Ext.grid.GridPanel({
            store : pupils,
            colModel : new Ext.grid.ColumnModel({
                columns : [
                    {header : "Role Number", dataIndex: 'rolenumber'},
                    {header : "Pupil Name", dataIndex: 'name'}
                 ]
            })
        });
    
    
        var content = Ext.getCmp('mainArea');
        content.removeAll();
        content.add(grid);
    
    
    };
    
    
    var mainView = function(user){
        var viewport = new Ext.Viewport({
            layout:"border",
            items: [{
                region : 'north',
                height : 27,
                xtype:'toolbar',
                items: [{
                    html : 'Welcome '+user.firstname+' '+user.surname
                },
                    ' ',
                ,{
                    html: 'Please select the group you wish to write reports for'
                },{
                    xtype:'combo',   
                    id: 'groupSelect',     
                    mode: 'local',
                    width: 150,
                    triggerAction:'all',
                    editable: false,
                    store: ['U1','U2','U3','U4','U5'],
                    listeners: {
                        select : reportForm
                    }
                }]
            },{
                region : 'center',
                id : 'mainArea',
                layout: 'fit',
                xtype: 'container'
            }]
        });
    };
    
    
    Ext.onReady(function(){
        Ext.Ajax.request({
            url: 'controllers/userdetails.php',
            success: function(response, opts) {
                var obj = Ext.decode(response.responseText);
    
    
                if (obj.success){
                    mainView(obj.user);
                } else {
                    window.location = 'index.html';
                }
            },
            failure: function(response, opts) {
                Ext.Msg.alert('Warning','hmmmm somthings gone wrong please try reloading the page');
            }
        });
    });
    with this the viewport is created no problem at all but when I try to add the grid to the center region it never appears.

  2. #2
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Amsterdam, The Netherlands
    Posts
    245
    Vote Rating
    6
    Grolubao is on a distinguished road

      0  

    Default


    Did you try using viewport.doLayout()?

  3. #3
    Sencha User
    Join Date
    May 2011
    Posts
    4
    Vote Rating
    0
    peteedley is on a distinguished road

      0  

    Default


    Dohhh
    Thanks I didn't

Thread Participants: 1

Tags for this Thread