Why do my ExtJS 4.2.1 tree nodes no longer expand/collapse? -
i changed icons of extjs 4.2.1 tree panel , nodes not expand/collapse.
it seems related css:
.navtree .x-tree-elbow-img { height: 0; width: 0; }
but need css otherwise there blank space left of new icons. seems clickable area expand/collapse. how remove space occupied tree elbow image, still able click icons expand / collapse nodes?
also, expand/collapse nodes if new icon clicked or if text node labels clicked. how can change click targets?
also, if comment out above css, collapsing nodes makes white background appear while collapsing, desired background color takes effect. how can not show brief white background?
thanks 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>
may problem css. please apply classic theme , verify.
Comments
Post a Comment