PDA

View Full Version : Click events of custom HTML elements in a TreePanel not working



dee1
17 Feb 2012, 2:53 AM
In V3 using the TreeCheckNodeUI to add custom HTML elements (eg drop down list) to the tree nodes works fine including the click events working.

In V4 overriding the Ext.tree.Column initComponent() inserts the HTML elements OK (similar to V3) but the click events don’t work, as follows:

Click Problems in V4 (using Firefox):


The drop down lists values don’t change when they’re clicked/selected
Also, if the drop down element is clicked the list appears (as expected), clicked again it disappears (as expected), clicked again it wont reappear unless another object is clicked and the drop down list element loses focus first (not as expected)

Is there something in V4 that we might have overlooked that needs to be overridden to make the click events work for the inserted HTML elements?
(Perhaps this relates to the HTML element click events/ focus being propagated to the containing tree).

Test code provided below, any suggestions on how to get the HTML select click events working are appreciated:




<!DOCTYPE html>

<html>
<head>

<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2a/ext-all.js"></script>

</head>

<script type="text/javascript">



Ext.override(Ext.tree.Column, {

initComponent: function() {
var origRenderer = this.renderer || this.defaultRenderer,
origScope = this.scope || window;

this.renderer = function(value, metaData, record, rowIdx, colIdx, store, view) {
var buf = [],
format = Ext.String.format,
depth = record.getDepth(),
treePrefix = Ext.baseCSSPrefix + 'tree-',
elbowPrefix = treePrefix + 'elbow-',
expanderCls = treePrefix + 'expander',
imgText = '<img src="{1}" class="{0}" />',
checkboxText= '<input type="button" role="checkbox" class="{0}" {1} />',
formattedValue = origRenderer.apply(origScope, arguments),
href = record.get('href'),
target = record.get('hrefTarget'),
cls = record.get('cls');

while (record) {
if (!record.isRoot() || (record.isRoot() && view.rootVisible)) {
if (record.getDepth() === depth) {
buf.unshift(format(imgText,
treePrefix + 'icon ' +
treePrefix + 'icon' + (record.get('icon') ? '-inline ' : (record.isLeaf() ? '-leaf ' : '-parent ')) +
(record.get('iconCls') || ''),
record.get('icon') || Ext.BLANK_IMAGE_URL
));
if (record.get('checked') !== null) {
buf.unshift(format(
checkboxText,
(treePrefix + 'checkbox') + (record.get('checked') ? ' ' + treePrefix + 'checkbox-checked' : ''),
record.get('checked') ? 'aria-checked="true"' : ''
));
if (record.get('checked')) {
metaData.tdCls += (' ' + treePrefix + 'checked');
}
}
if (record.isLast()) {
if (record.isExpandable()) {
buf.unshift(format(imgText, (elbowPrefix + 'end-plus ' + expanderCls), Ext.BLANK_IMAGE_URL));
} else {
buf.unshift(format(imgText, (elbowPrefix + 'end'), Ext.BLANK_IMAGE_URL));
}

} else {
if (record.isExpandable()) {
buf.unshift(format(imgText, (elbowPrefix + 'plus ' + expanderCls), Ext.BLANK_IMAGE_URL));
} else {
buf.unshift(format(imgText, (treePrefix + 'elbow'), Ext.BLANK_IMAGE_URL));
}
}
} else {
if (record.isLast() || record.getDepth() === 0) {
buf.unshift(format(imgText, (elbowPrefix + 'empty'), Ext.BLANK_IMAGE_URL));
} else if (record.getDepth() !== 0) {
buf.unshift(format(imgText, (elbowPrefix + 'line'), Ext.BLANK_IMAGE_URL));
}
}
}
record = record.parentNode;
}
if (href) {
buf.push('<a href="', href, '" target="', target, '">', formattedValue, '</a>');
} else {
buf.push(formattedValue);
}
if (cls) {
metaData.tdCls += ' ' + cls;
}

//DEMO CODE modified here to add the HTML <select> element

return buf.join('') +'<select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>';

};
this.callParent(arguments);
}
});


