Sencha Touch 2.1通过Ref in Controller获取视图

Question

当尝试以编程方式将视图推入viewport上的主导航视图时，我得到以下错误:

Uncaught TypeError: Object [Object Object]在MainController.js文件中调用以下行时没有方法'getMainPanel':

var mainnav = this.getMainPanel();

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

我已经尝试添加"Ref"通过xtype， 'MainPanel'，也通过分配和id, id: 'MainPanel'，并在控制器尝试:

refs: {
      mainPanel: 'MainPanel'
}

和by Id:

参考文献:{mainPanel:"# mainPanel"}

无论如何，错误都是一样的。

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

http://docs.sencha.com/touch/2.1.1/!

/指导/控制器

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-无法从控制器获得refview

Sencha Touch 2.0控制器refs属性不工作?

Sencha Touch 2.0和导航。View - MVC

下面是我的代码:

app.js

Ext.application({
name: 'AddCharSheet',
views: ['Main'],
models: ['CharacterSelectModel'],
stores: ['CharacterSelectStore'],
controllers: ['MainController'],
launch: function(){
    Ext.Viewport.add({
        xtype: 'MainPanel'
    });
}
});

Main.js

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

MainController.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

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

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

Answer 1

您想要将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',
        ...
    }
});

然后在控制器中通过ref引用Main视图。所以:

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();

你推送新视图的方式也是错误的。当你应该推进Object时，你正在通过String。查看文档

在你的情况下，你可能想这样做:

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

Answer 2

实际上，当你在函数init()中调用mainnav = this.getMainPanel();时，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);
    }
})