1. #1
    Sencha User
    Join Date
    Feb 2009
    Posts
    75
    Vote Rating
    -1
    bareflix is an unknown quantity at this point

      0  

    Default Unanswered: How can I stop a Window containing a TabPanel from changing size after first render?

    Unanswered: How can I stop a Window containing a TabPanel from changing size after first render?


    I have a window with a tab panel that contains a form in one tab, and a transaction log in the other tab. When the window is rendered, it is sized perfectly to fit the form, which is exactly what I want. When I change to the second tab, the window shrinks to fit that tab, but I don't want it to shrink, I want it to stay the size it was and stretch the content of the second tab to fit.
    If I manually resize the window, it does keep the size.

    Any suggestions on how to get the behavior I want? I don't want to have to hard code the window size, because the contents of the form will change.

    Code:
    Ext.define('app.view.ui.myWindow', {
        extend: 'Ext.window.Window',
    
        layout: {
            type: 'fit'
        },
        border: false,
    
        initComponent: function() {
    
            var me = this;
            me.items = [
                {
                    xtype: 'tabpanel',
                    border: false,
                    activeTab: 0,
                    items: [
                        {
                            xtype: 'panel',
                            border: false,
                            bodyPadding: 10,
                            title: 'Configuration',
                            items: [
                                {
                                    xtype: 'form',
                                    id: "ReaderForm",
                                    border: false,
                                    buttonAlign: 'center',
                                    buttons: [
                                        {
                                            id: 'save',
                                            xtype: 'button',
                                            text: 'Save'
                                        }
                                    ]
                                }
                                    etc.
                            ]
                        },
                        {
                            xtype: 'panel',
                            border: false,
                            bodyPadding: 10,
                            title: 'Transactions',
                            id: "transactionPanel",
                            autoScroll: true,
                            layout:
                            {
                                type: 'fit'
                            },
                            html: "<div id=\"transactionList\">Transaction List</div>"
                        }
                    ]
                }
            }
        };

  2. #2
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Vote Rating
    14
    Answers
    26
    mberrie will become famous soon enough mberrie will become famous soon enough

      0  

    Default


    So you basically want the Window to auto-size itself, but then again... not!

    Interestingly this works for me in Ext 4.0.2a (it takes the width of the first tab on first show, but doesn't resize on tab change, check this out:

    (I simulate auto-sizing from bottom up by assigning a html text of variable length to the inner elements)

    Code:
            Ext.Loader.setPath('Ext', 'ext/src');
            Ext.Loader.config.disableCaching = false;
    
            Ext.define('app.view.ui.myWindow', {
                extend: 'Ext.window.Window',
    
                layout: {
                    type: 'fit'
                },
                border: false,
    
                initComponent: function() {
    
                    var me = this;
                    me.items = [
                        {
                            xtype: 'tabpanel',
                            border: false,
                            activeTab: 0,
                            items: [
                                {
                                    xtype: 'panel',
                                    border: false,
                                    bodyPadding: 10,
                                    title: 'Configuration',
                                    items: [
                                        {
                                            xtype: 'form',
                                            id: "ReaderForm",
                                            border: false,
                                            buttonAlign: 'center',
                                            buttons: [
                                                {
                                                    id: 'save',
                                                    xtype: 'button',
                                                    text: 'save'
                                                }
                                            ],
                                            items: [
                                                {
                                                    xtype: 'component',
                                                    html: function() {
                                                        var title = [];
                                                        for (var i = 0; i < 100; i++) {
                                                            title[i] = 'x';
                                                        }
                                                        return title.join('');
                                                    }()
                                                }
    
                                            ]
                                        }
                                    ]
                                },
                                {
                                    xtype: 'panel',
                                    border: false,
                                    bodyPadding: 10,
                                    title: 'Transactions',
                                    id: "transactionPanel",
                                    autoScroll: true,
                                    layout:
                                    {
                                        type: 'fit'
                                    },
    //                                html: "<div style=\"width: 100px\" id=\"transactionList\">Transaction List</div>"
                                    html: function() {
                                        var title = [];
                                        for (var i = 0; i < 20; i++) {
                                            title[i] = 'x';
                                        }
                                        return title.join('');
                                    }()
                                }
                            ]
                        }
                    ]
    
                    this.callParent(arguments);
                }
            });
            Ext.onReady(function() {
                Ext.create('app.view.ui.myWindow').show();
            });

Thread Participants: 1