[SOLVED]When to run doLayout to avoid scrollbars in tab ?

Posted in xn--kfs74mzzid01b.com edit by rose on January 9th, 2009

I have a tabPanel in center region.

On the 2nd tab there is a panel with 3 regions. When i resize those panels (hilighted in green) scrollbars are showing up (hilighted in red) on the tab and it shows blank space below hte panels too...

I want to run doLayout and avoid this.

ive set

layoutOnTabChange : true,

on the tabPanel which nicely adjust the panel, but only when i change the tab.

So i added

'bodyresize':{
fn: function(){
Ext.getCmp('propDetailsId').doLayout(true);
// propDetailsId > id of the 2nd tab
}
}

on the panel (hilighed in pink circle)

but it gives following error

this.layout.layout is not a function
http://..../ext-2.2/ext-all-debug.js
Line 14204

How can i avoid this eror.. please help

Tab Panel :

var _tabPanel = new Ext.TabPanel({
id: '_tabPanelId',
activeTab: 0,
enableTabScroll:true,
deferredRender:false,
labelWidth: 100,
defaults: {autoScroll:true, bodyStyle:'padding:0px;', labelAlign:'right'},
layoutOnTabChange : true,
tbar:['->',
{
id:'idLog',
text: 'Logout '+_loggedUser+'',
iconCls:'logout-icon',
handler: _logOut
}
],
anchor: '100% 0',
items:[{
title: 'Welcome',
id:'welcomeId',
layout:'form',
iconCls:'review-icon',
autoScroll:true,
bodyStyle:'padding:0px;',
html:'',
masked:false,
listeners:{
'activate':{
fn: function(){
// some code
}
},
'afterlayout':{
fn: function(){
// some code
}
}
}
}
]
});

Panel Layout:
var _innerPanel = new Ext.Panel({
title:pNm,
id:'propDetailsId',
layout:'border',
border:false,
defaults:{bodyStyle:'padding:0px'},
autoScroll:false,
closable: true,
items:[_sumGp,{
title:'Graph',
id:'graphId',
iconCls:'graph-icon',
margins: '5 5 0 0',
region:'east',
layout:'form',
frame:false,
border:true,
width:200,
split:true
},_revGP],
listeners:{
'activate':{
fn: function(){
// some code
}
}
}
}
});

var _showCompPropGP = _tabPanel.add(_innerPanel).show();

var _revGP = new Ext.grid.GridPanel({
title: 'Reviews from '+stDt+' to '+enDt+'',
id:'revGP',
iconCls: 'review-icon2',
margins: '0 5 5 5',
region:'south',
layout:'form',
frame:false,
border:true,
height:280,
split:true,
store: _revStore,
loadMask: {msg:'Loading Reviews ...'},
plugins:_exPander,
cm: new Ext.grid.ColumnModel([
_exPander,
{id:'idRd',header: "Review Date",width:100,sortable: true, align:'center', dataIndex: 'review_date'},
{id:'idCha',header: "Channel Name",width:100,sortable: true, dataIndex: 'channel_name'},
{id:'idRev',header: "Review Title",width:100,sortable: true, dataIndex: 'review_title'},
{id:'ideme',header: "eMarketingEye Rating",width:150,sortable: true, dataIndex: 'eme_rating'}
]),
stripeRows: true,
autoExpandColumn: 'idRev'
});

var _sumGp = new Ext.grid.GridPanel({
title: 'Review Summary from '+stDt+' to '+enDt+'',
id:'sumGP',
iconCls: 'review-icon2',
margins: '5 0 0 5',
region:'center',
layout:'form',
frame:false,
border:true,
store: _sumStore,
loadMask: {msg:'Loading Review Summary...'},
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{id:'idCha',header: "Channel Name",width:100,sortable: true, dataIndex: 'channel_name'}
].concat(_emeRatings)),
stripeRows: true,
autoExpandColumn: 'idCha',
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: _sumStore,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});

