PDA

View Full Version : Why do my ExtJS 4.2.1 tree nodes no longer expand/collapse?



xjscrafter
29 May 2014, 7:20 PM
I changed the icons of my ExtJS 4.2.1 tree panel and now the nodes do not expand/collapse.

It seems related to this CSS:


.navTree .x-tree-elbow-img {
height: 0;
width: 0;
}

But I need that CSS otherwise there is blank space to the left of my new icons. It seems that is the clickable area to expand/collapse. So how do I remove the space that would be occupied by the tree elbow image, but still be able to click the icons to expand / collapse nodes?

Also, I would like to expand/collapse the nodes if my new icon is clicked or if the text for the node labels is clicked. How can I change the click targets?

Also, if I comment out the above CSS, collapsing my nodes makes a white background appear while collapsing, then my desired background color takes effect. How can I not show that brief white background?

Thanks much in advance.


Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
xtype: 'treepanel',
padding: 0,
margin: 0,


width: 200,
rootVisible: false,
lines: false,


bodyCls: 'navTree',
cls: 'navTree',
viewConfig: {
cls: 'navTree'
},


store: Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{
text: "Custom", iconCls: 'arrowTreeIcon', expanded: true, children: [
{ text: "Joe's Dashboard", iconCls: 'noTreeIcon', leaf: true },
{ text: "My First Dashboard", iconCls: 'noTreeIcon', leaf: true}
]
},
{
text: "Pre-defined", iconCls: 'arrowTreeIcon', expanded: true, children: [
{ text: "CTO View", iconCls: 'noTreeIcon', leaf: true },
{ text: "IT Manager View", iconCls: 'noTreeIcon', leaf: true},
{ text: "System Engineer View", iconCls: 'noTreeIcon', leaf: true}
]
}
]
}
})
}]
});
});

.navTree {
background-color: #999999;
}


.navTree .x-grid-row .x-grid-cell {
background-color: #999999;
}


.navTree .x-grid-body {
border-color: #999999;
}


.navTree .x-grid-header-ct {
border-color: #999999;
}


.arrowTreeIcon {
background-color:#999999;
width: 20px;
height: 20px;
background-image: url('arrowTreeCollapsed.png') !important;
}


.x-grid-tree-node-expanded .arrowTreeIcon {
background-color:#999999;
width: 20px;
height: 20px;
background-image: url('arrowTreeExpanded.png') !important;
}


.navTree .noTreeIcon {
background-color:#999999;
background-image: none !important;
}


.navTree .x-tree-elbow-img {
height: 0;
width: 0;
}


.navTree .x-tree-node-text {
font-size: 12px;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="../../../ext-4.2.1.883/resources/css/ext-all-debug.css"/>
<link rel="stylesheet" type="text/css" href="app.css"/>
<script type="text/javascript" src="../../../ext-4.2.1.883/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
</html>




49166
49167

xjscrafter
30 May 2014, 7:35 AM
Can anyone provide insight on this?