PDA

View Full Version : Please ...



eCoast
15 Mar 2011, 5:36 PM
Hi all ... my very first post - please be kind :)

I'm extending a class and need to pass an ID from the instance to the function Ext.getCmp()
on the onClick Handler of the Refresh Button that is inside the base class.

Here's the ID in question:
var tree = Ext.getCmp('tree_SysMgr');
... this is inside the base class AdminConsole_WestPanel

The value 'tree_SysMgr' reflects the ID of an item on the newly instantiated classes AdminConsole_WestPanel_SysMgr & AdminConsole_WestPanel_InterfaceMgr


items : new Ext.tree.TreePanel({
id : 'tree_SysMgr',

items : new Ext.tree.TreePanel({
id : 'tree_InterfaceMgr',




var AdminConsole_WestPanel = Ext.extend(Ext.Panel, {

//*********************************************
//This is container for all Admin Console Trees
//*********************************************

id : 'AdminConsole_WestPanel', //Defualt ID ... this should be in the incoming config
title : 'AdminConsole_WestPanel', //Defualt Title ... this should be in the incoming config

// New function added
initComponent: function(params) {

//Reusable config options here
Ext.apply(this, {
split : true,
width : 200,
collapsible : true,
margins : '3 0 3 3',
cmargins : '3 3 3 3',

tools : [
{
id : 'refresh',
on :
{
click : function(params)
{
var tree = Ext.getCmp('tree_SysMgr');
tree.body.mask('Loading', 'x-mask-loading');
tree.root.reload();
tree.root.collapse(true, false);
setTimeout(function()
{
// mimic a server call
tree.body.unmask();
tree.root.expand(true);
}
, 1000);
}
}
}
]

});
// And Call the superclass to preserve baseclass functionality
AdminConsole_WestPanel.superclass.initComponent.apply(this, arguments);
// Here you can add functionality that requires the object to
// exist, like event handling.
this.on('click', function() {}, this);
},
myNewFunction: function() {},
// Override an existing function
onRender: function() {
AdminConsole_WestPanel.superclass.onRender.apply(this, arguments);
this.myNewFunction();
}
});

function AdminConsole_WestPanel_Tree(config) {
return new Ext.tree.TreePanel(Ext.apply({//Pre-configured config options go here
border : false,
loader : new Ext.tree.TreeLoader(),
rootVisible : false,
lines : false,
autoScroll : true
}, config));
};


var AdminConsole_WestPanel_SysMgr = new AdminConsole_WestPanel({

//*********************************************
//This is an instance of the System Manager Tree
//*********************************************

id : 'pnl_west_SysMgr',
title : 'System Manager',

items : AdminConsole_WestPanel_Tree({
id : 'tree_SysMgr',
root : AdminConsole_WestPanel_SysMgr_RootData
})
});

var AdminConsole_WestPanel_InterfaceMgr = new AdminConsole_WestPanel({

//*********************************************
//This is an instance of the Interface Manager Tree
//*********************************************

id : 'pnl_west_InterfaceMgr',
title : 'Interface Manager',

items : AdminConsole_WestPanel_Tree({
id : 'tree_InterfaceMgr',
root : AdminConsole_WestPanel_InterfaceMgr_RootData
})
});

eCoast
15 Mar 2011, 6:05 PM
Here's what I'm trying to accomplish:

The WEST panels instances each have a panel item with a tree and a corresponding refresh button (notice I moved the button next to the collapse button in the panel form containing the tree. I'd like to encapsulate the refresh function in the base class and config from new panel instances - this has to be possible ?!?!?

http://www.ecoastsoftware.com/senchaforum/RefreshButtons.png

Grolubao
16 Mar 2011, 2:07 AM
Take a look here:

http://www.vinylfox.com/the-hottest-extjs-30-feature-youve-never-heard-about/

By using the ref property you can achieve what you want, from what I could understand

eCoast
16 Mar 2011, 10:37 AM
Hi Grolubao ... Dank U wel for your response!!

... I looked at the ref example (again) and came to the same realization that this isn't really a ref issue as much as its an issue of me not know how to pass a variable to a function ?!?!? This isn't VB anymore!

anyhoo ... I've changed my game plan to use factories instead of extensions ... this got rid of a bunch of code. The basic problem still remains ...

HOW do I pass 'tree_SysMgr' to into the function TreeRefresh(). I'm going mad trying to figure this out. Does the param object variable come into play in this ???

... I get the basic premise of calling functions but adding any vars to the call TreeRefresh (for example: TreeRefresh(myVar)) breaks the function.

So here's the code again:
I'm specifically trying to solve this problem: At the end of the snippet you'll see this line:
AdminConsole_WestPanel_SysMgr.tools[0].handler = TreeRefresh;

I'm trying to do:
AdminConsole_WestPanel_SysMgr.tools[0].handler = TreeRefresh('tree_SysMgr');

ps ... even better yet, can't I just pass the tree object and in the first place?
AdminConsole_WestPanel_SysMgr.tools[0].handler = TreeRefresh(AdminConsole_WestPanel_SysMgr.tree_SysMgr);
and then get rid of this line in TreeRefresh():
var tree = Ext.getCmp('tree_SysMgr');






function AdminConsole_WestPanel(config) {
//*********************************************
//This is the factory for the Base TreePanel Container Panel
//*********************************************
return new Ext.Panel(Ext.apply({
split : true,
width : 200,
collapsible : true,
margins : '3 0 3 3',
cmargins : '3 3 3 3',
tools : [{id: 'refresh'}]
}, config));
};

function AdminConsole_WestPanel_Tree(config) {
//*********************************************
//This is the factory for the Base TreePanel
//*********************************************
return new Ext.tree.TreePanel(Ext.apply({
border : false,
loader : new Ext.tree.TreeLoader(),
rootVisible : false,
lines : false,
autoScroll : true
}, config));
};

function TreeRefresh(params)
//*********************************************
//This function gets called from the Refresh Button Click
//*********************************************
{
var tree = Ext.getCmp('tree_SysMgr');
tree.body.mask('Loading', 'x-mask-loading');
tree.root.reload();
tree.root.collapse(true, false);
setTimeout(function()
{
// mimic a server call
tree.body.unmask();
tree.root.expand(true);
}
, 1000);
}

var AdminConsole_WestPanel_SysMgr = new AdminConsole_WestPanel({

//*********************************************
//This is an instance of the System Manager Tree
//*********************************************

id : 'pnl_west_SysMgr',
title : 'System Manager',

items : AdminConsole_WestPanel_Tree({
id : 'tree_SysMgr',
ref : 'tree_SysMgr',
root : AdminConsole_WestPanel_SysMgr_RootData
})
});
AdminConsole_WestPanel_SysMgr.tools[0].handler = TreeRefresh;
console.log(AdminConsole_WestPanel_SysMgr.tools[0].handler);

rivarecords
16 Mar 2011, 11:50 AM
Have you just tried:



tools : [{id: 'refresh', handler:TreeRefresh}]

eCoast
16 Mar 2011, 5:39 PM
Hi Rivarecords ... thank you very much for responding.

Your solution would be great if there is only one tree and one tree panel ... in that case I would have left all these elements in their original nested form.

However ...there are multiple instances of TREE panels that all use the same base class to which the refresh tool belongs. At the end there will be calls like this:


AdminConsole_WestPanel_SysMgr.tools[0].handler = TreeRefresh('tree_SysMgr'); //Passing a string to the function's getCmp()
-or-
AdminConsole_WestPanel_SysMgr.tools[0].handler = TreeRefresh(AdminConsole_WestPanel_SysMgr.tree_SysMgr); //passing a reference to the tree so that the function TreeRefresh() doesn't have to go out to find the tree

AdminConsole_WestPanel_InterfaceMgr.tools[0].handler = TreeRefresh('tree_InterfaceMgr');//Passing a string to the function's getCmp()
or
AdminConsole_WestPanel_InterfaceMgr.tools[0].handler = TreeRefresh(AdminConsole_WestPanel_Interface.tree_Interface); //passing a reference to the tree so that the function TreeRefresh() doesn't have to go out to find the tree

AdminConsole_WestPanel_ReportsMgr.tools[0].handler = TreeRefresh('tree_ReportsMgr');//Passing a string to the function's getCmp()
or
AdminConsole_WestPanel_ReportsMgr.tools[0].handler = TreeRefresh(AdminConsole_WestPanel_ReportsMgr.tree_ReportsMgr); //passing a reference to the tree so that the function TreeRefresh() doesn't have to go out to find the tree

[... and so forth ...]

I've broken everything out as granularly as possible to keep track of what calls what but I just can't figure out how to pass a parameter to the function TreeRefresh().

You would think is would be as easy as:
AdminConsole_WestPanel_SysMgr.tools[0].handler = TreeRefresh('tree_SysMgr')
but trying that I get


tree.body is undefined
[Break on this error] tree.body.mask('Loading', 'x-mask-loading');

on this line

function TreeRefresh(params)
//*********************************************
//This function gets called from the Refresh Button Click
//*********************************************
{
var tree = Ext.getCmp('tree_SysMgr');
//----->
tree.body.mask('Loading', 'x-mask-loading');
//----->
tree.root.reload();
tree.root.collapse(true, false);
setTimeout(function()
{
// mimic a server call
tree.body.unmask();
tree.root.expand(true);
}
, 1000);
}


Clearly the 'params' variable has something to do with something - but what ??? And how to play nice with it to get my variable passed in to the function?

I've tried AdminConsole_WestPanel_SysMgr.tools[0].handler = TreeRefresh(params, 'tree_SysMgr') just for giggles but that doesn't work. I've been passing variables around since Applesoft Basic in '79 and have been steadily working in VB ever since - this prototype notation is completely foreign to me.

Just a question to you all ... Am I wasting my time with extjs if I have no java background ... I'll happily go back to vb.net. I've read the scope docs, extension docs, remedial js docs, and screencasts and after 3 months of 12 hour days I'm no closer to figuring this out - what's the next step ???? Any success stories of 40+ year old programmers who figured this out with tons of programming experience but 0 java/js skills?

rivarecords
17 Mar 2011, 3:45 AM
Please forgive me if I'm being dense.




handler: function(){

TreeRefresh('tree_SysMgr')

}




function TreeRefresh(obj)
//*********************************************
//This function gets called from the Refresh Button Click
//*********************************************
{
var tree = Ext.getCmp(obj);
tree.body.mask('Loading', 'x-mask-loading');
tree.root.reload();
tree.root.collapse(true, false);
setTimeout(function()
{
// mimic a server call
tree.body.unmask();
tree.root.expand(true);
}
, 1000);
}

Virtual Ark
17 Mar 2011, 5:23 AM
I'm not 100% I understand what your trying to achieve here, but maybe this can help...

Event handlers for an object, require a specific set of parameters, defined by the class your dealing with. For example, a tool handler uses the following: function( event, element, panel, config ), I grabbed this out of the API reference for the panel component.

I'd like to suggest another approach, which is to define your own event within your base panel component, which is fired by the handler for the refresh button.

So in your base panel initComponent method:-


this.addEvents( "refresh" );

Then within the handler for the refresh button:-


panel.fireEvent( "refresh", any, parameters, you, like );

Now you can define a common event handler within your base tree to handle the refresh. For this example lets call that method onClickRefresh. Wire up the event as follows:-


parentPanel.on( "refresh", tree.onClickRefresh );

You will need to adapt this to work with your factory pattern but I think this may work for you...

Good luck!