1. #1
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    6
    Vote Rating
    0
    by_lexus is on a distinguished road

      0  

    Default Answered: Ext.form.Panel does not show in Ext.Panel

    Answered: Ext.form.Panel does not show in Ext.Panel


    Dear all,

    I try the following code in Sencha Touch 2.1:
    Code:
    // A very simple container implementing a title bar with a button. On button click, a floating form panel should show up:
    
    
    Ext.application({
        launch: function() {
            Ext.create('Ext.Container',{
                fullscreen: true,
                items:[{
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'title',
                    items: [{
                        xtype: 'button',
                        text: 'open floating panel form',
                        handler: function(btn) {
                            var panel = Ext.create('Ext.Panel', {
                                left: 0,
                                top: 0,
                                modal: true,
    
                               layout: 'fit',                            hideOnMaskTap: true,
                                items: [{
                                    xtype: 'formpanel',
                                    items: [{
                                        xtype: 'textfield',
                                        name: 'myfield',
                                        label: 'myfield',
                                        labelWidth: 120
                                    }]
                                }]
                            });
                            panel.showBy(btn);
                        }
                    }]
                }, {
                        html: 'test content'
                }]
            });
        }
    });
    On button click, the Ext.Panel shows up, but completely empty and very small.

    If I try the same but without form panel, it works great, but does not help me as I then have no form:
    Code:
    
    Ext.application({
        launch: function() {
            Ext.create('Ext.Container',{
                fullscreen: true,
                items:[{
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'title',
                    items: [{
                        xtype: 'button',
                        text: 'open floating panel form',
                        handler: function(btn) {
                            var panel = Ext.create('Ext.Panel', {
                                left: 0,
                                top: 0,
                                modal: true,
                                hideOnMaskTap: true,
                                items: [{
                                    xtype: 'textfield',
                                    name: 'myfield',
                                    label: 'myfield',
                                    labelWidth: 120
                                }]
                            });
                            panel.showBy(btn);
                        }
                    }]
                }, {
                        html: 'test content'
                }]
            });
        }
    });
    So for me this seems to be a bug, or am I missing something?
    -->

  2. The formpanel does not support auto sizing so since the floating Panel doesn't have any sizing it will look like it has no size. Give the panel a size and you will see the form.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,824
    Answers
    3470
    Vote Rating
    836
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The formpanel does not support auto sizing so since the floating Panel doesn't have any sizing it will look like it has no size. Give the panel a size and you will see the form.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.
    -->

  4. #3
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    6
    Vote Rating
    0
    by_lexus is on a distinguished road

      0  

    Default thanks

    thanks


    Thanks, that was it. Giving the Ext.Panel a defined width / height did the trick.
    -->

Thread Participants: 1

Tags for this Thread