Where did you remove these things from? defaults overrides settings when you add instantiated Components, so the TabPanel should NOT use a default of autoScroll true because you are adding size-managing layouts to it which should not have scrolling.

You need to step back and think about the very simple principles behind a page layout. It's not rocket science, it's nothing but good old fashioned HTML.

I have a viewport (this is common in my program). Which i keep in a seperate JS file.

I define frmPanel, which consist of a grid/tabpanel etc ... in each screen in my proram

frmPanel = new Ext.FormPanel({
id: 'frmPanelId',
name: 'welCome',
method: 'POST',
region:'center',
labelWidth: 100,
border:false,
margins:'5 0 5 0',
items: [_tabPanel],
});

Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '/hotelreview/pic/s.gif';

var _compArr = new Array();
_compArr.push(frmPanel_1);

try{
if (""+frmPanel_2+""!="undefined"){
_compArr.push(frmPanel_2);
}
}catch(ex){

}

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:40
}),{
id:'east-panel',
region:'east',
title: 'Refine Search',
collapsible: true,
split:true,
width: 170,
maxSize: 400,
layout:'fit',
margins:'5 5 5 0',
items:_compArr
},{
region:'west',
id:'west-panel',
title:'Main Menu',
split:true,
width: 150,
maxSize: 400,
collapsible: true,
margins:'5 0 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
contentEl: 'west1',
title:'Navigation',
border:false,
iconCls:'nav'
},{
contentEl: 'west2',
title:'Setup',
border:false,
iconCls:'nav'
}]
},frmPanel]
});

try{
tBar = Ext.getCmp('frmPanelId').findByType('tabpanel')[0].getTopToolbar();
tBar.addSeparator();
tBar.addButton({
id:'idLogout',
text: 'Home',
iconCls:'home-icon',
handler: function(){
document.location='main.php';
}
})
}catch(ex){

}

});

This really shouldn't be required. The layout should resize the panels automatically.

Could you post your tabpanel layout?

I set the hidemode property as you pointed out. (still blank space shows up when resizing frame. pls see the attached screen. space is hilighted)
But if i remove

anchor: '100% 0',

from _tabPanel, 1st tab messes up.

have following events ..on tab 1 (i have not shown it in previous post)

listeners:{
'activate':{
fn: function(){
if (_activate){
_filterProperty();
_activate=false;
}
Ext.getCmp('idFilterPanel_2').hide();
Ext.getCmp('idFilterPanel_1').show();
}
},
'afterlayout':{
fn: function(){
var _bx = Ext.get('welcomeId').getBox();
if (!this.masked && _bx.height>0){
Ext.get('welcomeId').mask('Loading Client Data ...', 'x-mask-loading');
this.masked=true;
}
}
}
}

function _filterProperty(){

var _actId = _tabPanel.getActiveTab().getId();

__dt = function (dt){
var yr = dt.getFullYear();
var mm = ((dt.getMonth()+1).toString().length==1)? "0"+(dt.getMonth()+1)+"" : ""+(dt.getMonth()+1)+"";
var dd = (dt.getDate().toString().length==1)? "0"+dt.getDate()+"" : ""+dt.getDate()+"";
return ""+yr+"-"+mm+"-"+dd+"";
}

if (_actId=="propDetailsId"){

__ff = function(vl){
return frmPanel_1.form.findField(vl).getValue();
}

__ff2 = function(vl){
return frmPanel_2.form.findField(vl).getValue();
}

var _sh1 = __ff('filtProj');
var _sh2 = __ff('filtProp');
var _sh3 = __dt(__ff('date_from'));
var _sh4 = __dt(__ff('date_to'));
var _sh5 = __ff2('filtChan');

moredata(_sh1,_sh2,_sh3,_sh4,_sh5);

}else if (_actId=="welcomeId"){

__ff = function(vl){
return frmPanel_1.form.findField(vl).getValue();
}

var _sh1 = __ff('filtProj');
var _sh2 = __ff('filtProp');
var _sh3 = __dt(__ff('date_from'));
var _sh4 = __dt(__ff('date_to'));

Ext.getCmp('welcomeId').body.update('');

Ext.Ajax.request({
disableCaching: true,
method: 'POST',
url: 'welcome.php',
success: function(response){
Ext.get('welcomeId').unmask();
Ext.getCmp('welcomeId').body.update(response.respo nseText);
},
params: {projId:_sh1,propId:_sh2,from:_sh3,to:_sh4}
});
}
}

