PDA

View Full Version : VBox rendering / scroll problem



sportda
9 Nov 2010, 8:42 AM
I'm having a couple problems with my vbox layout. When the page first loads the components are overlaying each other. As soon as I resize the window in any way a doLayout I'm guessing happens and then it's fine. I'm trying below to get a doLayout to happen at the right time but it's not happening.

Also can't get a scroll bar to appear. I read vbox doesn't support scroll so it has to be wrapped in a container that does, that's what I'm trying to do but can't get it to work. I know the picture below shows no overflow but if I size the height smaller the scroll doesn't appear.

Some code is below, there's another code section further down....


var form = new Ext.form.FormPanel
({
id : 'form_panel',
header : false,
// region : 'center',
monitorResize: true,
// autoScroll: true,
bodyStyle : 'padding: 5px; background-color: #DFE8F6',
labelWidth : 50,
labelAlign : 'right',
width : 470,
monitorResize: true,
layout:
{
type: 'vbox',
padding: 2
},
items: [horse_fieldset,spacer,trainer_fieldset,spacer,tab_panel],
listeners:
{
afterlayout:
function(c)
{
//alert('form layed out');
}
}
});

var entry = new Ext.Container
({
id: 'entry_cont',
region: 'center',
width: 480,
layout: 'fit',
autoscroll: true,
items: [form]
});

var selector = new Ole.selector.ExtPanel;
win = desktop.createWindow(
{
// configurables
// anything that is here can be configured from outside
id : 'entry-win',
title : 'Create Entries - ' + selected_show.name + ' - ' + selected_show.dates,
height: 500,
width : 700,
minWidth: 600,
minHeight: 200,
modal : false,
plain :true,
layout:
{
type: 'hbox',
align: 'stretch'
},
items: [selector,entry],
listeners:
{
'resize': function(c)
{
entry.doLayout();
//set_rider_tabs_height();
},
'afterrender': function(c)
{
entry.doLayout();
}
}
})
}
win.show();
Here's the code for the items which may help...



