ref 在 extjs4 mvc 应用程序的控制器中不起作用

Question

我正在尝试构建 MVC 应用程序。

以下是我的 app/controller/project.js 文件代码

Ext.define('rt.controller.project', {
extend: 'Ext.app.Controller',

stores: ['project'],
models: ['project'] ,   
views: ['project.main', 'project.projectlist'],

refs: [
       {ref: 'projectList', selector: 'projectlist'},
       {ref: 'projectData', selector: 'projectlist dataview'}
       ],


init: function() {
    this.control({
        'projectlist dataview': {
            selectionchange: this.loadProject
        },
        'projectlist button[action=add]': {
            click: this.addProject
        },
        'projectlist button[action=remove]': {
            click: this.removeProject
        }
    });
},

onLaunch: function() {
    console.log(this.getProjectData());
    var dataview = this.getProjectData(),
        store = this.getProjectStore();
     console.log("Stoer = " + store);   
    dataview.bindStore(store);
    dataview.getSelectionModel().select(store.getAt(0));

},


loadProject: function(selModel, selected) {

    console.log("Load Project");

},


addProject: function() {
    console.log("Add Project");
},

removeProject: function() {
    console.log("Remove Project");
},


});

以下是我的 app/view/project/projectlist.js 的代码

Ext.define('rt.view.project.projectlist', {
extend: 'Ext.panel.Panel',
alias: 'widget.projectlist',

requires: ['Ext.toolbar.Toolbar'],

title: 'Projects',
collapsible: true,
animCollapse: true,
margins: '5 0 5 5',
layout: 'fit',

initComponent: function() {
    Ext.apply(this, {
        items: [{
            xtype: 'dataview',
            trackOver: true,
            store: this.store,
            cls: 'project-list',
            itemSelector: '.project-list-item',
            overItemCls: 'project-list-item-hover',
            tpl: '<tpl for="."><div class="project-list-item">{name}</div></tpl>',
            listeners: {
                selectionchange: this.onSelectionChange,
                scope: this
            }
        }],

        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: 'Add project',
                action: 'add'
            }, {
                text: 'Remove project',
                disabled: true,
                action: 'remove'
            }]
        }]
    });

    this.callParent(arguments);
},

onSelectionChange: function(selmodel, selection) {
    var selected = selection[0],
        button = this.down('button[action=remove]');
    if (selected) {
        button.enable();
    }
    else {
        button.disable();
    }
}
});

当我运行我的应用程序时，它显示以下错误

数据视图未定义

在第 34 行的文件 controller/project.js 中

dataview.bindStore(store);

以下似乎在控制器代码中不起作用

refs: [
    {ref: 'projectList', selector: 'projectlist'},
    {ref: 'projectData', selector: 'projectlist dataview'}
],

有人知道是什么原因造成的吗？

如果您需要更多信息，请告诉我。

Answer 1

我在引用数据视图时遇到了类似的问题。以下是我修改选择器字符串的方式：

{ref: 'projectData', selector: 'projectlist > dataview' }

这应该可以解决它。但我想问你，onLaunch 方法中的console.log(this.getProjectData()); 在控制台上显示什么？另外，我没有看到 projectStore 的 ref 以便您可以执行命令：

store = this.getProjectStore();

您是否错过了refs 列表中的projectStore 引用？