PDA

View Full Version : TreePanel not show arrow



boytrum
9 Jul 2013, 2:27 AM
I'm practicing with TreePanel in Extjs 4 but I have a proplem, my tree is not show arrows on the front label.
Error like this 44789
not like this tutorial http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.tree.Panel
44790
My code:


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.define('App.view.pnTree', {
extend: 'Ext.window.Window',
alias: 'widget.pndeviceTree',
height: 400,
width: 400,
layout: {
type: 'fit'
},
title: 'My Window',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'treepanel',
title: 'Simple Tree',
width: 200,
height: 150,
store: _store,
useArrows:true,
rootVisible: false
}]
});
me.callParent(arguments);
}
});

I dont know why!? :(( Help me :(( :((

Farish
9 Jul 2013, 6:56 AM
I dont know if its designed to work like this or if its a bug, when useArrows is set to true, the lines are not shown but still the tree should maintain its form (indentation of child nodes) and an arrow should be shown on the parent node. This should work. I tried it in the code editor of API documentation. which ExtJS version are you using? does it work if you remove useArrows?

boytrum
9 Jul 2013, 5:27 PM
I have tried remove useArrows but nothing changes :( I'm working on Extjs 4.2 and everything works normaly except Tree panel :s

slemmon
10 Jul 2013, 2:32 PM
Your code worked ok for me in 4.2.0 and 4.2.1.
Are you linking to the CSS file distributed in the SDK download that came with the .js lib file you're linking to? Or are you using an older CSS file from a previous version?



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.define('App.view.pnTree', {
extend: 'Ext.window.Window',
alias: 'widget.pndeviceTree',
height: 400,
width: 400,
layout: {
type: 'fit'
},
title: 'My Window',




initComponent: function() {
var me = this;




Ext.applyIf(me, {
items: [
{
xtype: 'treepanel',
title: 'Simple Tree',
width: 200,
height: 150,
store: _store,
useArrows:true,
rootVisible: false
}]
});
me.callParent(arguments);
}
});


Ext.widget('pndeviceTree').show();

nipun.sencha
17 Jan 2017, 3:18 AM
Try like this, hopefully this works for you.



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.define('App.view.pnTree', {
extend: 'Ext.window.Window',
alias: 'widget.pndeviceTree',
height: 400,
width: 400,
layout: {
type: 'fit'
},
title: 'My Window',




initComponent: function() {
var me = this;




Ext.applyIf(me, {
items: [
{
xtype: 'treepanel',
title: 'Simple Tree',
width: 200,
height: 150,
store: _store,
//useArrows:true,
rootVisible: false
}]
});
useArrows:true;
me.callParent(arguments);
}
});


Ext.widget('pndeviceTree').show();
[/QUOTE]