Thanks

And there it is!

frmPanel = new Ext.FormPanel({
id: 'frmPanelId',
name: 'welCome',
method: 'POST',
region:'center',
labelWidth: 100,
border:false,
margins:'5 0 5 0',
items: [_tabPanel],
});

The TabPanel will not be managed for size because you have not specified a size-managing layout.

When i increase the height of _revGP, blank space comes .. as hilighted on the image

from _tabPanel, autoScroll:true removed.

defaults: {autoScroll:true,bodyStyle:'padding:0px;', labelAlign:'right'},

I already had autoScroll:true on tab 1 and autoScroll:false on tab 2. But autoScroll:false on tab 2 didnt work because of the autoScroll:true, in the _tabPanel

I have included the whole code related to my screen.

I really appreciate the help you have given
(Ive been trying to fix this issue for more than a week)

Js file related to my screen:

var _projArr = [{name: 'proj_id'},{name: 'proj_codeid'},{name: 'proj_name'}];
var _chanArr = [{name: 'cha_id'},{name: 'cha_code_id'},{name: 'cha_name'}];
var _propName="";

var _projStore = new Ext.data.SimpleStore({
fields: _projArr,
data: Ext.emehr_ns.allUserProjects,
autoLoad:true
});

var _proxy = new Ext.data.HttpProxy({
url: 'get_store.php'
});

var _chRec = Ext.data.Record.create(_chanArr);

var _chaReader = new Ext.data.JsonReader({
root: 'myDir',
totalProperty: 'totalCount',
},_chRec
);

var _chaStore = new Ext.data.Store({
proxy: _proxy,
reader: _chaReader,
baseParams:{scr: "projectChannels", prId:_projStore.getRange()[0].get('proj_id')},
autoLoad:true
});

var _projChan = new Ext.form.ComboBox({
hiddenName:'filtChan',
id:'idfiltChan',
store: _chaStore,
fieldLabel: 'Channel Name',
displayField:'cha_name',
valueField:'cha_id',
mode:'local',
emptyText:'Select a Channel...',
editable:false,
triggerAction: 'all',
width:150,
listeners:{
'select':{
fn: function (_combo,_rcd,_index){

__ff = function(vl){
return frmPanel_1.form.findField(vl).getValue();
}

__dt = function (dt){
var yr = dt.getFullYear();
var mm = ((dt.getMonth()+1).toString().length==1)? "0"+(dt.getMonth()+1)+"" : ""+(dt.getMonth()+1)+"";
var dd = (dt.getDate().toString().length==1)? "0"+dt.getDate()+"" : ""+dt.getDate()+"";
return ""+yr+"-"+mm+"-"+dd+"";
}

var _sh1 = __ff('filtProj');
var _sh2 = _rcd.get('cha_id');
var _sh3 = __ff('filtProp');
var _sh4 = __dt(__ff('date_from'));
var _sh5 = __dt(__ff('date_to'));

}
}
}
});

var _selProj = new Ext.form.ComboBox({
hiddenName:'filtProj',
store: _projStore,
fieldLabel: 'Project Name',
displayField:'proj_name',
valueField:'proj_id',
mode:'local',
emptyText:'Select a Project...',
editable:false,
triggerAction: 'all',
width:150,
listeners:{
'select':{
fn: function (_combo,_rcd,_index){
_propStore.baseParams.projId = _rcd.get('proj_codeid');
_propStore.load();
_chaStore.baseParams.prId = _rcd.get('proj_id');
_chaStore.load();

}
}
},
value:_projStore.getRange()[0].get('proj_id')
});

var _tmpDate = new Date();
_tmpDate.setDate(_tmpDate.getDate()-30);

