PDA

View Full Version : Multiple Forms Panels



lav1974
7 Jul 2010, 1:20 PM
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

evant
7 Jul 2010, 7:34 PM
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:



form.addClass('x-floating');
delete form.lastSize;
form.doComponentLayout(form.width, form.height);


You should be able to get the desired effect.

lav1974
8 Jul 2010, 9:03 AM
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

evant
8 Jul 2010, 5:56 PM
This is a really cut down example, but it should give you an idea:



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');
});
}
});