PDA

View Full Version : Adding a grid to a viewport region after viewport creation



peteedley
3 Jun 2012, 2:50 PM
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.


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.

Grolubao
3 Jun 2012, 11:53 PM
Did you try using viewport.doLayout()?

peteedley
4 Jun 2012, 12:05 AM
Dohhh
Thanks I didn't :)