PDA

View Full Version : not an object error, looking for quick help



cabennett85
22 Jul 2010, 5:02 PM
Hello,

I'm new to ExtJS and Sencha and thus I've been going through a crash course in all the above for the last couple weeks. I'm finally getting into writing some code for a project I'm working on and I'm running into some fundamental errors early on. When running this code I'm getting the following error: "TypeError: Result of expression 'this.newsPanel' [undefined] is not an object." I'm trying to structure my code based on the kitchen sink demo since it will eventually have a lot going on but for now I'm just trying to get some very basic functionality working: a panel showing when I click the corresponding button. I got a version working based on the overlays example, but like I said I will eventually need to build in more features so I'm trying to set it up as it would be in the kitchen sink demo. Any help is appreciated even if it's pointing my n00b self in the direction of some fundamental that I'm missing. Thanks.



Ext.ns('news');

news.newsPanel = Ext.extend(Ext.Panel, {

initComponent : function() {


this.closeNewsButton = new Ext.Button({
text: 'Close',
handler: this.hideNews
});

// toolbar for newPanel control
this.newsPanelTb = new Ext.Toolbar({
dock: 'top',
title: 'News',
items: [ {xtype: 'spacer'},
this.closeNewsButton
]
});

// panel container for all news items
this.newsPanel = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: Ext.orientation == 'landscape' ? 500 : 250, //999 : 743,
height: Ext.orientation == 'landscape' ? 250 : 500, //743 : 999,
dockedItems: this.newsPanelTb
});


},

hideNews : function(btn, event) {
this.newsPanel.hide();
}

});



news.Main = {

init : function() {

// focused on testing this
this.newsPanel = new news.newsPanel();

// temp button to launch news panel
this.newsButton = new Ext.Button({
text: 'News',
handler: this.showNews
});

// temp tb to dock button
this.newsTb = new Ext.Toolbar({
dock: 'bottom',
items: [{xtype: 'spacer'},
this.newsButton
]
});

// isolated container for testing
this.tempPanel = new Ext.Panel({
fullscreen: true,
dockedItems: this.newsTb,
html: 'TEST PANEL'
});

},


showNews : function(btn, event) {
this.newsPanel.setCentered(true);
this.newsPanel.show();
}


};



Ext.setup({

onReady: function() {
news.Main.init();
}

});

evant
22 Jul 2010, 5:14 PM
There are a few things wrong:

1) You never call the superclass initComponent method
2) You apply "this.newsPanel = foo", which essentially does nothing. You want to apply the configuration options to the particular instance
3) news.Main is just an object literal, you probably want to use the module pattern.

Before you go much further, you should try and familiarize yourself with javascript a bit more, it will make everything a whole lot easier.



Ext.ns('news');

news.newsPanel = Ext.extend(Ext.Panel, {

initComponent: function(){


this.closeNewsButton = new Ext.Button({
text: 'Close',
handler: this.hideNews
});

// toolbar for newPanel control
this.newsPanelTb = new Ext.Toolbar({
dock: 'top',
title: 'News',
items: [{
xtype: 'spacer'
}, this.closeNewsButton]
});

Ext.apply(this, {
floating: true,
modal: true,
centered: true,
width: Ext.orientation == 'landscape' ? 500 : 250, //999 : 743,
height: Ext.orientation == 'landscape' ? 250 : 500, //743 : 999,
dockedItems: this.newsPanelTb
});
news.newsPanel.superclass.initComponent.call(this);
},

hideNews: function(btn, event){
this.newsPanel.hide();
}

});



news.Main = (function(){
var newsPanel, button, tb, temp
return {
init: function(){

// focused on testing this
newsPanel = new news.newsPanel();

// temp button to launch news panel
button = new Ext.Button({
text: 'News',
handler: this.showNews
});

// temp tb to dock button
tb = new Ext.Toolbar({
dock: 'bottom',
items: [{
xtype: 'spacer'
}, button]
});

// isolated container for testing
temp = new Ext.Panel({
fullscreen: true,
dockedItems: tb,
html: 'TEST PANEL'
});

},

showNews: function(btn, event){
newsPanel.setCentered(true);
newsPanel.show();
}
};
})();



Ext.setup({
onReady: function(){
news.Main.init();
}
});