var _frmDate = new Ext.form.DateField({
fieldLabel: 'Starting From',
name: 'date_from',
width:150,
readOnly: true,
allowBlank:false,
format:'d/m/Y',
value: _tmpDate
});

var _toDate = new Ext.form.DateField({
fieldLabel: 'Ending On',
name: 'date_to',
width:150,
readOnly: true,
allowBlank:false,
format:'d/m/Y',
value: new Date()
})

var _toDate1 = new Ext.form.DateField({
fieldLabel: 'Ending On',
name: 'date_to1',
width:150,
readOnly: true,
allowBlank:false,
format:'d/m/Y',
value: new Date()
})

var _proxy = new Ext.data.HttpProxy({
url: 'get_store.php'
});

var _grRec = Ext.data.Record.create([
{name: 'prop_id', mapping: 'id'},
{name: 'prop_codeid', mapping: 'code_id'},
{name: 'prop_name', mapping: 'prop_name'}
]);

var _propStoreReader = new Ext.data.JsonReader({
root: 'myDir'
},_grRec
);

var _propStore = new Ext.data.Store({
proxy: _proxy,
reader: _propStoreReader,
baseParams:{scr: "projectPropCombo" , projId:_projStore.getRange()[0].get('proj_codeid')},
listeners:{
'load':{
fn: function(_st){
Ext.getCmp('filtPropId').enable();
}
},
'beforeload': {
fn: function(_st){
Ext.getCmp('filtPropId').disable();
}
}
},
autoLoad: true
});

var _selProp = new Ext.form.ComboBox({
id:'filtPropId',
name:'filtPropName',
hiddenName:'filtProp',
store: _propStore,
fieldLabel: 'Property Name',
displayField:'prop_name',
valueField:'prop_id',
mode:'local',
emptyText:'Select a Property...',
editable:false,
triggerAction: 'all',
width:150,
disabled:true,
listeners:{
'enable':{
fn: function (_st,_rec){
_st.setValue(_propStore.getRange()[0].get('prop_id'));
_propName=_propStore.getRange()[0].get('prop_name');
}
},
'select':{
fn: function(_st,_rec){
_propName=_rec.get('prop_name');
}
}
}
});

var _wcText="Welcome to eMarketingeye Hotel Review System";

if (Ext.emehr_ns.isAdmin){
_wcText+=""+
""+
""+
""+
""+
""+
""+
""+
""+
""+
""+
""+
""+
"

	Manage User Profiles
	Manage Projects
	Manage Reviews

";
}

var _activate=true;
var frmPanel = new Ext.TabPanel({
id: '_tabPanelId',
activeTab: 0,
region:'center',
margins:'5 0 5 0',
enableTabScroll:true,
deferredRender:false,
labelWidth: 100,
defaults: {autoScroll:true, bodyStyle:'padding:0px;', labelAlign:'right'},
layoutOnTabChange : true,
tbar:['->',
{
id:'idLog',
text: 'Logout '+_loggedUser+'',
iconCls:'logout-icon',
handler: _logOut
}
],
anchor: '100% 0',
items:[{
title: 'Welcome',
id:'welcomeId',
layout:'form',
iconCls:'review-icon',
autoScroll:true,
bodyStyle:'padding:0px;',
html:'',
masked:false,
listeners:{
'afterlayout':{
fn: function(){
var _bx = Ext.get('welcomeId').getBox();
if (!this.masked && _bx.height>0){
if (_activate){
_filterProperty();
_activate=false;
}
Ext.getCmp('idFilterPanel_2').hide();
Ext.getCmp('idFilterPanel_1').show();
Ext.get('welcomeId').mask('Loading Client Data ...', 'x-mask-loading');
this.masked=true;
}
}
}
}
}
]
});