createWindow : function()
{
var desktop = this.app.getDesktop();
var win = desktop.getWindow('entry-win');
if (!win)
{
var horse_fields =
{
xtype : 'container',
layout: 'form',
title : 'Horse',
border : true,
marginBottom: 5,
width: 215,
items:
[{
xtype : 'textfield',
id : 'horse_field',
fieldLabel : 'Name',
name : 'name',
readOnly : true,
width : 150,
ddGroup : 'horse',
listeners:
{
render: initializeHorseDropZone
}
},{
xtype : 'container',
id : 'horse_nos',
plugins: new Ext.ux.Plugin.LiteRemoteComponent({
url : 'plugin_org_no.php?show_no=' + selected_show.unique_no + '&type=1&id=0'
})
}
]
};
var owner_fields =
{
xtype : 'container',
layout: 'form',
title : 'Owner',
border : true,
marginLeft: 10,
width: 215,
items:
[{
xtype : 'textfield',
id : 'owner_field',
fieldLabel : 'Owner',
name : 'owner',
readOnly : true,
width : 150
},{
xtype: 'container',
id : 'owner_nos',
plugins: new Ext.ux.Plugin.LiteRemoteComponent({
url : 'plugin_org_no.php?show_no=' + selected_show.unique_no + '&type=2&id=0'
})
}
]
};
var horse_fieldset =
{
xtype: 'fieldset',
id: 'horse_fieldset',
title: 'Horse',
layout: 'hbox',
autoHeight:true,
width: 445,
collapsible: false,
//layoutConfig : { align : 'stretch' },
items: [horse_fields,owner_fields]
};
var trainer_field =
{
xtype : 'container', // Required to get label to show, need form layout for field label
layout : 'form',
width : 215,
items:
{
xtype : 'textfield',
id : 'trainer_field',
layout : 'form',
labelWidth : 50,
fieldLabel : 'Name',
name : 'trainer',
readOnly : true,
width : 150,
ddGroup : 'person',
listeners:
{
render: initializeTrainerDropZone
}
}
};

var trainer_nos =
{
xtype : 'container',
layout : 'form',
id : 'trainer_nos',
width : 215,
plugins: new Ext.ux.Plugin.LiteRemoteComponent({
url : 'plugin_org_no.php?show_no=' + selected_show.unique_no + '&type=3&id=0'
})
};

var trainer_fieldset =
{
xtype: 'fieldset',
id: 'trainer_fieldset',
layout: 'hbox',
title: 'Trainer',
autoHeight:true,
width: 445,
items: [trainer_field,trainer_nos]
};

var rider1_field =
{
xtype : 'container', // Required to get label to show, need form layout for field label
layout : 'form',
width : 215,
items:
{
xtype : 'textfield',
id : 'rider1_field',
layout : 'form',
labelWidth : 50,
fieldLabel : 'Name',
name : 'rider1',
readOnly : true,
width : 150,
ddGroup : 'person',
listeners:
{
render: initializeTrainerDropZone
}
}
};

var rider1_nos =
{
xtype : 'container',
layout : 'form',
id : 'rider1_nos',
width : 215,
plugins: new Ext.ux.Plugin.LiteRemoteComponent({
url : 'plugin_org_no.php?show_no=' + selected_show.unique_no + '&type=4&id=0'
})
};

var rider1_fieldset =
{
xtype: 'container',
id: 'rider1_fieldset',
layout: 'hbox',
title: 'Rider 1',
autoHeight:true,
items: [rider1_field,rider1_nos]
};
var tab_panel =
{
xtype: 'tabpanel',
id: 'rider_tabpanel',
defaults: {layout:'form'},
activeItem: 0,
//height: 200,
width: 445,
flex: 1,
layoutOnTabChange: true,
// autoScroll: true,
items:
[{
title :'Rider 1',
itemId :'rider1tab',
//autoScroll :true,
bodyStyle: 'background-color: #DFE8F6; padding :6px 6px 0',
layout: 'form',
topMargin: 10,
items:
[
rider1_fieldset,
{
xtype:'tabpanel',
id: 'r1_tabpanel',
defaults:{layout:'fit'},
activeItem:0,
layoutOnTabChange: true,
items:
[{
title:'Entered Classes',
itemId:'classes_tab',
xtype:'Ole.classesGrid.GridPanel',
autoScroll:true
// layout: 'fit'
},{
title:'Entered Divisions',
itemId:'sects_tab',
xtype:'Ole.sectsGrid.GridPanel',
autoScroll:true
// layout: 'fit'
}]
}
],
listeners:
{
afterlayout: function(c)
{
/*
var rtp = Ext.getCmp('rider_tabpanel');
var height = rtp.getHeight();
var pos = rtp.getPosition();
var y1 = pos[1];
var tp = Ext.getCmp('r1_tabpanel');
var pos = tp.getPosition();
var y2 = pos[1];
var height = height - (y2 - y1) - 5;
tp.setHeight.defer(10, tp, [height]);
*/
}
}

},{
title:'Rider 2',
itemId:'rider2tab',
autoScroll:true,
bodyStyle: 'background-color: #DFE8F6; padding :6px 6px 0',
layout: 'form',
items:
[{
xtype : 'textfield',
id : 'rider2_field',
fieldLabel : 'Name',
name : 'rider2',
readOnly : true,
width : 150,
ddGroup : 'person',
listeners: {
render: initializeTrainerDropZone
}
},{
xtype : 'container',
id : 'rider2_nos',
plugins: new Ext.ux.Plugin.LiteRemoteComponent({
url : 'plugin_org_no.php?show_no=' + selected_show.unique_no + '&type=5&id=0'
})
}]
},{
title:'Rider 3',
itemId:'rider3tab',
autoScroll:true,
bodyStyle: 'background-color: #DFE8F6; padding :6px 6px 0',
layout: 'form',
items:
[{
xtype : 'textfield',
id : 'rider3_field',
fieldLabel : 'Name',
name : 'rider3',
readOnly : true,
width : 150,
ddGroup : 'person',
listeners: {
render: initializeTrainerDropZone
}
},{
xtype : 'container',
id : 'rider3_nos',
plugins: new Ext.ux.Plugin.LiteRemoteComponent({
url : 'plugin_org_no.php?show_no=' + selected_show.unique_no + '&type=6&id=0'
})
}]
},{
title:'Notes',
itemId:'notestab',
autoScroll:true,
xtype:'textarea',
id:'notes',
html: 'lorem<br>ipsum<br> etc<BR> etc<BR> etc<BR> etc<BR> et<BR>c with lots of <BR>'
}]
};
var spacer = new Ext.Spacer
({
height: 5
// width: 435
});