PDA

View Full Version : borderlayout split no resize



nicobarten
26 Jan 2013, 2:07 AM
Hi all,

I have a border layout, with the following:



title: 'Media',
layout: 'border',
margin: '5 0 0 0',

items: [
{
xtype: 'categoryList',
region: 'west',
split: true,
collapsible: false,
border: false,
width: 200
},
{
xtype: 'panel',
title: 'Afbeeldingen',
region: 'center',
layout: 'fit',
border: false,
html: 'rechts'
},
{
xtype: 'panel',
title: 'Voorbeeld',
region: 'east',
split: true,
splitterResize: false,
collapsible: false,
border: false,
width: 500
}]


Now what i want, is a splitter on the border with the center panel and the east panel, but so that the user is unable to resize it. So i did:



split: true,
splitterResize: false


This didn't work. I fixed this in the ExtJS code (http://www.sencha.com/forum/showthread.php?254887-splitterResize-bug) so the user is unable to resize it. However, if i go over it with the mouse, the mousecursor still changes (which i don't want) and the color changes too. So i did the following css change:



.x-splitter-over
{
background: rgba(0, 0, 0, 0) !important;
cursor: default !important;
}


Although it removes the color change on mouseover, i can still see sometimes a 'flicker' of the mousepointer change. Also, i want that style only when i have the property 'splitterResize' on false. So i guess it's better to find the mouseover event in the js code - but i cannot find it.

Is there a way to change this? Or is there another way using 'split: false' to get the same fat border between the panels?

nothing
28 Jan 2013, 4:37 AM
Try the properties:


resizable

and/or


hidden

I manipulate my splitter also with:


listeners: {
afterrender: function() {
this.splitter.width = 2;
}
}