PDA

View Full Version : [4.1.0b2]BUG Ext.tree.Panel overflowX and overflowY have no effect



EZboy
16 Feb 2012, 10:13 AM
Hi,

overflowX/overflowY do not work in the tree.Panel.

How to reproduce: Just add "overflowY:'hidden'" to a tree.

Modified two tree example:



Ext.require(['*']);

Ext.onReady(function(){
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'get-nodes.php'
},
root: {
text: 'Ext JS',
id: 'src',
expanded: true
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
});

var tree = Ext.create('Ext.tree.Panel', {
id: 'tree',
store: store,
width: 250,
height: 300,
overflowY:'hidden',
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
appendOnly: true
}
},
renderTo: document.body
});

var store2 = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'get-nodes.php'
},
root: {
text: 'Custom Ext JS',
id: 'src',
expanded: true,
children: []
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
});

var tree2 = Ext.create('Ext.tree.Panel', {
id: 'tree2',
width: 250,
height: 300,
overflowY:'hidden',
store: store2,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
appendOnly: true
}
},
renderTo: document.body
});
});

mitchellsimoens
16 Feb 2012, 10:47 AM
Have you inspected the tree-body element? It has overflow-y : hidden.

EZboy
16 Feb 2012, 11:37 AM
Shouldn't that prevent vertical scrollbar to appear(scrollbar is still there)? Or am i missing something?

yvonatron
28 Mar 2013, 7:36 AM
Scroll bars are showing up for components that are exactly the right size and and should not see scroll bars e.g. a banner add and adding the following params does not force them away as they should. Need workaround for IE and Firefox. Chrome ok. Note that overflowX:'auto', did not work either.

Thank you.


overflowX:'hidden',
overflowY:'hidden',
autoScroll: false,

partial code snippet
note that xtype: "uxiframe", is of type iFrame

bodyPadding: '0 0 10 0',
items: [{
xtype: 'container',
height: '100%',
layout: {
type: 'vbox',
//pack: 'justify',
overflowX:'hidden'
},
width: 615,
padding: '10 0 0 10',
items: [{
xtype: "uxiframe",
name: 'banner',
margin: '0 0 20 0',
width: '100%',
height: 207,
overflowX:'hidden',
overflowY:'hidden',
autoScroll: false,
flex:1
},
........