PDA

View Full Version : Detect click within AsyncTreeNode



wmeitzen
4 Nov 2008, 3:32 PM
This code is based from the "layout-browser" example. Yes, I'm a new Extjs user.

Why doesn't clicking on, say, "TX Sales Tax" raise an alert dialog?

HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../include/Ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="../include/Ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../include/Ext-2.2/ext-all.js"></script>
<title>Admin System</title>
<style type="text/css">
html, body {
font:normal 12px tahoma;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
font:normal 10px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>
<script type="text/javascript" src="templates/default/index.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<!-- Start page content -->
<div id="start-div">
<div style="float:left;" ><img src="templates/default/images/layout-icon.gif" /></div>
<div style="margin-left:100px;">
<h2>Welcome!</h2>
<p>We hope you enjoy setting up your website. We have made every effort to make this system intuitive and comprehensive so you
can get up and running quickly.</p>
<p></p>
<p>Select a tutorial below to walk you through setting up your website.</p>
</div>
</div>

</body>
</html>


index.js:
Ext.onReady(function(){

var objStart = {
id: 'start-panel',
title: 'Start Page',
border: false,
layout: 'fit',
bodyStyle: 'padding:25px',
contentEl: 'start-div' // pull existing content from the page
};
// This is the taxes form:
var objTaxes = {
xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it
id: 'taxes-panel',
labelWidth: 175,
title: 'Taxes',
bodyStyle:'padding:15px',
width: 350,
labelPad: 20,
layoutConfig: {
labelSeparator: ''
},
defaults: {
width: 230,
msgTarget: 'side'
},
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'name',
allowBlank:false
},{
fieldLabel: 'Tax registration number',
name: 'taxregistrationnumber'
},{
fieldLabel: 'Calculation',
name: 'calculation'
},{
fieldLabel: 'Rate',
name: 'rate'
},{
fieldLabel: 'Calculation',
name: 'calculation'
},{
fieldLabel: 'Include with new Items',
name: 'includewithnewitems'
},{
fieldLabel: 'Include with new Specials',
name: 'includewithnewspecials'
},{
fieldLabel: 'Status',
name: 'status'
}
],
buttons: [{text: 'Save'},{text: 'Cancel'}]
};

Ext.QuickTips.init(); // what is this??

// This is the main content center region that will contain each example layout panel.
// It will be implemented as a CardLayout since it will contain multiple panels with
// only one being visible at any given time.
var contentPanel = {
id: 'content-panel',
region: 'center', // this is what makes this panel into a region within the containing layout
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
border: false,
items: [
objStart
,objTaxes
]
};

var objMainMenu = new Ext.tree.AsyncTreeNode({
expanded: true,
children: [
{
text: 'Menu Option 1',
leaf: true
}, {
text: 'Food',
id:'food',
leaf: false,
expanded: true,
children: [{
text: 'Modifier Groups',
id:'modifier-groups',
leaf: true
}]
}, {
text: 'Taxes',
leaf: false,
expanded: true,
children: [{
text: 'TX Sales Tax',
id:'taxes',
leaf: true
},{
text: 'Harris County Sales Tax',
id:'harris-county-sales-tax',
leaf: true
}]
}
]
});
// CODE BELOW NEVER FIRES WHY?
objMainMenu.on('click', function(node){
alert("got here!");
if(node.id == 'foo'){
// do something
}
});
// CODE ABOVE NEVER FIRES. WHY?
new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Admin System</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
floatable: false,
loader: new Ext.tree.TreeLoader(),
root: objMainMenu,
rootVisible: false
}, {
region: 'center',
title: 'Options',
collapsible: true,
split:true,
width: 225,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 5 0 0',
items: contentPanel
}, {
region: 'south',
title: 'Tutorials',
collapsible: true,
floatable: false,
html: 'Tutorials go here.',
split: true,
height: 100,
minHeight: 100
}]

});
});

darshanags
4 Nov 2008, 8:55 PM
var objMainMenu = new Ext.tree.AsyncTreeNode({
expanded: true,
children: [
{
text: 'Menu Option 1',
leaf: true
}, {
text: 'Food',
id:'food',
leaf: false,
expanded: true,
children: [{
text: 'Modifier Groups',
id:'modifier-groups',
leaf: true
}]
}, {
text: 'Taxes',
leaf: false,
expanded: true,
children: [{
text: 'TX Sales Tax',
id:'taxes',
leaf: true
},{
text: 'Harris County Sales Tax',
id:'harris-county-sales-tax',
leaf: true
}]
}
]
});
// CODE BELOW NEVER FIRES WHY?
objMainMenu.on('click', function(node){
alert("got here!");
if(node.id == 'foo'){
// do something
}
});


Why not a listener on the treenode? I can think of two options:

1st:



