PDA

View Full Version : Max Height for autoSizing of Component



nohaapav
25 Feb 2013, 4:14 AM
Hi guys,
i've created my own treecombo which extends TriggerField with autosizing for this component. I would like to create some criteria for autosizing like when height > 300 then use hardcoded height 300 and show vertical scrollbar. Is it somehow possible ? Reason for that is the fact that if i expand many nodes in tree then combo size becames bigger than actual page size is and user is unable to see many of nodes ..

initializaton of combo looks like:



initList: function() {
var root = new Ext.tree.AsyncTreeNode({
text: this.rootText
});

this.list = new Ext.tree.TreePanel({
rootVisible: true,
cls: this.treeCls,
autoScroll: true,
containerScroll: true,
loader: new Ext.tree.TreeLoader(),
floating: true,
autoSize: true,
listeners: {
click: this.onNodeClick,
scope: this
},
alignTo: function(el, pos) {
this.setPagePosition(this.el.getAlignToXY(el, pos));
}
});

this.list.setRootNode(root);
},


rest of code is not important i guess and i'm using sentcha 3.4
Thx for any help
Pavol

willigogs
25 Feb 2013, 6:52 AM
AutoSizing components usually also have a maxHeight config for this purpose (e.g. textarea).

However, if you place the treePanel inside another panel with a 'fit' layout, then you should automatically get a scrollbar once the treepanel exceeds the height of the containing panel anyway...

nohaapav
26 Feb 2013, 1:22 AM
AutoSizing components usually also have a maxHeight config for this purpose (e.g. textarea).

However, if you place the treePanel inside another panel with a 'fit' layout, then you should automatically get a scrollbar once the treepanel exceeds the height of the containing panel anyway...

Thx willigogs for answer, but problem is that if i set parent panel with some fixed height or fit layout and number of nodes is low number i will see white space which i want to avoid .. therefor it will be better to have autoresizing till height < 300 and if height exceed 300 then set fixed height to see scrollbar :)

Check picture for example:

42047

willigogs
26 Feb 2013, 3:06 AM
In that case, simply add a CSS max-height attribute to the treepanel :)



this.list = new Ext.tree.TreePanel({
...CONFIGS HERE...
style: {
maxHeight:'300px',
overflow:'auto'
}
})



Be aware this won't work for IE6 and below though, since it doesn't support the max-height CSS rule.

nohaapav
26 Feb 2013, 4:10 AM
yep man :) it works .. i was trying maxHeight attribute before but i forgot to set overflow to auto :)

You've made my day .. thx a lot !!!

nohaapav
26 Feb 2013, 5:04 AM
Maybe one more thing which you can help me with ..

I'm styling this component now and want to have border (black ones) around list component which is solved by adding class by



this.list = new Ext.tree.TreePanel({
rootVisible: true,
cls: 'someClass'
});


But problem is that i have still some border(blue ones) around data in list component pointing to:
<div id="ext-gen313" class="x-panel-body x-panel-body-noheader">
and i would like to set these borders to none but i dont know which bloody component render that ..

Check picture:

42051

willigogs
26 Feb 2013, 8:20 AM
Try adding border: false to your treepanel config :)

nohaapav
28 Feb 2013, 12:02 AM
works!!! thx again .. =D>

nohaapav
4 Mar 2013, 1:37 AM
Btw i've spotted another problem. Check pictures:

Firefox: Autosizing bug ? Scrollbar overrides a part of text

42172

Chrome: same as firefox

42173

IE: Autosizing works ok!

42174

Is it some bug regarding calculation of size by autoSize function ?

nohaapav
14 Mar 2013, 5:42 AM
It will be good to know where this autosizing is done at least .. I checked all the component to last child

TreePanel<--Panel<--Container<--ext.BoxComponent<--Component and was unable to find function which handle that ..

willigogs
14 Mar 2013, 8:10 AM
The easiest fix would probably be by using CSS to add ~20px of right padding to the anchors.

Not perfect of course, but might be enough to achieve what you need?



.x-tree-node-anchor {padding-right:20px;}

nohaapav
14 Mar 2013, 8:32 AM
Yep, this works :) Not ideal but works ..

i was thinking about another workaround like



listeners: {
expandnode: function(n){
n.text+='&nbsp&nbsp&nbsp&nbsp&nbsp'
}
},


but your one is definitelly better =D>