PDA

View Full Version : cant use scroll in acordion layout IE8



birdface
7 Feb 2010, 11:24 PM
Hi, i'm just a biggener in ExtJS and I cna't make the scroller apper in any way ,
can any one help me ?

the is the code i am using :


//
// This is the main layout definition.
//
Ext.onReady(function(){
setTimeout(function(){
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
}, 250);

var workarea = {
id:'border-panel',
layout: 'border',
region: 'center',
bodyBorder: false,
defaults: {
animFloat: false,
split: true,
autoHide: false,
useSplitTips: true,
autoScroll: true
},
items: [{
title: '????? ',
contentEl: 'region_position_04',
collapsible: true,
region: 'north',
height: 250,
minSize: 75,
maxSize: 550,
cmargins: '0 0 0 0',
layout: 'fit'
},{
contentEl: 'region_position_05',
collapsible: false,
height: 250,
minSize: 75,
maxSize:300,
region: 'center',
margins: '0 0 0 0'
},{
collapsible: false,
height: 30,
minSize: 10,
contentEl:'bottom_area',
region: 'south',
margins: '0 0 0 0'
}]
};


var ProjectdetailsPanel = {
id: 'Projdetails-panel',
title:Ext.getDom('page-title').innerHTML ,
contentEl: 'region_position_07',
region:'north',
collapsible:true,
autoScroll: true,
border: false,
height:70,
minSize: 100,
maxSize: 500
};
var accordion = {
id: 'accordion-panel',
title: '??????',
titleCollapse: true,
collapsible:true,
collapseMode: 'mini',
layout: 'accordion',
region: 'east',
width:400,
minSize: 100,
maxSize: 500,
bodyBorder: false, // useful for accordion containers since the inner panels have borders already
bodyStyle: 'background-color:#DFE8F6', // if all accordion panels are collapsed, this looks better in this layout
defaults: {
autoScroll: true,
bodyStyle: 'padding:2px',
border: false
},
items: [{
title: '?? ???',
contentEl: 'region_position_01'
},{
title: '??????',
contentEl: 'region_position_02'
},{
title: '??????',
contentEl: 'region_position_06'
} ]
};

// Finally, build the main layout once all the pieces are ready. This is also a good
// example of putting together a full-screen BorderLayout within a Viewport.
new Ext.Viewport({
layout: 'border',
title: 'Ext Layout Browser',
items: [{
xtype: 'box',
region: 'north',
applyTo: 'header',
height: 20
},{
layout: 'border',
id: 'layout-browser',
region: 'center',
defaults: {
collapsible: true,
split: true,
margins: '1 1 1 1'
},
items: [accordion,ProjectdetailsPanel,workarea]
}
],
renderTo: Ext.getBody()
});

Ext.app.moveDeveloperToolbar = function() {
var dest = Ext.get('DeveloperToolbar');
if (dest) {
var els=Ext.select("table[summary='Developer Toolbar']",false);
els.each(function(el){
el.replace(dest);
})
}
}
/** any other stuff you want to include */
Ext.app.moveDeveloperToolbar();
});

Animal
8 Feb 2010, 1:14 AM
When you read this reply, take a look at your post.

Can you read it?

Anyway. As you see when you run an accordion example, it sizes the single active item to fit in the available space.

Is what you actually want an anchor layout Container containing a stack of



anchor '-' + Ext.getScrollBarWidth(),
collapsible: true,


Panels?

birdface
9 Feb 2010, 12:05 AM
Hi, thanks for your prompt response,
About my code I will attached it properly this time.
I’m also attaching two images of my application screen shots.
Accordion1.jpg shows that the vertical scroll exist and behaves as expected.
In the Accordion2.jpg you can see that the horizontal scroll is missing and as a result the vertical scroll gets “overflow:hidden”.
I’m not familiar with the ENCOR, can you instruct me how to implement this in my script?

thanks in advance,
iris hadar
IAA

Animal
9 Feb 2010, 12:40 AM
No clue what you're on about.

birdface
9 Feb 2010, 4:18 AM
hi, i simply cant get the horizontal scroll to appear when the accordion is resizing .
right panel.

thanks again ,
iris

jorgeandrems
17 Feb 2010, 11:50 AM
Try this: http://iwebpc.com/forum/showthread.php?t=92303&highlight=scroll+accordion