PDA

View Full Version : Extjs4 : this.items.itemAt is not a function



elvinkwok
27 Sep 2012, 2:08 AM
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
27 Sep 2012, 4:32 AM
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
28 Sep 2012, 10:10 PM
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
29 Sep 2012, 12:26 AM
this.superclass.initComponent.apply(this, arguments);
change to:

this.callParent(arguments);

danguba
30 Sep 2012, 10:09 PM
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
1 Oct 2012, 2:51 AM
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
});
}
});
},