2

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');
         }
     },

 });
4

2 回答 2

1

我有同样的麻烦。我通过这样做解决了它：

  1. 在您的控制器中，创建一个新的ref：

    backToNav: 'myNavXtypeName button[text=Back]'

  2. 在同一个控制器中，将 ref 链接到 a control：

    backToNav: {
        tap: 'backToNav'
}

  3. 最后创建实现导航视图弹出功能的控制器方法。

    backToNav: function() {
        Ext.getCmp('myNavXtypeName').pop()
}

完毕。 在此处阅读有关参考和控件的更多信息

于 2015-05-26T22:30:56.197 回答
-1

小心放置逗号的位置,，并检查所有内容是否正确{用}括号括起来。

基本上，您不应该,在右括号之前放置任何内容，}或者] 像最后所做的那样：

    },
});

或之后'#CVCs',

    cVCs: '#CVCs',
},

另外你确定要放在},后面this.getPanelArea().add(myNewPanel);吗？

    this.getPanelArea().add(myNewPanel);
},

这将关闭您的控制器定义，但您还有两个功能piccsClicked，cvcsClicked应该在关闭之前进行},。

此外，关闭控制器应该是});而不是}, （可能已经不小心留在了那里）。

尝试这个：

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');
        }
    }
});
于 2013-11-11T01:17:43.437 回答