PDA

View Full Version : Form Panel - Multiple field sets aligned to the top - bug or limitation



rajaJs
31 May 2012, 11:46 AM
I am trying to design a form panel with 2 fields having the same top (or y co-ordinates). I tried all different layouts (anchor, absolute etc..) but nothing works. It always puts the second filed set below the first one, no matter what. Is this a bug or limitation in Ext.JS 4.1?

This is what I want to achieve?
35811

This is what I get,
35812
Here is the code that I have tried so far,


//declare variables.. (values are assigned server side)
var form;
var editFields = [];
var editTitle;


Ext.Loader.setConfig({
enabled: true,
paths: { 'ExtJSPoC': '/app' }
});


Ext.require([
'Ext.container.Viewport',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
]);


var cmsFormPanel = Ext.extend(Ext.form.Panel, {
bodyPadding: 10,
frame: false,
// configs apply to child items
defaultType: 'textfield',
initComponent: function () {
var config;
config = {
api: {
load: 'Edit.GetData'
},
paramOrder: 'rowId|dictionaryName'
};

Ext.apply(this, Ext.apply(this.initialConfig, config));
cmsFormPanel.superclass.initComponent.apply(this, arguments);
}
});


Ext.onReady(function () {
Ext.Direct.addProvider(Ext.app.REMOTING_API);
Ext.QuickTips.init();


// FORM
form = new cmsFormPanel({
title: editTitle,
width: 900,
height: 600,
renderTo: 'formCtl',
items: editFields,
autoScroll: true
});


});


editFields = [
{
xtype: 'fieldset', title: 'Attribute Information', defaultType: 'textfield', layout: 'anchor', x: 10, y: 20, width: 400, height: 150,


items: [
{ xtype: 'textfield', name: 'name', fieldLabel: 'Attribute Name', labelStyle: 'width:77px;height:22px;left:10px,top:10px', fieldStyle: 'width:200px;height:22px;left:110px,top:10px' },
{ xtype: 'textfield', name: 'attributeId', fieldLabel: 'Attribute ID', labelStyle: 'width:77px;height:22px;left:10px,top:40px', fieldStyle: 'width:200px;height:22px;left:110px,top:40px' },
{ xtype: 'textfield', name: 'description', fieldLabel: 'Description', labelStyle: 'width:77px;height:22px;left:10px,top:70px', fieldStyle: 'width:200px;height:22px;left:110px,top:70px' }
]
},
{
xtype: 'fieldset', title: 'Additional Information', collapsible: true, defaultType: 'textfield', layout: 'anchor', x: 450, y: 20, width: 300, height: 130,
items: [
{ xtype: 'textfield', name: 'U_test', fieldLabel: 'test label' },
{ xtype: 'textfield', name: 'fkPickFromListAttributeType', fieldLabel: 'Attribute Type' }
]
}
];

scottmartin
31 May 2012, 11:59 AM
Have a look at the following:

FYI: You may want to have a look at our Sencha Architect to create easy WYSIWYG layouts
http://www.sencha.com/products/architect/



Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',

height: 290,
width: 578,
layout: {
align: 'stretch',
type: 'vbox'
},
title: 'My Panel',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'container',
layout: {
align: 'stretch',
type: 'hbox'
},
flex: 1,
items: [
{
xtype: 'fieldset',
title: 'My Fields',
flex: 1,
items: [
{
xtype: 'textfield',
fieldLabel: 'Label',
anchor: '100%'
},
{
xtype: 'textfield',
fieldLabel: 'Label',
anchor: '100%'
}
]
},
{
xtype: 'fieldset',
title: 'My Fields',
flex: 1,
items: [
{
xtype: 'textfield',
fieldLabel: 'Label',
anchor: '100%'
},
{
xtype: 'textfield',
fieldLabel: 'Label',
anchor: '100%'
}
]
}
]
},
{
xtype: 'container',
flex: 1
}
]
});

me.callParent(arguments);
}

});


Regards,
Scott.

rajaJs
31 May 2012, 12:46 PM
Scott,
I just downloaded and installed the "Sencha Architect 2" and tried to place 2 fieldsets or 2 field containers side by side inside a form panel, it just would not take it. It always moves one to the bottom of the another. I guess it is either a bug or limitation.

Any other suggestions?

scottmartin
31 May 2012, 12:57 PM
The screen I present above was with SA2

Steps:
-Placed panel(1) on canvas; set layout: vbox
-Placed container(2) inside first panel; place another container(3) inside first panel
-Set container(2) to layout: hbox
-Placed fieldset(4) inside container(2); placed another fieldset(5) inside container(2)
-Placed 2 textfields in each fieldset

see attached:
35817

Scott.