PDA

View Full Version : Accordion in Viewport



aperez
5 Aug 2010, 9:09 AM
Hi, guys !!

I want put a accordion panel into viewport but when i put the accordion how to variable then the height of accordion and the height of center region, they are not equal. In contrast, if the accordion insert in mode 'xtype' the height's are equals, why?
I need execute the code in mode variable.

Thank's.

In mode variable:

Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '$VERSION_EXTJS$/resources/images/default/s.gif';
<!-- Accordion in mode variable -->
var acc = new Ext.Panel({
layout:'accordion'
,border:false
,defaults: {
bodyStyle: 'padding:15px'
,autoHeight: true
}
,layoutConfig: {
titleCollapse: false,
animate: false,
activeOnTop: false
}
,items:[{
title:'Acc 1'
,html: 'Contenido subpanel 1'
,border: true
},{
title:'Acc 2'
,html: 'Contenido subpanel 2'
,border: false
},{
title:'Acc 3'
,html: 'Contenido subpanel 3'
,border: false
}]
});

var v1 = new Ext.Viewport({
renderTo: Ext.getBody()
,layout: 'border'
,items: [{
region: 'center',
items: [acc]
}]
});

}); //end onReady

Show this:
21808

In mode 'xtype':


Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '$VERSION_EXTJS$/resources/images/default/s.gif';
<!-- Accordion in mode variable -->
var acc = new Ext.Panel({
layout:'accordion'
,border:false
,defaults: {
bodyStyle: 'padding:15px'
,autoHeight: true
}
,layoutConfig: {
titleCollapse: false,
animate: false,
activeOnTop: false
}
,items:[{
title:'Acc 1'
,html: 'Contenido subpanel 1'
,border: true
},{
title:'Acc 2'
,html: 'Contenido subpanel 2'
,border: false
},{
title:'Acc 3'
,html: 'Contenido subpanel 3'
,border: false
}]
});

var v1 = new Ext.Viewport({
renderTo: Ext.getBody()
,layout: 'border'
,items: [{
region: 'center',
xtype: 'accordion',
items:[{
title:'Acc 1'
,html: 'Contenido subpanel 1'
,border: true

},{
title:'Acc 2'
,html: 'Contenido subpanel 2'
,border: false

},{
title:'Acc 3'
,html: 'Contenido subpanel 3'
,border: false
}]
}]
});

}); //end onReady

Show this:
21809

aperez
5 Aug 2010, 11:19 PM
[ SOLVED ]

Simply, just put layout: 'fit' in the region of viewport.

{
region: 'center'
,layout: 'fit'
,items: [acc]
}

Condor
5 Aug 2010, 11:39 PM
Overnested! 'acc' should BE the center region.