Extjs4 : this.items.itemAt is not a function

[elvinkwok]

I running the js file, but it show no itemAt() this function;
following the code by EXT3, now I want to change the code by EXT4, but I try two day that it running fail! please give help me to run the code! thank you so much!



Ext.namespace("Example");

Example.LinksPanel = Ext.define('MyAPP.linksPanel', {
alias: 'widget.linksPanel',
title: '面板标题',
extend: 'Ext.Panel',
collapsible: true,
width: 400,
height: 300,
autoScroll: false,


links: [{
text: 'Link 1',
href: '#'},
{
text: 'Link 2',
href: '#'},
{
text: 'Link 3',
href: '#'}],
layout: 'fit',
tpl: new Ext.XTemplate('<tpl for="links"><a class="examplelink" href="{href}">{text}</a></tpl>')

,
afterRender: function() {

Example.LinksPanel.superclass.afterRender.apply(this, arguments);

this.tpl.overwrite(this.body, {
links: this.links
});
}

});

Example.Window = Ext.define('winn', {
layout: 'border',
extend: 'Ext.window.Window',

layout: 'border',
initComponent: function() {

var config = {
items: [{
xtype: 'linksPanel',
region: 'west',
width: 200,
collapsible: true,
collapseMode: 'mini',
split: true},
{
xtype: 'tabpanel',
region: 'center',
border: false,
activeItem: 0,
items: [{
title: 'A tab'}]}]
};

Ext.apply(this, Ext.apply(this.initialConfig, config));

Example.Window.superclass.initComponent.apply(this, arguments);

this.linksPanel = this.items.itemAt(0);
this.tabPanel = this.items.itemAt(1);

this.linksPanel.on({
scope: this,
render: function() {
this.linksPanel.body.on({
scope: this,
click: this.onLinkClick,
delegate: 'a.examplelink',
stopEvent: true
});
}
});
},
onLinkClick: function(e, t) {
var title = t.innerHTML;
var tab = this.tabPanel.items.find(function(i) {
return i.title === title;
});
if (!tab) {
tab = this.tabPanel.add({
title: title,
layout: 'fit'
});
}
this.tabPanel.setActiveTab(tab);

}
});
Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
Ext.onReady(function() {
Ext.Loader.setConfig({
enabled: true
});
Ext.QuickTips.init();
var win = new Example.Window({
width: 600,
height: 400,
closable: false,
title: Ext.fly('page-title').dom.innerHTML
});
win.show();
});​

[danguba]

Please format your code before posting it. I wanted to help but I'm not gonna waste my time formatting your code and it is practically impossible to read it the way you posted it

[elvinkwok]

Please format your code before posting it. I wanted to help but I'm not gonna waste my time formatting your code and it is practically impossible to read it the way you posted it
So sorry! Can you help me ?


Ext.ns('Example');
Ext.define('MyApp.LinksPanel', {
extend: 'Ext.panel.Panel',
split: false,
collapsible: true
,
cls: 'link-panel'
,
links: [{
text: 'Link 1'
,
href: '#'

},
{
text: 'Link 2'
,
href: '#'

},
{
text: 'Link 3'
,
href: '#'

}]
,
layout: 'fit'
,
tpl: new Ext.XTemplate('<tpl for="links"><a class="examplelink" href="{href}">{text}</a></tpl>')
,
afterRender: function() {
this.superclass.afterRender.apply(this, arguments);
this.tpl.overwrite(this.body, {
links: this.links

});


}


});

Example.Window = Ext.define('Myapp.view', {
extend: 'Ext.Viewport',
alias: 'widget.examplewindow',
initComponent: function() {
var config = {
items: [{
xtype: 'LinksPanel',
margins: '5 5 5 5',
split: true,
layout: 'accordion',
layoutConfig: {
animate: true

},
width: 250,
minWidth: 100,
region: "west"

},
{
title: "menu",
region: "north",
height: 100,
html: "<h1>DMS!</h1>"

},
{
xtype: "tabpanel",
region: "center",
margins: '5 0 0 0',
items: [{
title: "panel1"

},
{
title: "panel2"

}]

}]

};
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.superclass.initComponent.apply(this, arguments);
this.linksPanel = this.items.itemAt(0);
this.tabPanel = this.items.itemAt(1);
this.linksPanel.on({
scope: this
,
render: function() {
this.linksPanel.body.on({
scope: this
,
click: this.onLinkClick
,
delegate: 'a.examplelink'
,
stopEvent: true


});

}

});

},
onLinkClick: function(e, t) {
var title = t.innerHTML;
var tab = this.tabPanel.items.find(function(i) {
return i.title === title;

});
if (!tab) {
tab = this.tabPanel.add({
title: title
,
layout: 'fit'

});

}
this.tabPanel.setActiveTab(tab);

}


})

Ext.onReady(function() {
var win = new Example.Window({
width: 600
,
height: 400
,
closable: false
,
title: Ext.fly('page-title').dom.innerHTML


});
win.show();

});

[redraid]

this.superclass.initComponent.apply(this, arguments);
change to:

this.callParent(arguments);

[danguba]

Much better. Thank you.

In Ext4 method that replaced itemAt for accessing items of mixed collection is getAt
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.MixedCollection-method-getAt

[redraid]

Getting items by index in collection not good practice - use itemId instead:


initComponent: function() {

var config = {
items: [{
itemId: 'links',
xtype: 'linksPanel',
region: 'west',
width: 200,
collapsible: true,
collapseMode: 'mini',
split: true},
{
itemId: 'tabs',
xtype: 'tabpanel',
region: 'center',
border: false,
activeItem: 0,
items: [{
title: 'A tab'}]}]
};

Ext.apply(this, Ext.apply(this.initialConfig, config));

// Call parent
this.callParent(arguments);


this.linksPanel = this.down('#links');
this.tabPanel = this.down('#tabs');

this.linksPanel.on({
scope: this,
render: function() {
this.linksPanel.body.on({
scope: this,
click: this.onLinkClick,
delegate: 'a.examplelink',
stopEvent: true
});
}
});
},