Back button not working gives error [urgent]

[soniamru]

Hi,

I am working on a MVC pattern. I have developed a screen having 4 panels in it. At a time only 1 panel is been set active with each panel having a back and next button. When my active panel is panel1 it should load my previous view I tried using Ext.dispatch and even ownerCt.setActiveItem. Ext.dispatch gives me "Uncaught TypeError: Cannot read property 'isComponent' of undefined" in chrome and "TypeError: Result of expression 'config' [undefined] is not an object" in safari whereas ownerCt.setActiveItem gives "Uncaught TypeError: Object [object Object] has no method 'setActiveItem'" and "TypeError: Result of expression 'this.layout.setActiveItem' [undefined] is not a function" in chrome and safari respectively.

mye01.views.Form_across_4_Panels = Ext.extend(Ext.Panel, {
id: 'mainForm',
layout: 'auto',
scroll: 'vertical', 
labelWidth: '120px',

previousView: undefined,
// constructor params
previousCard: undefined,
initComponent: function() {
console.log('THIS:');
console.log(this);
this.buildItems();
previousCard = this.previousView;
mye01.views.Form_across_4_Panels.superclass.initComponent.call(this);
},
buildItems: function() {
var item1 = {
flex: 1,
xtype: 'panel',
id: 'panel1',
bodyPadding: 0,
scroll: 'vertical',
items: [{
xtype: 'textfield',
label: 'Name',
required: true,
//maxLength:5,
labelWidth: '30%',
placeHolder: 'Enter your name'
}, {
xtype: 'textfield',
label: 'Phone Number',
required: true,
placeHolder: 'Enter Contact Number'
}, {
xtype: 'emailfield',
label: 'Email',
required: true,
placeHolder: 'Enter EmailId'
}]
}
var item2 = 
{
flex: 1,
xtype: 'panel',
id: 'panel2',
bodyPadding: 0,
scroll: 'vertical',
items: [{
xtype: 'textfield',
label: 'Location',
placeHolder: 'Enter Location',
}, {
xtype: 'textfield',
label: 'Title',
placeHolder: 'Enter title',
}, {
xtype: 'textfield',
label: 'Designation',
placeHolder: 'enter Designation',
}, 
{
xtype: 'selectfield',
label: 'Ranking',
required: true,
options: [{
text: 'First',
value: 'first'
}, {
text: 'Second',
value: 'second'
}, {
text: 'Third',
value: 'third'
}]
}, 
]
}
var item3 = 
{
flex: 1,
xtype: 'panel',
id: 'panel3',
bodyPadding: 0,
scroll: 'vertical',
items: [{
xtype: 'textfield',
label: 'Education',
required: true,
placeHolder: 'Enter Education'
}, {
xtype: 'textfield',
label: 'Institute of Education',
placeHolder: 'Enter Institute'
}, {
xtype: 'emailfield',
label: 'Alternative Email Id',
}]
}, 

var item4 = 
{
flex: 1,
xtype: 'panel',
id: 'panel4',
bodyPadding: 0,
baseCls: 'network-add',
scroll: 'vertical',
items: [{
xtype: 'textfield',
label: 'Hobbies',
placeHolder: 'Enter Hobbies',
}, {
xtype: 'radiofield',
label: 'Working Platforms Available',
items: [{
name: 'radio_button',
label: 'Working Platforms',
value: 'Working Platforms',
id: 'radio7'
}]
}, ]
} ]
}, 
]
}

var formBase = new Ext.form.FormPanel({
layout: {
type: 'vbox',
align: 'stretch'
},
fullscreen: true,
layout: 'card',
activeItem: 0,
scroll: 'vertical',
standardSubmit: false,
id: 'form1',
items: [item1, item2, item3, item4],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'PREV',
ui: 'back',
id: 'back-btn',
handler: function(id, newCard, oldCard) {
var backbutton_Text = Ext.getCmp('back-btn').getText();
//console.log("BakButton"+backbutton_Text)
if (backbutton_Text == 'PREV') {
/*OwnerCt.setActiveItem as below doesn't work.....

this.ownerCt.setActiveItem(this.previousView, {
type: 'slide',
reverse: 'true',
scope: this,
after: function() {
this.destroy();
}
});

Neither do Ext.dispatch as below works

Ext.dispatch({
controller: mye01.controllers.ProfileController,
action: 'showProfileDetails'
});
*/
}
Ext.getCmp('form1').layout.prev({
type: 'slide',
reverse: true
});
var panel_id = Ext.getCmp('form1').getActiveItem().getId();
if (panel_id == "panel3") {
Ext.getCmp('next_btn').show();
Ext.getCmp('submit_btn').hide();
}
if (panel_id == "panel1") {
Ext.getCmp('back-btn').setText("PREV");
}
}
}, {
xtype: 'spacer'
}, 
{
text: 'NEXT',
id: 'next_btn',
ui: 'forward',
handler: function(id, newCard, oldCard) {
Ext.getCmp('form1').layout.next({
type: 'slide',
reverse: true
});
var panel_id = Ext.getCmp('form1').getActiveItem().getId();
if (panel_id == "panel4") {
Ext.getCmp('next_btn').hide();
Ext.getCmp('submit_btn').show();
}
if (panel_id == "panel2") {
Ext.getCmp('back-btn').setText("Back");
}
}
}
]
}, {
xtype: 'panel',
dock: 'bottom',
style: "margin-bottom:46px",
layout: {
type: 'hbox',
pack: 'center'
},
items: [{
xtype: 'button',
id: 'submit_btn',
text: 'SUBMIT',
ui: 'confirm',
hidden: true,
scope: this
}, {
xtype: 'button',
dock: 'bottom',
text: 'CANCEL',
ui: 'decline',
scope: this
}]
}
]
})
}
});

Please help me.

Thanks in advance.

[mitchellsimoens]

Please edit your code and wrap in code tags so that it is readable.

[soniamru]

Hi Mitchell,
I have edited the code please help me out.