后按钮中的感应器触摸导航问题

Question

我试着用感官触摸来创建一个导航。我遇到了一个我搞不懂的情况。当我按回按钮时，请帮助我找出为什么事件侦听器不能工作。

我已经创建了一个主容器，其中包含一个单独的位置，用于动态添加面板。

“后退”和“下一个”按钮位于主视图中的另一个面板中。

当我的add函数触发时，它会添加面板的功能，并且只工作一次。但是，当我在后退按钮中导航时，功能不起作用，即“piccsClicked”，“cvcsClicked”，其中图像被更改。还有其他一些功能

请帮助我理解问题和解决方案。

我的猜测是，当我使用xtype：“+ newPanel +”按回按钮时，我创建了一个面板，它创建了一个全新的面板，而这些函数并没有应用到这个面板中。请帮我解决这个问题。

以下是代码

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

 });

Answer 1

我也遇到了同样的麻烦。我通过这样做解决了这个问题：

1. 在控制器中，创建一个新的ref： backToNav：'myNavXtypeName buttontext=Back‘
2. 在同一个控制器中，将ref链接到control： backToNav：{ tap：'backToNav‘}
3. 最后，创建实现导航视图pop功能的控制器方法。 backToNav:函数(){ Ext.getCmp('myNavXtypeName').pop() }

好了。在这里阅读更多关于推荐和控件的内容。

Answer 2

在放置逗号,时要小心，并检查是否一切都已关闭，{中是否有}括号。

基本上，您不应该像在结尾时那样在方括号、,或]之前放置任何}：

    },
});

或在'#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');
        }
    }
});