PDA

View Full Version : Assign title label to each HTML element created by tree panel



rbraddy
11 Jul 2014, 1:45 PM
Hi,

We are doing QA automation and need a unique identifier within the browser DOM for each tree panel node. The json store has "title" labels in it, but those do not get mapped across to each HTML element by the tree panel view.

It's unclear to me which view event to intercept or how best to approach adding a title or other unique identifier to each tree panel node that is generated from the tree's store.

Thanks in advance for any help.
Rick

rbraddy
12 Jul 2014, 7:34 AM
I was able to resolve this by overriding the collectData method of Ext.tree.View. It's kind of a sledge hammer solution, but will actually work out okay, as we want this behavior for all ExtJS tree panels to enable QA automation testing with selenium.

This change simply adds a new "qaid" label to each tree node's corresponding HTML outer element that corresponds to the node's "title" setting.

Hope that's helpful to someone.




//
// Override the base ExtJS tree view and modify it to add "qaid" tag to generated node HTML elements
//
Ext.define( "MyApp.tree.View", {
override: "Ext.tree.View",


// globally override how tree views are created to add "qid" to generated HTML elements
// to support QA automation with Selenium.
collectData: function(records) {
var data = this.callParent(arguments),
rows = data.rows,
len = rows.length,
i = 0,
row, record;


for (; i < len; i++) {
row = rows[i];
record = records[i];
if (record.get('qtip')) {
row.rowAttr = 'data-qtip="' + record.get('qtip') + '"';
if (record.get('qtitle')) {
row.rowAttr += ' ' + 'data-qtitle="' + record.get('qtitle') + '"';
}
}


if (record.get('text')) {
row.rowAttr += ' ' + 'qaid="' + record.get('text') + '"';
}


if (record.isExpanded()) {
row.rowCls = (row.rowCls || '') + ' ' + this.expandedCls;
}
if (record.isLeaf()) {
row.rowCls = (row.rowCls || '') + ' ' + this.leafCls;
}
if (record.isLoading()) {
row.rowCls = (row.rowCls || '') + ' ' + this.loadingCls;
}
}


return data;
}


});