PDA

View Full Version : Tab Control Render only Active Tab



nikhilesh
3 Aug 2010, 5:39 AM
Hello All ,

Please help I'm trying to add two grid in tab control. It only render first active tab.
How do i render all control within TabPanel when page load :-/



var labelSeparator=''
var empDetTfSize = 108;//130;
var remarkTfWt = 575;
var tfHeight = 21;
var labelStyle="font-size:8pt;"
function scheduleCheckBox(val){
return '<input type="checkbox" id="chk'+val+'" />';
}

var schColModel = new Ext.grid.ColumnModel([
// {width:20, sortable: false,renderer: scheduleCheckBox ,locked: false, dataIndex: 'dayid' },
{header: "Days", width: 70, sortable: false, locked: false, dataIndex: 'days' },
{header: "Start Time", width: 80, sortable: false, locked: false, dataIndex: 'startTime',
editor: new Ext.form.TimeField({ width: empDetTfSize/2})},
{header: "End Time", width: 80, sortable: false, locked: false, dataIndex: 'endTime', editor: new Ext.form.TimeField({ width: empDetTfSize/2}) }
]);

var schDS = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'days'},
{name: 'startTime'},
{name: 'endTime'},
{name: 'dayid'}
])
});
var grdSchedule= new Ext.grid.EditorGridPanel({
store: schDS,
cm:schColModel,
height: 175,
border: true,
clicksToEdit: 1,
collapsible: true,
animCollapse: false,
trackMouseOver: false

});

var schColModel1 = new Ext.grid.ColumnModel([
// {width:20, sortable: false,renderer: scheduleCheckBox ,locked: false, dataIndex: 'dayid' },
{header: "Days", width: 70, sortable: false, locked: false, dataIndex: 'days' },
{header: "Start Time", width: 80, sortable: false, locked: false, dataIndex: 'startTime',
editor: new Ext.form.TimeField({ width: empDetTfSize/2})},
{header: "End Time", width: 80, sortable: false, locked: false, dataIndex: 'endTime', editor: new Ext.form.TimeField({ width: empDetTfSize/2}) }
]);

var schDS1 = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'days'},
{name: 'startTime'},
{name: 'endTime'},
{name: 'dayid'}
])
});
var grdSchedule1= new Ext.grid.EditorGridPanel({
store: schDS1,
cm:schColModel1,
height: 175,
border: true,
clicksToEdit: 1,
collapsible: true,
animCollapse: false,
trackMouseOver: false

});
var schData = [
['Sunday' , '' , '','0' ],
['Monday' , '' , '' ,'1'],
['Tuesday' , '' , '','2' ],
['Wednesday' , '' , '','3' ],
['Thursday' , '' , '','4' ],
['Friday' , '' , '' ,'5'],
['Saturday' , '' , '' ,'6'],
];

schDS.loadData(schData);
schDS1.loadData(schData);

var tabs = new Ext.TabPanel({
width:450,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items: [{
title:'Panel 1'
,defaults:{border:false, activeTab:0}
,items:[{
defaults:{layout:'fit'}
,items:[grdSchedule]
}]
},{
title:'Panel 2'
,defaults:{border:false, activeTab:0}
,items:[{
defaults:{layout:'fit'}

,items:[grdSchedule1 ]
}]
}]


});
var gridForm ;
Ext.onReady(function(){

Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
gridForm = new Ext.FormPanel({
id: 'company-form',
frame: true,
labelAlign: 'top',
// title: 'Employee',
bodyBorder: false,
border: false,
defaults: {bodyStyle:'padding:0px'},
bodyStyle:'padding:-10px',
autowidth: true,
labelWidth: 10,
// menu:mnuEmployeeScreen,
//labelWidth: 10,
//layout: 'column', // Specifies that the items will now be arranged in columns
items: [ tabs],
renderTo: document.getElementById('divEmployeeApplication')
});
});

Animal
3 Aug 2010, 5:48 AM
Why are you adding a Panel containing a Panel containing a grid?

Instead of just adding a grid???

After fixing this, we can move on to your question.

Condor
3 Aug 2010, 5:58 AM
So your tabpanel should simply be:

var tabs = new Ext.TabPanel({
width:450,
activeTab: 0,
frame:true,
defaults: {autoHeight: true},
items: [grdSchedule, grdSchedule1],
deferredRender: false
});

nikhilesh
3 Aug 2010, 6:02 AM
Thx for reply...
my requirement is this when user click on panel 1 only first grid should show other should be hide. and same for panel 2
.Using Tabpanel i can fulfill this requirement

nikhilesh
3 Aug 2010, 6:05 AM
var tabs = new Ext.TabPanel({
width:450,
activeTab: 0,
frame:true,
defaults: {autoHeight: true},
items: [grdSchedule, grdSchedule1],
deferredRender: false
});

this code worked but
how do i add title?

Condor
3 Aug 2010, 6:12 AM
Simply specify the title in grdSchedule and grdSchedule1.

Animal
3 Aug 2010, 6:54 AM
And remove



defaults: {autoHeight: true},