Results 1 to 9 of 9

Thread: resize panel according to its html content

  1. #1

    Default resize panel according to its html content

    Hi all,
    is it possible to resize a panel according to its html content?
    For example:

    ...
    Code:
    Ext.define('WdR2.view.MyViewport', {
        extend: 'Ext.container.Viewport',
    
    
        layout: {
            type: 'border'
        },
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'panel',
                        height: 456,
                        id: 'panelA',
                        title: 'My Panel',
                        flex: 1,
                        region: 'north'
                    },
                    {
                        xtype: 'panel',
                        id: 'panelB',
                        title: 'My Panel',
                        flex: 1,
                        region: 'center',
                        split: true
                    }
                ]
            });
    
    
            me.callParent(arguments);
        }
    
    
    });
    ...
    at runtime, programmaticaly, I have something like:
    Ext.getCmp('panelA').upload(someHtmlString)


    I'd like that:
    IF the htmlstring is a littelpiece of html, the height of panelA should be *short*;
    vice versa if htmlstring contains a long piece of html, panelA should extend itself , stealing pixels to panelB.

    thanks, Rik
    Last edited by scottmartin; 2 Jul 2012 at 1:06 PM. Reason: Please format your code!

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    You will have to determine the content and use panel.setHeight()/setWidth() to make the changes as needed.

    Scott.

  3. #3

    Default

    The HTML content is dynamic (it can change in any time); how can I determine its size after the rendering?

    Thanks,
    Rik

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    When you gather your html using .upload(someHtmlString).. you can then check the size and use one of the methods... unless I am missing something?

    Scott.

  5. #5

    Default

    Quote Originally Posted by scottmartin View Post
    When you gather your html using .upload(someHtmlString).. you can then check the size and use one of the methods... unless I am missing something?

    Scott.
    maybe I do missing something

    after .update() , what should I do to get the size of the rendered html?

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    Since I only see snippets of your code, I am not sure how you are gathering your html string.
    Can you check check the length after is comes across the wire?
    (ie: string.length)

    Scott.

  7. #7

    Default

    This is a complete example:
    there are two panels, the second one contains two buttons, each button writes some html into the first panel, using also css styling. after rendered the html, what must I do to see all the text rendered into the first panel?



    Code:
    Ext.onReady(function() {
        Ext.create('Ext.container.Viewport', {
    
        layout: {
            type: 'border'
        },
                items: [
                    {
                        xtype: 'panel',
                        id:'pp',
                        height: 150,
                        title: 'North Panel',                   
                        split: true,
    
                        region: 'north'
                    },
                    {
                        xtype: 'panel',
                        title: 'Center',
                        region: 'center',
                        split: true,
                        items: [
                            {
                                xtype: 'button',
                                text: 'Small',
                                listeners: {
                                    click: {
                                        fn:function() {
                                            var s='<P>a small piece of html.</p> how high will it be, after the render?';
                                            Ext.getCmp('pp').update(s);
                                            
                                        }
                                        
                                     }
                                }
                            },
                            {
                                xtype: 'button',
                                text: 'big',
                                listeners: {
                                    click: {
                                            fn:function() {
                                                  var s='<P style=" margin: 20px;">a Long piece of html.</p><p><b>how high will it be, after the render?</b> <P style=" margin: 20px;">a Long piece of html.</p> <P style=" margin: 20px;">a Long piece of html.</p> <P>a Long piece of html.</p> ';
                                              Ext.getCmp('pp').update(s);
                                                
                                            }
    
                                     }
                                }
                            }
                        ]
                    }
                ]
    
    
    
    
    });
    
    
    });

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892
    Answers
    41

    Default

    Remove the height configuration if you want it to shrinkwrap content.

    Otherwise it will do what you tell it and always be 150px high!

  9. #9

    Default

    Quote Originally Posted by Animal View Post
    Remove the height configuration if you want it to shrinkwrap content.

    Otherwise it will do what you tell it and always be 150px high!
    oh, that's nice !
    I'd never noticed that, even because if you have split:true and you move the splitting bar, it stops to work !!!

    so, the solution should be:
    1) remove the height: parameter,as you said;
    2) add something like
    Code:
     Ext.getCmp('pp').height=null;
    before the pp.update()


    thanks

    RIc

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •