PDA

View Full Version : Nesting a VBOX or BorderLayout in the ext.ux.wiz project



eCoast
23 Mar 2011, 5:56 AM
Hi, is anyone still using the ext.us.wiz project ???

I'm trying to get an htmleditor to correctly resize in a card of the Wizard Project. I've tried vbox flex:1 and north/south border layouts as well as every other resizing hack I could think of.

I changed the Wizard Header file to give me a West side-bar instead of a north header.

Here's the code a perfectly working (resizing) north/center layout with htmleditor:

/////////////////////////////////////////////////////
// EXAMPLE OF WIZARD CARD INDEX=0
/////////////////////////////////////////////////////
var myBorderPanel = new Ext.Window({
width: 800,
height: 600,
title: 'Border Layout',
layout: 'border',
items: [{
// title: 'Event Header Information',
region: 'north', // position for region
height: 250,
split: true, // enable resizing
// collapsible: true, // make collapsible
collapseMode:'mini',
minSize: 250, // defaults to 50
maxSize: 250
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype:'htmleditor',
id:'htmleditor',
layout: 'fit',
viewConfig : {forceFit : true}
}]
});
myBorderPanel.show()
Here's a screenshot:http://ecoastsoftware.com/SenchaForum/Wizard/WizardBorderLayoutCard20110323.jpg

Here's the code for the context of the wizard:
Notice how the htmleditor does not fill the available height.


var myBorderPanel2 = new Ext.Panel({
height: 600,
layout: 'border',
viewConfig : {forceFit : true},

items: [{
// title: 'Event Header Information',
region: 'north', // position for region
height: 250,
split: true, // enable resizing
// collapsible: true, // make collapsible
collapseMode:'mini',
minSize: 250,
maxSize: 250
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype:'htmleditor',
id:'htmleditor',
layout: 'fit',
viewConfig : {forceFit : true}
}]
});



var win = new Ext.Window({
id : 'clsEventWiz',
title : 'Event Wizard',
width : 800,
height : 600,
border : false,
iconCls : 'clsEventWiz',
layout : 'fit',
center : true,
items: {
xtype: 'wizard',
id: 'wiz-test',
backBtnText: 'Previous',
endBtnText: 'Finish',
animate: true,
frame: false,
replayTo: 0,
frame : true,
border: false,
headerConfig: {
titleText: 'Testing Ext.ux.BasicWizard',
titleImg: 'src/imgs/wizard-wand.jpg'
},
layout: 'fit',
items: [ {
index: 0,
layout:'form',
items: myBorderPanel2

},
{
index: 1,
html: 'index: 1'
},
{
index: 2,
html: 'index: 2'
}]
}
});
win.show();
Here's a screenshot:http://ecoastsoftware.com/SenchaForum/Wizard/Wizard20110323.jpg

The goal is to get a 2 region layout where the top will have textfields and a fixed height of 250 (preferably collapsible) and the bottom will size to fit as the window is resized (or top region is collapsed)



Here are the header fields that I removed from the examples to keep them shorter

items:[{

layout:'column',
border:false,
frame:true,
items:[{
columnWidth:1,
layout: 'form',
border:false,
items: {
xtype:'textfield',
name : 'strEventName',
fieldLabel : 'Event Name',
allowBlank : false,
anchor:'100%'
}
},{
columnWidth:.5,
layout: 'form',
border:false,
items: {
xtype:'textfield',
name : 'uidResponsible',
fieldLabel : 'Responsible',
allowBlank : false,
anchor:'90%'
}
},{
columnWidth:.5,
layout: 'form',
border:false,
items: {
name : 'dtmTime',
fieldLabel : 'Time',
allowBlank : false,
width : 100,
value: '7:00 PM',
xtype : 'timefield',
increment : 30,
anchor:'100%'
}
}]

}]