I have tried to create a navigation in sencha touch. I have come a cross a situation which i can't figure out. please help me to figure out why the event listeners are not working when i hit back button.
I have created an main container containing a separate place for adding the panels on the fly.
Back and next buttons are in another panel in main view.
when my add function fires it adds the panel's functionality and works fine for one time. But when i navigate through back button the functionality is not working namely the 'piccsClicked', 'cvcsClicked'; where an image is changed. And there are some other functions
Please help me to understand the issue and a solution.
My guess is since i'm creating a panel when i hit back button using xtype: "" + newPanel + "" it creates a brand new panel and the functions are not applied to that. Please help me to solve this issue.
following are the codes
var current = 1;
var myPanel = new Array("panelOne", "panelOneP", "panelTwoP", "panelThreeP", "panelFourP", "panelFiveP", "panelOneC", "panelTwoC", "panelThreeC", "panelFourCVC", "panelFiveC", "panelSixCGraph", "panelSixPGraph");
Ext.define("myApp.controller.MainController", {
extend: "Ext.app.Controller",
config: {
refs: {
main: '#main',
backButton: '#backButton',
nextButton: '#nextButton',
panelArea: '#panelArea', //this panel is in main view along with some other panels, among the other panels there is a panel which contains the back and next buttons
panelOne: '#panelOne', // these are the views extending Ext.Panel
panelOneP: '#panelOneP',
panelTwoP '#panelTwoP',
panelThreeP: '#panelThreeP',
panelFourP: '#panelFourP',
panelFiveP: '#panelFiveP',
panelSixPGraph: '#panelSixPGraph',
panelOneC: '#panelOneC',
panelTwoC: '#panelTwoC',
panelThreeC: '#panelThreeC',
panelFourC: '#panelFourC',
panelFiveC: '#panelFiveC',
panelSixCGraph: '#panelSixCGraph',
piccs: '#piccs', // these two are images in the panelOne
cVCs: '#CVCs',
},
control: {
cVCs: {
tap: 'cvcsClicked'
},
piccs: {
tap: 'piccsClicked'
},
backButton: {
tap: 'navigateBack'
},
nextButton: {
tap: 'navigateNext'
},
},
},
navigateBack: function () {
current = current - 1;
this.addPanel(myPanel[current]);
},
navigateNext: function () {
current = current + 1;
this.addPanel(myPanel[current]);
},
addPanel: function (newPanel) {
this.getPanelArea().removeAt(0);
}
var myNewPanel = Ext.create('Ext.Panel', {
items: [{
xtype: "" + newPanel + "" // every view is given ID exactly as in the array
}]
});
this.getPanelArea().add(myNewPanel);
},
piccsClicked: function () {
var current = this.getPiccs().getSrc();
if (current == 'resources/images/checkBoxUnchecked.jpg') {
this.getPiccs().setSrc('resources/images/checkBoxChecked.jpg');
} else {
this.getPiccs().setSrc('resources/images/checkBoxUnchecked.jpg');
}
},
cvcsClicked: function () {
var current = this.getCVCs().getSrc();
if (current == 'resources/images/checkBoxUnchecked.jpg') {
this.getCVCs().setSrc('resources/images/checkBoxChecked.jpg');
} else {
this.getCVCs().setSrc('resources/images/checkBoxUnchecked.jpg');
}
},
});
I had the same trouble. I resolved it by doing this:
In your controller, create a new ref:
backToNav: 'myNavXtypeName button[text=Back]'
In the same controller, link the ref to a control:
backToNav: {
tap: 'backToNav'
}
Finally create the controller method that implements the navigation view's pop functionality.
backToNav: function() {
Ext.getCmp('myNavXtypeName').pop()
}