var objMainMenu = new Ext.tree.AsyncTreeNode({
expanded: true,
id:'atree',
children: [
{
text: 'Menu Option 1',
leaf: true
}, {
text: 'Food',
id:'food',
leaf: false,
expanded: true,
children: [{
text: 'Modifier Groups',
id:'modifier-groups',
leaf: true
}]
}, {
text: 'Taxes',
leaf: false,
expanded: true,
children: [{
text: 'TX Sales Tax',
id:'taxes',
leaf: true
},{
text: 'Harris County Sales Tax',
id:'harris-county-sales-tax',
leaf: true
}]
}
]
});

Ext.getCmp('atree').on('click', function(node){
alert("got here!");
if(node.id == 'foo'){
// do something
}
});


2nd:



var objMainMenu = new Ext.tree.AsyncTreeNode({
expanded: true,
id:'atree',
listeners:{
click:function(){
//do something here
}
},
children: [
{
text: 'Menu Option 1',
leaf: true
}, {
text: 'Food',
id:'food',
leaf: false,
expanded: true,
children: [{
text: 'Modifier Groups',
id:'modifier-groups',
leaf: true
}]
}, {
text: 'Taxes',
leaf: false,
expanded: true,
children: [{
text: 'TX Sales Tax',
id:'taxes',
leaf: true
},{
text: 'Harris County Sales Tax',
id:'harris-county-sales-tax',
leaf: true
}]
}
]
});

wmeitzen
4 Nov 2008, 9:39 PM
Thanks darshanags, but neither one worked. Adding the "listeners" code quietly failed; i.e., no error messages and an alert dialog didn't appear when I clicked on one of the children.

Adding the "getCmp" code prevented anything from displaying except for the "Welcome!" content.

Here is the objMainMenu variable only, since that is all I changed.


var objMainMenu = new Ext.tree.AsyncTreeNode({
expanded: true,
id: 'atree',
// the "listeners" code below fails quietly; no error messages but no alert dialog, either
// listeners: {
// click: function() {
// alert("got here!");
// }
// },
children: [
{
text: 'Menu Option 1',
leaf: true
}, {
text: 'Food',
id:'food',
leaf: false,
expanded: true,
children: [{
text: 'Modifier Groups',
id:'modifier-groups',
leaf: true
}]
}, {
text: 'Taxes',
leaf: false,
expanded: true,
children: [{
text: 'TX Sales Tax',
id:'taxes',
leaf: true
},{
text: 'Harris County Sales Tax',
id:'harris-county-sales-tax',
leaf: true
}]
}
]
});

// the "getCmp" code below prevented most of the layout to appear
// Ext.getCmp('atree').on('click', function(node){
// alert("got here!");
// if(node.id == 'foo'){
// // do something
// }
// });

darshanags
4 Nov 2008, 9:48 PM
try expand or collapse instead of click.

Animal
5 Nov 2008, 12:24 AM
{
region: 'center',
title: 'Options',
collapsible: true,
split:true,
width: 225,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 5 0 0',
items: contentPanel
}


Over-nesting. Just configure contentPanel with region: 'center', collapsible: true etc, and use it as the center region.

To listen for clicks on nodes, add a listener to the TreePanel: http://extjs.com/deploy/dev/docs/?class=Ext.tree.TreePanel&member=click

wmeitzen
5 Nov 2008, 7:58 AM
darshanags: using expand or collapse didn't work; they failed in different ways. Please see my code for objMainMenu below for what it did.

Animal: Where exactly should I put the code you pasted in? Also, I don't have the word "TreePanel" in my code, so I don't know how to add a listener to it. I don't know ExtJS well enough to follow your advice.


var objMainMenu = new Ext.tree.AsyncTreeNode({
expanded: true,
id: 'atree',
// the "listener" code below fails in different ways:
// listeners: {
// click: function() { // fails quietly
// expand: function() { // raises two dialogs at startup, but never again
// collapse: function() { // fails quietly
// alert("got here!");
// }
// },
children: [
{
text: 'Menu Option 1',
leaf: true
}, {
text: 'Food',
id:'food',
leaf: false,
expanded: true,
children: [{
text: 'Modifier Groups',
id:'modifier-groups',
leaf: true
}]
}, {
text: 'Taxes',
leaf: false,
expanded: true,
children: [{
text: 'TX Sales Tax',
id:'taxes',
leaf: true
},{
text: 'Harris County Sales Tax',
id:'harris-county-sales-tax',
leaf: true
}]
}
]
});
// the "getCmp" code below prevented most of the layout to appear with "click", "expand", or "collapse"
// Ext.getCmp('atree').on('click', function(node){
// Ext.getCmp('atree').on('expand', function(node){
// Ext.getCmp('atree').on('collapse', function(node){
// alert("got here!");
// if(node.id == 'foo'){
// do something
// }
// });

Animal
5 Nov 2008, 8:01 AM
xtype: 'treepanel', means a TreePanel.

That code I quoted was your code! I told you what to do with it.

wmeitzen
5 Nov 2008, 8:15 AM
Animal: I was in the process of correcting my post (about not seeing "treepanel"), but you responded before I could finish my edit. Anyway, thanks! For those that run into the same issue, I'll post my code soon.