frmPanel_1 = new Ext.FormPanel({
id:'idFilterPanel_1',
labelAlign: 'top',
bodyStyle:'padding:7px 10px',
name: 'projectFilterFrm1',
method: 'POST',
labelWidth: 75,
border:false,
hidden:false,
hideMode:'offsets',
items: [_selProj,_selProp,_frmDate,_toDate],
tbar:[{
id:'filtBut',
text: 'Filter',
iconCls:'filter-icon',
handler: _filterProperty
},'-',{
id:'remFiltBut',
text: 'Remove Filter',
iconCls:'filter-icon',
handler: _filterProperty
}]
});

frmPanel_2 = new Ext.FormPanel({
id:'idFilterPanel_2',
labelAlign: 'top',
bodyStyle:'padding:7px 10px',
name: 'projectFilterFrm2',
method: 'POST',
labelWidth: 75,
border:false,
hidden:false,
hideMode:'offsets',
items: [_projChan],
tbar:[{
id:'filtBut2',
text: 'Filter',
iconCls:'filter-icon',
handler: _filterProperty
},'-',{
id:'remFiltBut2',
text: 'Remove Filter',
iconCls:'filter-icon',
handler: _filterProperty
}]
});

function _filterProperty(){

var _actId = frmPanel.getActiveTab().getId();

__dt = function (dt){
var yr = dt.getFullYear();
var mm = ((dt.getMonth()+1).toString().length==1)? "0"+(dt.getMonth()+1)+"" : ""+(dt.getMonth()+1)+"";
var dd = (dt.getDate().toString().length==1)? "0"+dt.getDate()+"" : ""+dt.getDate()+"";
return ""+yr+"-"+mm+"-"+dd+"";
}

if (_actId=="propDetailsId"){

__ff = function(vl){
return frmPanel_1.form.findField(vl).getValue();
}

__ff2 = function(vl){
return frmPanel_2.form.findField(vl).getValue();
}

var _sh1 = __ff('filtProj');
var _sh2 = __ff('filtProp');
var _sh3 = __dt(__ff('date_from'));
var _sh4 = __dt(__ff('date_to'));
var _sh5 = __ff2('filtChan');

moredata(_sh1,_sh2,_sh3,_sh4,_sh5);

}else if (_actId=="welcomeId"){

__ff = function(vl){
return frmPanel_1.form.findField(vl).getValue();
}

var _sh1 = __ff('filtProj');
var _sh2 = __ff('filtProp');
var _sh3 = __dt(__ff('date_from'));
var _sh4 = __dt(__ff('date_to'));

Ext.getCmp('welcomeId').body.update('');

if (Ext.getCmp('welcomeId').getBox().height>0){
Ext.get('welcomeId').mask('Loading Client Data ...', 'x-mask-loading');
}

Ext.Ajax.request({
disableCaching: true,
method: 'POST',
url: 'welcome.php',
success: function(response){
Ext.get('welcomeId').unmask();
Ext.getCmp('welcomeId').body.update(response.respo nseText);
},
params: {projId:_sh1,propId:_sh2,from:_sh3,to:_sh4}
});
}
}