Ext.application({

name : 'MyApp',

launch : function() {

var store = Ext.create('Ext.data.TreeStore', {
root : {
expanded : true,
children : [{
text : "Vehicle Type",
checked:false,
leaf : true
}, {
text : "Other",
expanded : true,
children : [{
text : "Vehicle Type",
checked:false,
leaf : true
}, {
text : "Vehicle Type",
checked:false,
leaf : true
}]
}, {
text : "Vehicle Type",
checked:false,
leaf : true
}]
}
});

Ext.create('Ext.container.Viewport', {
layout : 'border',

items : [{
xtype : 'panel',
title : 'My Panel',
region : 'center',
items : [{
xtype : 'treepanel',
title : 'My Tree Panel',
store : store,

viewConfig : {

}
}]
}, {
xtype : 'panel',
width : 595,
title : 'My Panel',
html : '<select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select><br><select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option> </select>',
region : 'west'
}]

})
}
});


</script>

<body>

</body>
</html>

mitchellsimoens
17 Feb 2012, 4:56 AM
You can render whatever you want into any element. So if you can find the element you want to append a child to, then get the Ext.Element instance of it and use appendChild or one of the insert methods.

dee1
17 Feb 2012, 6:20 AM
Thanks for the info - I realize my question wasn't very clear, Ive revised and added more details for clarity.

Basically, I've been able to add the elements to the TreePanel nodes by overriding the Ext.tree.Column initComponent() function given the HTML element details come from the store (I was hoping this would have the same effect of using Ext.Element??).

The problem is the mouse clicks aren't working (the element seems to be inserted fine).
Hence, will inserting HTML elements (drop down lists) in the TreePanel cause conflicts with click events?
If so, is there an approach to solve this?
Thanks.

dee1
20 Feb 2012, 6:55 AM
Possibly a bug?
Chrome ok but Firefox broken.

Ive put together a simpler example (see below) that just uses the 'templatecolumn' xtype template to render HTML - works fine in Chrome but not Firefox (various results in Safari/ IE).

The bug seems to relate to the 'x-grid-row' style for the the tree row <tr> element (<tr class="x-grid-row x-grid-row-selected x-grid-row-focused">)
Although going through the code it's a mystery where/ how this causes a problem.

Any pointers on where this might be causing a problem would be a real help



<!DOCTYPE html>

<html>
<head>

<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2a/ext-all.js"></script>

</head>

<script type="text/javascript">




Ext.application({

name : 'MyApp',

launch : function() {

var store = Ext.create('Ext.data.TreeStore', {
fields:['text', 'checked', 'leaf', 'dropDown'],
root : {
expanded : true,
children : [{
text : "Vehicle Type",
checked:false,
leaf : true,
dropDown:'N/A'
}, {
text : "Other",
expanded : true,
children : [{
text : "Vehicle Type",
checked:false,
leaf : true,
dropDown:'<select><option value="volvo">Volvo</option><option value="saab">Saab</option></select>'
}, {
text : "Vehicle Type",
checked:false,
leaf : true,
dropDown:'N/A'
}]
}, {
text : "Vehicle Type",
checked:false,
leaf : true,
dropDown:'<select><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>'

}]
}
});

Ext.create('Ext.container.Viewport', {
layout : 'fit',



items : [{
xtype : 'treepanel',
title : 'My Tree Panel',
store : store,
fields:['text', 'dropDown'],

columns: [
{text: 'Decription', dataIndex:'text', xtype:'treecolumn', flex:1},
{text: 'Vehicle Type', xtype: 'templatecolumn', tpl: '{dropDown}', flex:1}

],
viewConfig : {

}

}]

})
}
});


</script>

<body>

</body>
</html>