wmeitzen
5 Nov 2008, 12:17 PM
As promised, here is my solution so far. It's probably not a great example, and I'll probably look back on this one day and say "yuk," but it's what I was trying to achieve.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../include/Ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="../include/Ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../include/Ext-2.2/ext-all.js"></script>
<title>Admin System</title>
<style type="text/css">
html, body {
font:normal 12px tahoma;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
font:normal 10px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>
<script type="text/javascript" src="templates/default/index.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<!-- Start page content -->
<div id="start-div">
<div style="float:left;" ><img src="templates/default/images/layout-icon.gif" /></div>
<div style="margin-left:100px;">
<h2>Welcome!</h2>
<p>We hope you enjoy setting up your website. We have made every effort to make this system intuitive and comprehensive so you
can get up and running quickly.</p>
<p></p>
<p>Select a tutorial below to walk you through setting up your website.</p>
</div>
</div>

</body>
</html>

index.js:

Ext.onReady(function(){

var objStart = {
id: 'start-panel',
title: 'Start Page',
border: false,
layout: 'fit',
bodyStyle: 'padding:25px',
contentEl: 'start-div' // pull existing content from the page
};
// This is the taxes form:
var objTaxes = {
xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it
id: 'taxes-panel',
labelWidth: 175,
title: 'Taxes',
bodyStyle:'padding:15px',
width: 350,
labelPad: 20,
layoutConfig: {
labelSeparator: ''
},
defaults: {
width: 230,
msgTarget: 'side'
},
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'name',
allowBlank:false
},{
fieldLabel: 'Tax registration number',
name: 'taxregistrationnumber'
},{
fieldLabel: 'Calculation',
name: 'calculation'
},{
fieldLabel: 'Rate',
name: 'rate'
},{
fieldLabel: 'Calculation',
name: 'calculation'
},{
fieldLabel: 'Include with new Items',
name: 'includewithnewitems'
},{
fieldLabel: 'Include with new Specials',
name: 'includewithnewspecials'
},{
fieldLabel: 'Status',
name: 'status'
}
],
buttons: [{text: 'Save'},{text: 'Cancel'}]
};

// Ext.QuickTips.init(); // what is this??

// This is the main content center region that will contain each example layout panel.
// It will be implemented as a CardLayout since it will contain multiple panels with
// only one being visible at any given time.
var contentPanel = {
id: 'content-panel',
region: 'center', // this is what makes this panel into a region within the containing layout
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
border: false,
items: [
objStart // activeItem=0
,objTaxes // activeItem=1
]
};

var objMainMenu = new Ext.tree.AsyncTreeNode({
expanded: true,
id: 'atree',
border: false,
children: [
{
text: 'Welcome',
leaf: true
}, {
text: 'Food',
id:'food',
leaf: false,
expanded: true,
children: [{
text: 'Modifier Groups',
id:'modifier-groups',
leaf: true
}]
}, {
text: 'Taxes',
leaf: false,
expanded: true,
children: [{
text: 'TX Sales Tax',
id:'tx-sales-tax',
leaf: true
},{
text: 'Harris County Sales Tax',
id:'harris-county-sales-tax',
leaf: true
}]
}
]
});
new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Admin System</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
listeners: {
click: function(objNode, objEvent) {
Clickareeno(this, objNode, objEvent, contentPanel);
}
},
width: 200,
autoScroll: true,
split: true,
floatable: false,
loader: new Ext.tree.TreeLoader(),
root: objMainMenu,
rootVisible: false
}, {
region: 'center',
title: 'Options',
collapsible: true,
split:true,
width: 225,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 5 0 0',
items: contentPanel
}, {
region: 'south',
title: 'Tutorials',
collapsible: true,
floatable: false,
html: 'Tutorials go here.',
split: true,
height: 100,
minHeight: 100
}]

});
});
function Clickareeno(objThis, objNode, objEvent, objPanel) {
var objPreviousNode = objThis.selModel.selNode || {};
// if(objNode.leaf && objNode.id != objPreviousNode.id) { // ignore clicks on folders and currently selected node
if(objNode.id != objPreviousNode.id) { // ignore clicks on currently selected node
// alert("clicked "+objNode.id);
if (objNode.id=="tx-sales-tax" || objNode.id=="harris-county-sales-tax") {
Ext.getCmp('content-panel').layout.setActiveItem('taxes-panel');
} else {
Ext.getCmp('content-panel').layout.setActiveItem('start-panel');
}
}
}

Animal
5 Nov 2008, 2:25 PM
Listen.

The code below is overnested.

Why wrap your "contentPanel" in a layer of Panelling?

Whyt don't you just configure contentPanel as the center region, and use it as the center region?



{
region: 'center',
title: 'Options',
collapsible: true,
split:true,
width: 225,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 5 0 0',
items: contentPanel
}


And size configurations are meaningless on a center region. The border regions get sized, the center takes up whatever's left.