PDA

View Full Version : CardLayout that resizes for its content?



js_coder
28 Dec 2009, 2:12 PM
I have an Ext.Window with a form in it. The window resizes with the form (like when a hidden error message is displayed), happy. I have another Ext.Window that is set up in the same way except it has a card layout. I set layoutOnCardChange to true in this layout's config, and the window resizes normally when switching to a different active item. However, it does not resize if the form resizes. Is there a way to make a CardLayout react to resized contents?

tot2ivn
28 Dec 2009, 5:59 PM
I have an Ext.Window with a form in it. The window resizes with the form (like when a hidden error message is displayed), happy. I have another Ext.Window that is set up in the same way except it has a card layout. I set layoutOnCardChange to true in this layout's config, and the window resizes normally when switching to a different active item. However, it does not resize if the form resizes. Is there a way to make a CardLayout react to resized contents?

I guess this is what you want. All you need to do is set the window properties: autoWidth, and autoHeight = true. Don't set the size for CardLayout panel as it's already auto fit to the container as CardLayout inherits from FitLayout (http://www.extjs.com/deploy/dev/docs/output/Ext.layout.FitLayout.html).


Ext.onReady(function(){

var navHandler = function(incr){
var l = Ext.getCmp('card').getLayout();
var i = l.activeItem.id.split('card-')[1];
var next = parseInt(i) + incr;
l.setActiveItem(next);
Ext.getCmp('card-prev').setDisabled(next==0);
Ext.getCmp('card-next').setDisabled(next==2);
};


var card = new Ext.Panel({
title: 'Example Wizard',
layout:'card',
plain: true,
id: 'card',
activeItem: 0, // make sure the active item is set on the container config!

bodyStyle: 'padding:15px',
defaults: {
// applied to each contained panel

border:false
},
// just an example of one possible navigation scheme, using buttons
scope: this,
bbar: [
{
id: 'card-prev',
text: 'Back',
handler: navHandler.createDelegate(this, [-1]),
disabled: true
},
'->', // greedy spacer so that the buttons are aligned to each side

{
id: 'card-next',
text: 'Next',
handler: navHandler.createDelegate(this, [1])
}
],
// the panels (or "cards") within the layout
items: [{
id: 'card-0',
html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p><p>Toooooooo laaaaaaaaaaaaaaarge</p>'
},{
id: 'card-1',
html: '<p>Step 2 of 3</p>Nothing'
},{
id: 'card-2',
html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p><p>Extreeeeemeeely Hugeeeeeeeeeeeeeeeee</p>'
}]
});

var win = new Ext.Window({
title: 'Test Card Layout Resize',
autoWidth: true,
autoHeight: true,
shadow: false,
items: card
});

win.show();
});

Cheers,

Totti

js_coder
29 Dec 2009, 7:21 AM
Hi Totti, thanks for your help. I tried adding those two properties in the config, but I still have this overflow behavior. It is triggered by a hidden block-level element being shown, increasing the height of the container ~1ex. I've attached a screenshot showing a normal window, and that same window when an error message is displayed. Note that there are two error messages in the second screenshot, but the one for the "Email" field is overflowing and is thus hidden.

Here is my subclass of TextField:



Ext.form.TextField, {
initComponent: function() {
this.on('invalid', this.showError, this);
this.on('valid', this.hideError, this);

this.on('afterrender', function() {
this.errorRegion = new Ext.Element(Ext.DomHelper.createDom({
tag: 'p',
cls: 'error'
}));
this.errorRegion.setVisibilityMode(Ext.Element.DISPLAY);
this.errorRegion.hide();
this.el.parent().appendChild(this.errorRegion);
}, this)

Path.to.my.TextField.superclass.initComponent.apply(this);
},

showError: function(field, message) {
this.errorRegion.update(message);
this.errorRegion.show();
},

hideError: function() {
this.errorRegion.hide();
}
});
The Window and FormPanel instances that I am using have default layout-related settings, except for the autoWidth/autoHeight that I just added per your suggestion.

js_coder
29 Dec 2009, 7:41 AM
Oh, and here is a test case:


Ext.onReady(function() {
var win = new Ext.Window({
layout: 'card',
layoutConfig: {
layoutOnCardChange: true
},
activeItem: 0,
items: [{
xtype: 'form',
items: [{
fieldLabel: 'Test',
xtype: 'textfield',
listeners: {
afterrender: function(field) {
// Simulate delay
setTimeout(function() {
field.el.parent().appendChild(Ext.DomHelper.createDom({
tag: 'p',
html: 'Test'
}));
}, 1000);
}
}
}]
}, {
xtype: 'form'
}]
});
win.show();
});

js_coder
30 Dec 2009, 7:05 AM
Does anybody have further thoughts on this? I hope that the test case is of some use.

Condor
30 Dec 2009, 7:14 AM
A window can't auto-adjust it's height to fit the content.

You will have to manually calculate the required height and apply it to the window.