PDA

View Full Version : Window with a formpanel and a nested card layout problem



gh0st26
31 Oct 2009, 3:13 PM
Hey everyone,

Im going to be up from and say that im fairly new to EXTJS, but i'm not new at programming.

anyways with that being said, i'm trying to create a Window when a button is clicked that contains a form panel and nested inside that formpanel is a panel that contains a card layout with next/prev buttons. basically in a nutshell i'm trying to put together the basic "shell" of a step based type form system.

I seem to be having two problems, the first problem its totally broken in IE7 and i cant figre out why. any thoughts? The windows doesn't open at all when the button is clicked.

The seccond issue i'm having is in the other browsers (FF, Other Versions of IE) the window opens fine but its only displaying the FormPanel and the "Submit/Close" Buttons. it's as if it's totally ignoring the nested panel completely...

I'm sure it's probally jst a "rookie extjs" mistake i'm making, so i'm gonna ask the experts.

Thanks guys!





// Setup the navagation Flow for the Wizard
var wizard_nav = function(incr){
var l = Ext.getCmp('wizard_panel').getLayout();
var i = l.activeItem.id.split('step-')[1];
var next = parseInt(i) + incr;
l.setActiveItem(next);
Ext.getCmp('w_previous').setDisabled(next==0);
Ext.getCmp('w_next').setDisabled(next==2);


};


//Build the form
var wizardform = new Ext.FormPanel({
id: 'wizard_form_panel',
title: 'Test header',
bodyStyle: 'padding:15px',
defaults: {border:false},
layout: 'fit',


item: [{
xtype: 'panel',
id:'wizard_panel',
layout:'card',
activeItem: 0,
//bodyStyle: 'padding:15px',
defaults: {border:false},
bbar: [{
id: 'w_previous',
text: '<< Previous',
handler: wizard_nav.createDelegate(this, [-1]),
disabled: true
},{
id: 'w_next',
text: 'Next >>',
handler: wizard_nav.createDelegate(this, [1])
}],


items: [{
id: 'step-0',
html: '<p>Step 1 of 3</p>'
},{
id: 'step-1',
html: '<p>Step 2 of 3</p>'
},{
id: 'step-2',
html: '<p>Step 3 of 3 - Complete</p>'
}]


}],


buttons: [{
text: 'Submit'
},{
text: 'Close'
}]


});
var win;
var button = Ext.get('windowengage');


button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new Ext.Window({
title: '',
layout:'fit',
width:800,
height:500,
closeAction:'hide',



items: wizardform, //Attaches the wizard


});
}
win.show(this);
});

Jaitsu
1 Nov 2009, 4:54 AM
could you be a bit more specific so someone can help, how do you mean "totally broken"?

would be good if you provide a screen shot and/or a working sample that can be dropped into the ext examples directory