Max Height for autoSizing of Component

[nohaapav]

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]

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]

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:

pic1.png

[willigogs]

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]

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]

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:

pic3.png

[willigogs]

Try adding border: false to your treepanel config

[nohaapav]

works!!! thx again ..

[nohaapav]

Btw i've spotted another problem. Check pictures:

Firefox: Autosizing bug ? Scrollbar overrides a part of text

FF.png

Chrome: same as firefox

GCH.png

IE: Autosizing works ok!

IE.png

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

[nohaapav]

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 ..