PDA

View Full Version : Scrollbar problem with long forms



brk11
7 Apr 2010, 6:29 AM
I have long forms which I load in different tabs. The forms are structured in fieldsets and the form and fieldsets have autoWidth enabled. The problem is when I load a long form, the first fieldsets are not correctly displayed because a little piece is behind the vertical scrollbar, however the last fieldsets are correctly sized.

Any idea?

7 Apr 2010, 6:47 AM
none without looking at your code

brk11
8 Apr 2010, 2:32 AM
This is my tabPanel:


DesktopTabPanel = function() {

// Constructor call of superclass
DesktopTabPanel.superclass.constructor.call(this,{
id: 'desktop-tab-panel',
border: false,
enableTabScroll: true,
activeTab: 0,
deferredRender: true,
layoutOnTabChange: true,
frame: true,
resizeTabs: true, // turn on tab resizing
minTabWidth: 150,
tabWidth: 150,
defaults: {
closable: true,
autoScroll: true
},
items: [{
title:'Home',
id: 'home-tab',
closable: false
}]//,
//plugins: new Ext.ux.TabCloseMenu(),
});
};


Ext.extend(DesktopTabPanel, Ext.TabPanel,{
initComponent: function(){
//Before constructor
//Constructor call
DesktopTabPanel.superclass.initComponent.call(this);
//After constructor
},
//Our methods or attributes
index: 0
});


This is my form:


// Component
DummyForm = function(idx) {
// Fixed fields
var firstFs = new Ext.form.FieldSet({
title: 'First',
height: 300,
defaults: {
layout: 'form',
columnWidth: .5,
border: false,
layoutConfig: {
trackLabels: true
}
},
items: [{
// Fixed Fields
defaults: {
xtype: 'numberfield'
},
items: [{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
}]
},{
// Additional Fields
defaults: {
xtype: 'numberfield'
},
items: [{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
}]
}]
});


// Second FieldSet
var secondFs = new Ext.form.FieldSet({
title: 'Second',
height: 200,
defaults: {
layout: 'form',
columnWidth: .5,
border: false,
layoutConfig: {
trackLabels: true
}
},
items: [{
// Fixed Fields
defaults: {
xtype: 'numberfield'
},
items: [{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
}]
},{
// Additional Fields
defaults: {
xtype: 'numberfield'
},
items: [{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
}]
}]
});

var thirdFs = new Ext.form.FieldSet({
title: 'Third',
height: 100,
defaults: {
layout: 'form',
columnWidth: .5,
border: false,
layoutConfig: {
trackLabels: true
}
},
items: [{
// Fixed Fields
defaults: {
xtype: 'numberfield'
},
items: [{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
}]
},{
// Additional Fields
defaults: {
xtype: 'numberfield'
},
items: [{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
}]
}]
});

var fourthFs = new Ext.form.FieldSet({
title: 'Fourth',
height: 400,
defaults: {
layout: 'form',
columnWidth: .5,
border: false,
layoutConfig: {
trackLabels: true
}
},
items: [{
// Fixed Fields
defaults: {
xtype: 'numberfield'
},
items: [{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
}]
},{
// Additional Fields
defaults: {
xtype: 'numberfield'
},
items: [{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
}]
}]
});

var fifthFs = new Ext.form.FieldSet({
title: 'Fifth',
height: 200,
defaults: {
layout: 'form',
columnWidth: .5,
border: false,
layoutConfig: {
trackLabels: true
}
},
items: [{
// Fixed Fields
defaults: {
xtype: 'numberfield'
},
items: [{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
}]
},{
// Additional Fields
defaults: {
xtype: 'numberfield'
},
items: [{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
},{
fieldLabel: 'a',
value: 150
}]
}]
});

// Constructor call
DummyForm.superclass.constructor.call(this,{
border: false,
id: 'dummy-form',
padding: '10px',
labelWidth: 150,
layoutConfig: {
trackLabels: true
},
defaults: {
autoWidth: true,
border: true,
collapsible: true,
layout: 'column'
},
items: [firstFs, secondFs, thirdFs, fourthFs, fifthFs]
});
};


Ext.extend(DummyForm, Ext.FormPanel,{
initComponent : function (){
//Before constructor
//Constructor call
DummyForm.superclass.initComponent.call(this);
//After constructor
}
});


This is how I add the form to the tabPanel:


var desktop = Ext.getCmp('desktop-tab-panel');
var dummyTool = new DummyForm(++desktop.index);
var title = 'New '+n.attributes.text+' ('+desktop.index+')';
dummyTool.setTitle(title);
desktop.add(dummyTool).show();


First, second and third fieldsets are not correctly laid out after the next fieldsets appears (depends on your display resolution).