Cannot read property 'ownerCt' of undefined

[qbert65536]

I have the following



Music = Ext.extend(Ext.Container, {
layout: 'fit',
title: 'Music',
constructor: function(config) {
this.store = new Ext.data.TreeStore({
model: 'Song',
scope : this,
proxy: {
type: 'ajax',
url: '/listenDev/mobile/getMusic?action=artists',
reader: {
type: 'tree',
root: 'children'
}
}
});


this.nestedList = new Ext.NestedList({

title: 'Music',
displayField: 'title',
scope : this,
store: this.store
});




},
items: this.nestedList

});


But It's always giving me

Cannot read property 'ownerCt' of undefined .

And trying to add things in the constructor using Music.superclass.add(this.nestedList ); gives me

Cannot read property 'length' of undefined

What am I doing wrong ?

[aconran]

Few issues to get you up and running here:

First off, You are adding items to the prototype of the class. You should always add complex objects such as store and items definitions within the initComponent method of your component.

this.nestedList won't exist until you've actually ran the constructor of the class. As good coding style items is plural and should be an array.

Last off, you weren't invoking the parent class implementation of the method/constructor you were overriding.

Try the following:


Music = Ext.extend(Ext.Container, {
layout: 'fit',
title: 'Music',
initComponent: function() {
this.store = new Ext.data.TreeStore({
model: 'Song',
scope : this,
proxy: {
type: 'ajax',
url: '/listenDev/mobile/getMusic?action=artists',
reader: {
type: 'tree',
root: 'children'
}
}
});


this.nestedList = new Ext.NestedList({

title: 'Music',
displayField: 'title',
scope : this,
store: this.store
});
this.items = [this.nestedList];
Music.superclass.initComponent.call(this);
}
});

[qbert65536]

Works great thanks!

So what would I put in the constructor ?

[aconran]

You don't need to put anything in the constructor, placing this behavior in initComponent is the preferred way of extending the component.