PDA

View Full Version : Quite confused....



Hani79
5 Mar 2008, 11:33 AM
I'm doing my best to learn the proper way to build an app using the Module Pattern (http://extjs.com/learn/Manual:Basic_Application_Design (http://extjs.com/forum/../learn/Manual:Basic_Application_Design)) but I'm hitting a very confusing situation at the very beginning. I'm confused because, as far as I can see, I've followed the basic app design model very closely.

PROBLEM: A function is running at the time of init and it shouldn't. Then, when I actually intend to get the function to run, I get an error. Firebug says "E.fireFn has no properties".

WHAT HAPPENS: I launch the page and immediately, I get an alert saying "A node was clicked". (That's my function running on initialization rather than when I double click a tree node.) I click OK on the alert and the UI appears. I double click on a tree node and get the error in Firebug.

In advance, I appreciate any help and guidance you can give me.

CODE:
(I've simplified the code so that only the relevant JS is there.)

application.php (snippet)


<script type="text/javascript">
Ext.onReady(MyApplication.app.init, MyApplication.app);
</script>


my_application.js


// create namespace
Ext.namespace('MyApplication');

MyApplication.app = function() {

// private variables

// private functions

// public space
return {

// PUBLIC PROPERTIES (e.g. strings to translate)

// PUBLIC METHODS

init : function(){
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.SessionProvider({state: Ext.appState}));

// CREATE HEADER PANEL
header = new Ext.Panel({
id:'cms_header',
region:'north',
layout:'anchor',
border: false,
height:60,
html: 'My Application'
});

// CREATE TREEPANEL
page_list = new Ext.tree.TreePanel({
region: 'west',
title: 'Web Content',
collapsible: true,
animCollapse: true,
id: "content-tree",
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
loader: new Ext.tree.TreeLoader({ dataUrl:'tree.php' }),
margins: '0 0 5 5',
cmargins: '0 0 0 0',
split: true,
width: 225,
minSize: 175,
maxSize: 400,
lines: true,
collapseFirst: false,
rootVisible: true
});

// SET THE ROOT NODE FOR THE TREE
var page_list_root = new Ext.tree.AsyncTreeNode({
text: 'Pages & Content',
draggable: false,
id: 'Tree_Root',
expanded: true
});
page_list.setRootNode(page_list_root);

// DEFINE ACTION ON TREE NODE DOUBLE CLICK
page_list.on('dblclick', this.loadPage(this));

// CREATE MAIN PANEL
main_panel = new Ext.Panel({
id:'main_tabpanel',
region:'center',
margins:'0 5 5 0',
resizeTabs:true,
minTabWidth: 120,
tabWidth:150,
enableTabScroll: true,
activeTab: 0,
//plugins: new Ext.ux.TabCloseMenu(),
items: {
id:'sitestats-panel',
title: 'Site Statistics',
autoScroll: true,
html: 'These are my site stats.'
}
});

// CREATE VIEWPORT
viewport = new Ext.Viewport({
layout:'border',
items:[header, page_list, main_panel]
});
},

loadPage : function(this){
alert('A node was clicked');
}

};
}();
Again, thanks for any help!

devnull
5 Mar 2008, 11:57 AM
page_list.on('dblclick', this.loadPage(this));

this will execute immediately. handlers want a reference to a function, not the results of a function:


page_list.on('dblclick', this.loadPage, this);

Hani79
5 Mar 2008, 11:59 AM
Well, I figured out a work around, but I don't know which method is more ideal. The way I originally was coding it or this way.

Instead of:


// DEFINE ACTION ON TREE NODE DOUBLE CLICK
page_list.on('dblclick', this.loadPage(this));
I put this as part of the pagelist definition:


listeners: {
dblclick: function(n) {
MyApplication.app.loadPage(n);
}

Hani79
5 Mar 2008, 12:00 PM
Clears that up. Thank you!