1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    3
    Vote Rating
    0
    lav1974 is on a distinguished road

      0  

    Default Multiple Forms Panels

    Multiple Forms Panels


    I'm trying to display 3 form panels. I want to use the form panel similar to the form sample provided in the sencha touch. I want the form panels to have the same borders as in the example. The example is using "centered: true, floating: true, modal: true". When I try to use multiple forms I need to change the properties to false and then the border is gone. I would like to use the same border as in the example provided in sencha touch. Is this possible?

    Thanks in advance,

    -Luis

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,004
    Vote Rating
    650
    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


    There's no way to do it out of the box at the moment.

    However if you tack this onto the end of the form example:

    Code:
    form.addClass('x-floating');
    delete form.lastSize;
    form.doComponentLayout(form.width, form.height);
    You should be able to get the desired effect.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Jul 2010
    Posts
    3
    Vote Rating
    0
    lav1974 is on a distinguished road

      0  

    Default


    Evan,

    Thanks for the reply. I tried that but the 3 forms overlap each other. The form on top has the borders based on the x-floating style. I want to display the 3 forms horizontally arranged. Do you know if there is any other code I need to add?

    Thanks in advance.

    Regards,

    -Luis

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,004
    Vote Rating
    650
    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


    This is a really cut down example, but it should give you an idea:

    Code:
    Ext.setup({
        icon: 'icon.png',
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        glossOnIcon: false,
        onReady: function(){
        
            var formBase = {
                scroll: 'vertical',
                height: 385,
                width: 480,
                items: [{
                    xtype: 'fieldset',
                    title: 'Personal Info',
                    instructions: 'Please enter the information above.',
                    defaults: {
                        required: true,
                        labelAlign: 'left'
                    },
                    items: [{
                        xtype: 'textfield',
                        name: 'name',
                        label: 'Name'
                    }, {
                        xtype: 'passwordfield',
                        name: 'password',
                        label: 'Password'
                    }, {
                        xtype: 'textfield',
                        name: 'disabled',
                        label: 'Disabled',
                        disabled: true
                    }]
                }]
            };
            
            var ct = new Ext.Container({
                layout: 'hbox',
                fullscreen: true,
                items: [new Ext.form.FormPanel(formBase), new Ext.form.FormPanel(formBase)]
            });
            
            ct.items.each(function(form){
                form.addClass('x-floating');
                delete form.lastSize;
                form.doComponentLayout(form.width, form.height);
                form.el.setStyle('position', 'relative !important');
            });
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Similar Threads

  1. Divs in Panels and Forms
    By jamone in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 10 Nov 2009, 12:13 AM
  2. Question regarding multiple panels and forms.
    By thospfuller in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 21 Sep 2009, 8:23 AM
  3. Layout problem with multiple forms
    By moacsjr in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 18 Jan 2009, 6:03 PM
  4. Grids inside Fieldsets/Panels in Forms
    By krider2010 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 6 Nov 2008, 5:15 AM

Thread Participants: 1