1. #11
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,169
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Using 4.2.0:

    Code:
    Ext.require('*');
    
    function makeLines(n) {
        var out = [],
            i;
            
        for (var i = 1; i <= n; ++i) {
            out.push('Line ' + i);
        }
        return out.join('<br />')
    }
    
    Ext.onReady(function(){
        
        var c = new Ext.Component({
            html: makeLines(5)
        });
    
        new Ext.panel.Panel({
            renderTo: document.body,
            width: 400,
            maxHeight: 400,
            autoScroll: true,
            items: c
        });
        
        setTimeout(function(){
            c.update(makeLines(100));
        }, 1000);
        
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  2. #12
    Sencha Premium Member Troy Wolf's Avatar
    Join Date
    May 2007
    Location
    Kansas City
    Posts
    251
    Vote Rating
    2
    Troy Wolf is on a distinguished road

      0  

    Lightbulb Border Layout with region height forced to fit content

    Border Layout with region height forced to fit content


    Quote Originally Posted by Troy Wolf View Post
    I too am struggling to "simply" have a container (panel) size it's height to "fit" it's content. With the caveat that if the content is too big to fit the max possible height (constrained by it's own container), the panel should provide a scrollbar to access the overflow.
    So after a few more hours of fiddling, I got it working. I'm posting here for the benefit of others and to provide an opportunity for those who know a better way to teach me. See the jsFiddle here:

    http://jsfiddle.net/troywolf/X4xzm/

    It is a Viewport with 3 regions:

    'north' - a title panel at the top
    'north' - a panel that holds a form (form.Panel)
    'center' - a "results" panel designed to hold the form submission results

    The form that will live in the middle panel is dynamic--it could have one field of 50 fields. I want the form container to size to fit the form leaving all the rest of the available height to the results panel. UNLESS the form is too big, in which case, I want the form container to size to a max height that leaves room for the results panel's minHeight.

    I thought there would be some combination of ExtJs layout (layout, height, fit, flex, etc.) that would make this work, but I could not figure it out. So notice the custom sizeMe() function I added to the form panel--this is where the custom magic lives.

    Code:
    ...
    sizeMe: function() {
        var availableHeight = this.up('viewport').getSize().height + 10;
        var titlePanelHeight = this.up('panel').previousSibling('panel').getSize().height;
        var resultsPanelHeight = this.up('panel').nextSibling('panel').getSize().height;
        var formHeight = this.getSize().height + 10;  // Needs a bit of pad
        var maxPanelHeight = availableHeight - titlePanelHeight - resultsPanelHeight - 30;
        var panelHeight = (formHeight > maxPanelHeight) ? maxPanelHeight : formHeight;
        this.up('panel').setHeight(panelHeight);
    }
    ...

  3. #13
    Sencha Premium Member Troy Wolf's Avatar
    Join Date
    May 2007
    Location
    Kansas City
    Posts
    251
    Vote Rating
    2
    Troy Wolf is on a distinguished road

      0  

    Cool Unable to edit post

    Unable to edit post


    I was going to edit my previous post, but that feature is broken (in Chrome at least) with

    Uncaught TypeError: Cannot read property 'click' of undefined

    Anywho...I wanted to point out that I now notice in my jsFiddle posted above that the scroll bar fails to appear on the form containing panel when you size it smaller than the form. This works in 4.1.3 but apparently not in 4.1.1, which is the latest public CDN-served ExtJs version.

    So my jsFiddle does not work perfectly as it does for me in 4.1.3.