Problem with card switching and scroll bar sizing

[jrichard415]

I have a panel with card layout, and one of the cards includes another panel with card layout. When the inner panel changes size (as I switch cards) the scrollbar on the surrounding panel doesn’t grow to achieve the same size, the content is just clipped. Any thoughts ?



I have autoScroll set to true on the main ArtifactUploadPanel, and when this panel is loaded into a tab, the vertical scrollbar shows properly, but when I switch the active card in ‘gav-definition-card-panel’ the panel gets longer, but scroll bars don’t.

I'm sure it's just some autoHeight or anchor parameter i am missing somewhere, i have just been battling all afternoon and give up :)


Thanks



/*
* Sonatype Nexus (TM) Open Source Version.
* Copyright (c) 2008 Sonatype, Inc. All rights reserved.
* Includes the third-party code listed at http://nexus.sonatype.org/dev/attributions.html
* This program is licensed to you under Version 3 only of the GNU General Public License as published by the Free Software Foundation.
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
* See the GNU General Public License Version 3 for more details.
* You should have received a copy of the GNU General Public License Version 3 along with this program.
* If not, see http://www.gnu.org/licenses/.
* Sonatype Nexus (TM) Professional Version is available from Sonatype, Inc.
* "Sonatype" and "Sonatype Nexus" are trademarks of Sonatype, Inc.
*/
Sonatype.repoServer.ArtifactUploadPanel = function(config){
var config = config || {};
var defaultConfig = {
autoScroll:true
};
Ext.apply(this, config, defaultConfig);

var ht = Sonatype.repoServer.resources.help.artifact;

this.fileInput = null;
this.pomInput = null;

this.gavDefinitionStore = new Ext.data.SimpleStore({fields:['value','display'], data:[['pom','From POM'],['gav','GAV Parameters']]});

var packagingStore = new Ext.data.SimpleStore( {
fields: ['value'],
data: [['pom'], ['jar'], ['ejb'], ['war'], ['ear'], ['rar'], ['par'], ['maven-archetype'], ['maven-plugin']]
} );

var menu = new Sonatype.menu.Menu({
payload: this,
scope: this,
items: [
{
text: 'Artifact Upload',
value: 0,
checked: true,
group: 'upload-selector-group',
checkHandler: function( item, e ) {
var uploadTypeCardPanel = this.find( 'id', 'upload-type-card-panel' )[0];
uploadTypeCardPanel.getLayout().setActiveItem(uploadTypeCardPanel.items.itemAt(0));
this.doLayout();
},
scope: this
}
]
});

var uploadButton = new Ext.Button( {
text: 'Upload Type...',
icon: Sonatype.config.resourcePath + '/images/icons/page_white_stack.png',
cls: 'x-btn-text-icon',
menu: menu
} );

Sonatype.repoServer.ArtifactUploadPanel.superclass.constructor.call(this, {
border: false,
frame: true,
collapsible: false,
collapsed: false,
fileUpload: true,
width: '100%',
height: '100%',
autoScroll: true,
layoutConfig: {
labelSeparator: ''
},
tbar: [ uploadButton ],
items: [
{
xtype: 'panel',
id: 'upload-type-card-panel',
header: false,
layout: 'card',
region: 'center',
activeItem: 0,
bodyStyle: 'padding:15px',
deferredRender: false,
frame: false,
items: [
{
xtype: 'panel',
layout: 'fit',
items: [
{
xtype: 'hidden',
name: 'r',
value: this.payload.id
},
{
xtype: 'fieldset',
checkboxToggle:false,
title: 'Select Artifact(s) for Upload',
collapsible: false,
autoHeight:true,
items: [
{
hideLabel: true,
xtype: 'browsebutton',
text: 'Select Artifact to Upload...',
style :'margin-bottom: 5px;',
uploadPanel: this,
handler: function( b ) {
b.uploadPanel.fileInput = b.detachInputFile();
var filename = b.uploadPanel.fileInput.getValue();
b.uploadPanel.updateFilename( b.uploadPanel, filename );
}
},
{
xtype: 'textfield',
fieldLabel: 'Filename',
name: 'filenameField',
anchor: Sonatype.view.FIELD_OFFSET,
readOnly: true,
allowBlank:true
},
{
xtype: 'textfield',
fieldLabel: 'Classifier',
helpText: ht.classifier,
anchor: Sonatype.view.FIELD_OFFSET,
name: 'classifier',
allowBlank:true
},
{
xtype: 'textfield',
fieldLabel: 'Extension',
helpText: ht.extension,
anchor: Sonatype.view.FIELD_OFFSET,
name: 'extension',
allowBlank:true
},
{
xtype: 'combo',
lazyInit: false,
fieldLabel: 'GAV Definition',
itemCls: 'required-field',
helpText: ht.gavDefinition,
name: 'gavDefinition',
store: this.gavDefinitionStore,
valueField:'value',
displayField:'display',
editable: false,
forceSelection: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
emptyText: 'Select...',
allowBlank: false,
value: 'pom',
listeners: {
select: {
fn: this.gavDefinitionSelectHandler,
scope: this
}
}
},
{
xtype: 'panel',
id: 'gav-definition-card-panel',
header: false,
layout: 'card',
region: 'center',
activeItem: 0,
bodyStyle: 'padding:15px',
deferredRender: false,
autoScroll: false,
frame: false,
items: [
{
xtype: 'fieldset',
checkboxToggle:false,
title: 'GAV Details',
anchor: Sonatype.view.FIELDSET_OFFSET,
collapsible: false,
autoHeight:true,
layoutConfig: {
labelSeparator: ''
},
items: [
{
xtype: 'label',
text: 'Select a GAV Definition to enter details.'
}
]
},
{
xtype: 'fieldset',
checkboxToggle:false,
title: 'GAV details',
collapsible: false,
autoHeight:true,
items: [
{
hideLabel: true,
xtype: 'browsebutton',
text: 'Select POM to Upload...',
style :'margin-bottom: 5px;',
uploadPanel: this,
handler: function( b ) {
b.uploadPanel.pomInput = b.detachInputFile();
var filename = b.uploadPanel.pomInput.getValue();
b.uploadPanel.updatePomFilename( b.uploadPanel, filename );
}
},
{
xtype: 'textfield',
fieldLabel: 'POM Filename',
name: 'pomnameField',
anchor: Sonatype.view.FIELD_OFFSET,
readOnly: true,
allowBlank:false,
itemCls: 'required-field',
disabled: true
}
]
},
{
xtype: 'fieldset',
checkboxToggle:false,
title: 'GAV details',
collapsible: false,
autoHeight:true,
items: [
{
xtype: 'checkbox',
fieldLabel: 'Auto Guess',
checked: true,
name: 'autoguess',
helpText: ht.autoguess,
listeners: {
'check': {
fn: function( checkbox, value ) {
this.updateFilename( this );
},
scope: this
}
},
disabled: true
},
{
xtype: 'textfield',
fieldLabel: 'Group',
itemCls: 'required-field',
helpText: ht.groupId,
anchor: Sonatype.view.FIELD_OFFSET,
name: 'g',
allowBlank: false,
disabled: true
},
{
xtype: 'textfield',
fieldLabel: 'Artifact',
itemCls: 'required-field',
helpText: ht.artifactId,
anchor: Sonatype.view.FIELD_OFFSET,
name: 'a',
allowBlank:false,
disabled: true
},
{
xtype: 'textfield',
fieldLabel: 'Version',
itemCls: 'required-field',
helpText: ht.version,
anchor: Sonatype.view.FIELD_OFFSET,
name: 'v',
allowBlank: false,
uploadPanel: this,
validator: function( v ){
var isSnapshotVersion = /-SNAPSHOT$/.test( v ) || /LATEST$/.test( v ) || /^(.*)-([0-9]{8}.[0-9]{6})-([0-9]+)$/.test( v );
var isSnapshotRepo = this.uploadPanel.payload.data.repoPolicy == 'snapshot';
if ( isSnapshotRepo ) {
if ( ! isSnapshotVersion ) {
return 'You cannot upload a release version into a snapshot repository';
}
}
else {
if ( isSnapshotVersion ) {
return 'You cannot upload a snapshot version into a release repository';
}
}
return true;
},
disabled: true
},
{
xtype: 'combo',
fieldLabel: 'Packaging',
itemCls: 'required-field',
helpText: ht.packaging,
store: packagingStore,
displayField: 'value',
editable: true,
forceSelection: false,
mode: 'local',
triggerAction: 'all',
emptyText: 'Select...',
selectOnFocus: true,
allowBlank: false,
name: 'p',
width: 150,
listWidth: 150,
disabled: true
}
]
}
]
},
{
xtype: 'button',
id: 'upload-button',
text: 'Upload Artifact',
handler: this.uploadArtifacts,
scope: this
}
]
}
]
}
]
}
]
});

Sonatype.Events.fireEvent( 'uploadMenuInit', menu, this.find( 'id', 'upload-type-card-panel' )[0] );
};

[jsakalos]

To get automated sizing of components you should specify a layout at each level of containers chain. If you do not want scrollbars to appear the 'fit' is the first candidate and if you have more items in a container then 'anchor' seems to be appropriate.