2

尝试以编程方式将视图推送到视口上的主导航视图中时，出现以下错误：

Uncaught TypeError: Object [object Object] has no method 'getMainPanel' 当调用 MainController.js 文件中的以下行时：

var mainnav = this.getMainPanel();

我只是想通过 xtype 获取导航视图的引用，以便我可以根据数据调用是否返回数据来执行 mainnav.push('viewName')。数据和数据调用工作正常，我可以手动将所需的视图添加到主视图端口，使导航视图毫无价值，这不是我的意图。

我尝试通过 xtype、'MainPanel' 以及分配和 id、id: 'MainPanel' 添加“Ref”，并在控制器中尝试：

refs: {
      mainPanel: 'MainPanel'
}

并按 ID：

参考：{主面板：'#MainPanel'}

没关系，错误是一样的。

作为参考，我尝试遵循以下资源中描述的情况：

http://docs.sencha.com/touch/2.1.1/#!/guide/controllers

http://docs.sencha.com/touch/2.0.2/#!/api/Ext.ComponentQuery

http://www.sencha.com/forum/showthread.php?179143-View-reference-getter-undefined

Sencha Touch 2 - 无法从控制器获取参考视图

Sencha Touch 2.0 Controller refs 属性不起作用？

Sencha Touch 2.0 和navigation.View - MVC

这是我的代码：

应用程序.js

Ext.application({
name: 'AddCharSheet',
views: ['Main'],
models: ['CharacterSelectModel'],
stores: ['CharacterSelectStore'],
controllers: ['MainController'],

launch: function(){
    Ext.Viewport.add({
        xtype: 'MainPanel'
    });
}
});

主.js

   Ext.define('AddCharSheet.view.Main', {
    extend: 'Ext.navigation.View',
    requires: ['AddCharSheet.view.CharacterSelect', 'AddCharSheet.view.AddNewCharacter', 'Ext.Toolbar', 'Ext.Panel'],
    xtype: 'MainPanel',
    config: {

    }
    });

主控制器.js

Ext.define('AddCharSheet.controller.MainController',{
Extend: 'Ext.app.Controller',

config: {
    stores: ['AddCharSheet.store.CharacterSelectStore'],
    models: ['AddCharSheet.model.CharacterSelectModel'],
    views: ['AddCharSheet.view.AddNewCharacter', 'AddCharSheet.view.CharacterSelect'],

    refs: {
        mainPanel: 'MainPanel'
    },
    control: {

    },
    launch: function() {
    }
},

init: function(){
    var chs = Ext.getStore('charSelStore');
    var mainnav = this.getMainPanel();
    chs.load({
        callback: function(recs, operation){
            if(this.getCount() > 0){
                mainnav.push('CharList');
            }
            else{
                mainnav.push('NewCharacter');
            }
        }
    });
}
});

更新 Main.js 并更新 MainController.js

主.js

Ext.define('AddCharSheet.view.Main', {
    extend: 'Ext.navigation.View',
    requires: ['AddCharSheet.view.CharacterSelect', 'AddCharSheet.view.AddNewCharacter', 'Ext.Toolbar', 'Ext.Panel'],
    xtype: 'MainPanel',
    config: {
        itemId: 'mainpanel'
    }
});

主控制器.js

Ext.define('AddCharSheet.controller.MainController',{
    Extend: 'Ext.app.Controller',

    config: {
        stores: ['AddCharSheet.store.CharacterSelectStore'],
        models: ['AddCharSheet.model.CharacterSelectModel'],
        views: ['AddCharSheet.view.AddNewCharacter', 'AddCharSheet.view.CharacterSelect'],

        refs: {
            mainPanel: {
                autoCreate: true,
                selector: '#mainpanel',
                xtype: 'MainPanel'
            }
        },
        control: {

        },
        launch: function() {
        }
    },

    init: function(){
        var chs = Ext.getStore('charSelStore');
        var mainnav = this.getMainPanel();
        chs.load({
            callback: function(recs, operation){
                if(this.getCount() > 0){
                    mainnav.push({xtype: 'CharList'});
                }
                else{
                    mainnav.push({ xtype: 'NewCharacter'});
                }
            }
        });
    }
});
4

2 回答 2

2

您想将itemId配置分配给您的Main视图。所以：

Ext.define('AddCharSheet.view.Main', {
    extend: 'Ext.navigation.View',
    requires: ['AddCharSheet.view.CharacterSelect', 'AddCharSheet.view.AddNewCharacter',        'Ext.Toolbar', 'Ext.Panel'],
    xtype: 'MainPanel',
    config: {
        ...,
        itemId: 'mainpanel',
        ...
    }
});

然后在您的控制器中，您Main通过ref. 所以：

Ext.define('AddCharSheet.controller.MainController',{
    Extend: 'Ext.app.Controller',

    config: {
        stores: ['AddCharSheet.store.CharacterSelectStore'],
        models: ['AddCharSheet.model.CharacterSelectModel'],
        views: ['AddCharSheet.view.AddNewCharacter', 'AddCharSheet.view.CharacterSelect'],

        refs: {
            mainPanel : {
                autoCreate: true,
                selector: '#mainpanel',
                xtype: 'MainPanel'
            },
        },
        control: {

        },
        launch: function() {

        }
},

init: function(){
    var chs = Ext.getStore('charSelStore');
    var mainnav = this.getMainPanel();
    chs.load({
        callback: function(recs, operation){
            if(this.getCount() > 0){
                mainnav.push('CharList');
            }
            else{
                mainnav.push('NewCharacter');
            }
        }
    });
}

});

现在你应该可以做var mainnav = this.getMainPanel();

此外，您推动新观点的方式也是错误的。String当您应该推动a 时，您正在通过 a Object。检查文档。

所以在你的情况下，你可能想要这样做：

mainnav.push({  
    xtype:'CharList'
});

和

mainnav.push({  
    xtype:'NewCharacter'
});

假设CharList和NewCharacter是xtypes各自观点的。

编辑： 好的，如果您仍然遇到同样的问题，可能是因为您在init函数中执行此操作。尝试将您的逻辑移至launch函数。事实证明，该init函数在应用程序启动之前被调用。http://docs.sencha.com/touch/2.1.1/#!/api/Ext.app.Controller-cfg-init

于 2013-04-16T21:20:32.433 回答
0

实际上，当您 mainnav = this.getMainPanel();在函数 init() 内部调用时，尚未创建 MainPanel 视图，这就是您未定义的原因，请尝试使用单击处理程序执行此操作，您将看到这将起作用，因为所有视图都将在点击的那一刻。

尝试这样的事情：

Ext.define('IT.controller.UserController', {
    extend: 'Ext.app.Controller',
    views: [
        'user.authentication'
    ],
    refs: [
        {
            ref: 'Authentication',
            selector: 'Authentication',
        }
    ],
    init: function() {
        console.log('Initialized Users');
        var me = this;
        me.control(
            {
                '#login-user-btn': {
                    click: me.handleLoginUser
                }
            }
            );
        },
    handleLoginUser: function(button, e) {
        alert('Ok');
        //var form= button.up('form').getForm();
        var form = this.getAuthentication();
        alert(form);
    }
})
于 2013-08-27T14:11:49.617 回答