function moredata(prjId,proId,pNm,stDt,enDt,chId){

if (""+Ext.getCmp('simplestbl')+""!="undefined"){
frmPanel.setActiveTab('simplestbl');

var _bp1= Ext.getCmp('sumGP').getStore().baseParams;
_bp1.pjId = prjId;
_bp1.prId = proId;
_bp1.sdt = stDt;
_bp1.edt = enDt;
_bp1.cId = chId;

Ext.getCmp('sumGP').getStore().load();

var _bp2= Ext.getCmp('revGP').getStore().baseParams;
_bp2.prId = proId;
_bp2.from = stDt;
_bp2.to = enDt;
_bp2.cId = chId;

Ext.getCmp('revGP').getStore().load();

return;
}

_propName=pNm;
var _sumArr=[{name: "channel_name"}];
var _emeRatings = new Array();

for (p=0; p _emeRatings[p] = {id:'idRate'+p+'',header: Ext.emehr_ns.emeReviewRatings[p][1],width:60, align:'center', sortable: true, dataIndex: 'rate_'+(p+1)+''}
_sumArr.push({name: 'rate_'+(p+1)+''});
}
_emeRatings[p] = {id:'idTotal',header: 'Total',width:60, align:'center', sortable: true, dataIndex: 'tot_rate'}
_sumArr.push({name: 'tot_rate'});

var _sumRec = Ext.data.Record.create(_sumArr);

var _sumReader = new Ext.data.JsonReader({
root: 'myDir',
totalProperty: 'totalCount',
},_sumRec
);

var _proxy = new Ext.data.HttpProxy({
url: 'get_store.php'
});

var _sumStore = new Ext.data.Store({
proxy: _proxy,
reader: _sumReader,
baseParams:{scr: "revSummary", pjId:prjId, prId:proId, sdt:stDt, edt:enDt, cId:chId},
autoLoad:true
});

var _sumGp = new Ext.grid.GridPanel({
title: 'Review Summary from '+stDt+' to '+enDt+'',
id:'sumGP',
iconCls: 'review-icon2',
margins: '5 0 0 5',
region:'center',
layout:'form',
frame:false,
border:true,
store: _sumStore,
loadMask: {msg:'Loading Review Summary...'},
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{id:'idCha',header: "Channel Name",width:100,sortable: true, dataIndex: 'channel_name'}
].concat(_emeRatings)),
stripeRows: true,
autoExpandColumn: 'idCha',
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: _sumStore,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});

//////////////////////////////////////////////

var _revArr=[{name: "review_date"},
{name: "channel_name"},
{name: "review_title"},
{name: "review_url"},
{name: "eme_rating"},
{name: "template"}
];

var _revRec = Ext.data.Record.create(_revArr);

var _revRec = Ext.data.Record.create(_revArr);

var _revReader = new Ext.data.JsonReader({
root: 'myDir',
totalProperty: 'totalCount',
},_revRec
);

var _revProxy = new Ext.data.HttpProxy({
url: 'get_store.php'
});

var _revStore = new Ext.data.Store({
proxy: _revProxy,
reader: _revReader,
baseParams:{scr: "propReviews" ,from: stDt ,to: enDt, prId: proId, cId:chId},
autoLoad:true
});

var _exPander = new Ext.grid.RowExpander({
tpl : new Ext.Template(
"{template}

You do not need to.

You need to nest your Components correctly. That is all. If you specify layouts correctly, where you want size managed it works. You have a bug in your code that we can't see because you haven't shown us..

I removed the form which contains the _tabPanel. and added _tabPanel to the 'center' region directly. now there is no form.

Still the issue is there ... :s

I've set
layoutOnTabChange : true, in _tabPanel. once you change the tab and come back again it nicely fix the issue in the layout.

how can i fire that event when i increase the size of a panel ?

Ext.getCmp('welcomeId').body.update(response.respo nseText);

This returns HTML code consist of 8 dynamic flash graphs with xml input.

one of ext support member said its better to include flash using DOM (in a previous thred i posted). Its not clear for me how to do that.

I removed
autoScroll:true

Now it doesn't show the scrollbars.

once you set

autoScroll:true

on a tab , doesn't it override the default settings .. ?

What is anchor: '100% 0' doing in the _tabPanel config?

_innerPanel needs hideMode:'offset' (all cardlayout panels)

graphId and _revGPn need hideMode:'offset' (all collapsible panels)

Do not use autoScroll:true in the defaults of your TabPanel unless you want that.

Mostly you don't. A Panel which uses a size-managing layout (eg border) should be autoScroll: false.

Your 'east' Panel is layout:'fit', yet you use an Array of items. Layout:'fit' manages one single child item.

I'm worried that you use innerHTML:

Ext.getCmp('welcomeId').body.update(response.respo nseText);

What's in that responseText?

That's because you have a bug in your code in which you are adding a Panel inside a no-layout Panel.

How do you insert _tabPanel into your layout (the anchor really should be required) ?

@Animal: Probably, but not in the code he posted.

#If you have any other info about this subject , Please add it free.#

[SOLVED]When to run doLayout to avoid scrollbars in tab ?

Archives

Meta