ref not working in controller for extjs4 mvc application

I am trying to build MVC app.

Following is my code of app/controller/project.js file

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


});

Following is code for my 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();
    }
}
});

When I am running my app it shows following error

dataview is undefined

in file controller/project.js on line 34 which is following

dataview.bindStore(store);

it seems that following is not working in the controller code

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

Does any one have any idea about what could cau开发者_运维技巧se this?

Let me know if you need more information.

---

I had similar problem referencing dataview. Here is how I modified my selector string:

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

That should fix it. But I would like to ask you what console.log(this.getProjectData()); in onLaunch method displays on console? Also, I don't see a ref for projectStore so that you can execute the command:

store = this.getProjectStore();

Did you miss the projectStore reference in the refs list?