PDA

View Full Version : Need to change DOM structure of ExtJS 4.2 tree??



muralisk477
5 Feb 2014, 11:39 PM
I want to add some ARIA-Attributes like role(as treeitem and group) and aria-level into TREE DOM.Could any one please help on this??
and
I want to add all child leaves in one <ui> list. and i need to set role as group then Screen reader can detect that group and read it correctly?

palakurthivishal
6 Feb 2014, 6:04 AM
Hello muralisk477,
Try this snippet, I guess this suits your requirements.

var store = Ext.create('Ext.data.TreeStore', { root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "algebra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});


Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
renderer : function(){debugger;},
listeners : {
afterrender : function(cmp){
var dom = cmp.getEl().dom;
var leaves = dom.getElementsByClassName('x-grid-tree-node-leaf'); // this class gets applied to leaves
Ext.each(leaves, function(leaf){
// add whatever attributes here
leaf.setAttribute('data-aria',123);
})
}
}
});

muralisk477
7 Feb 2014, 1:08 AM
Thanks Vishal for your response...

palakurthivishal
7 Feb 2014, 5:02 AM
No problem, I just wan't to ask you whether that was the exact solution you needed?

muralisk477
11 Feb 2014, 9:58 PM
Actually, I was out of station from last week, let me check and i ll get back to you vishal,ThanksMurali S