Results 1 to 2 of 2

Thread: formpanel inside modal

  1. #1
    Sencha User
    Join Date
    Jan 2011
    Posts
    21
    Vote Rating
    0
      0  

    Default formpanel inside modal

    Hi,

    I'm developing an MVC application which consists of a main viewport with multiple cards.
    Each card contains a formpanel.


    I've uploaded some screenshots: http://imgur.com/a/UTmqV
    The first is a view of the form as a modal (as i'd like it to be) but it's not based on mvc.

    the second IS based on the mvc framework, but i cant get modal to work there.

    Here's the code of the first:
    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: '',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function() {
                    var form;                                
                    var formBase = {
                                    autoRender: true,
                                    floating: true,
                                    modal: true,
                                    centered: true,
                                    hideOnMaskTap: false,
                                    height: 280,
                                    width: 480,
                                    scroll: 'vertical',
                                    url   : 'php/login.php',
                                    standardSubmit : false,
                                    items: [
                                            {
                                                    xtype: 'fieldset',
                                                    ...
                                            }
                                    ],
                                    listeners : {
                                            ...
                                    },
                            
                                    dockedItems: [
                                            {
                                                    xtype: 'toolbar',
                                                    ...
                                            }
                                    ]
                    };
                    
                    form = new Ext.form.FormPanel(formBase);
                    form.show();
            }
    });
    The above has the desired effect (as seen in the screenshot).


    Here's the (original) code for the second:

    Code:
    App.Viewport = Ext.extend(Ext.Panel,{
        cls: "login-main",
        id: "login-main",
        ui: 'dark',
        fullscreen: true,
        layout: 'card',
    
        initComponent: function() {
            Ext.apply(this, {
                items: [{
                    xtype: 'loginform'
                },
                {
                    xtype: 'loginsettings'
                }]
            });
            App.Viewport.superclass.initComponent.apply(this, arguments);
        }
    }); 
    
    App.views.LoginForm = Ext.extend(Ext.form.FormPanel,{
        scroll: 'vertical',
        url   : 'php/login.php',
        standardSubmit : false,
        id: 'login-form',
        cls: 'login-form',
        items: [
            {
                xtype: 'fieldset',
                ...
            }
        ],
        listeners : {
            ...
        },
        dockedItems: [
            {
                xtype: 'toolbar',
                ...
            }
        ]
    });
    
    Ext.reg('loginform', App.views.LoginForm);
    I tried to apply the settings from the first codesample to the second. This works but the modal is shown fullscreen. I've analized the kitchensink example and there, the modal is shown within a panel with layout type set to vbox and pack set to center. I've applied this principle to my code and the result is that the modal is shown correct but the size is 50 x 50 px. Here's the code:

    Code:
    App.Viewport = Ext.extend(Ext.Panel,{
        cls: "login-main",
        id: "login-main",
        ui: 'dark',
        fullscreen: true,
        layout: 'card',
        /* Make sure that content isnt scrollable so user cannot scroll to detail view */
        initComponent: function() {
            Ext.apply(this, {
                items: [{
                    xtype: 'panel',
                    layout: {
                        type: 'vbox',
                        pack: 'center'
                    },
                    items: {
                        xtype: 'loginform'
                    }
                },
                {
                    xtype: 'loginsettings'
                }]
            });
            App.Viewport.superclass.initComponent.apply(this, arguments);
        }
    });
    I hope the above clarifies my problem, and hopefully someone can show me the right way to show a form inside a modal, with MVC pattern applied.


    Thanks in advance

    Jochem

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    21
    Vote Rating
    0
      0  

    Lightbulb

    Hmmm...

    It seems that i have to call doComponentLayout() right after the show() call.
    Can anybody tell me why i don't have to do that in the first example...

Similar Threads

  1. Resizing a TabPanel inside a modal window
    By SuperSloMo in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 21 Dec 2010, 9:15 AM
  2. Modal dialog inside window
    By defcon1 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 5 Feb 2010, 9:03 PM
  3. Modal window inside a tab with BorderLayout
    By LouisArquie in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 9 Apr 2009, 10:50 AM

Tags for this Thread

Posting Permissions

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