I need to show json of extjs compatible items as tree, here is how it looks like
{
text: 'Menu Root',
expanded: true,
items: [
{ text: 'detention', leaf: true },
{ text: 'homework', expanded: true, items: [
{ text: 'book report', leaf: true },
{ text: 'algebra', leaf: true}
] },
{ text: 'buy lottery tickets', leaf: true }
]
}
if items are children it works fine but with items it does not. I did not find a way in ExtJS6 docs to make treepanel consider items as children. FYI these are extjs items that are to be embeded on to some view. I am using setRootNode to add this to treestore
It can be achieved by configuring defaultRootProperty in the tree store config to "items" which defaults to: "children".
Ext.application({
name: 'Fiddle',
launch: function () {
var store = Ext.create('Ext.data.TreeStore', {
defaultRootProperty : 'items', // need change the default "children" to "items"
root: {
text: 'Menu Root',
expanded: true,
items: [
{ text: 'detention', leaf: true },
{ text: 'homework', expanded: true, items: [
{ 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,
renderTo: Ext.getBody()
});
}
});
<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.2.1/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"><!-- framework javascript --><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.2.1/ext-all-debug.js"></script><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.2.1/packages/ext-theme-neptune/build/ext-theme-neptune-debug.js"></script>
Related
I need to create a child in a tree view how to do that kindly help. I have tried like this but it's not working.
var myLocations = new Ext.Panel({
title: 'my work',
id: 'student',
height: 100,
autoScroll: true,
iconCls: 'myPanel',
// ,autoLoad: { url: 'UserLocDetails.aspx?UserName=' + strUser }
children: [{
text: "Leaf node (<i>no folder/arrow icon</i>)",
title: 'dasdasd',
leaf: true,
id: 'myLoc',
qtitle: 'Sample Tip Title',
qtip: 'Tip body'
}]
});
You need to create a TreeStore in order to store data for a tree, and some component that can display a tree, for example a TreePanel. Try the following code, it is for Ext JS 7.3.0 Classic Material, but can be adopted to other versions:
Ext.define('myTreeStore', {
extend: 'Ext.data.TreeStore',
root: {
expanded: true
},
proxy: {
type: 'memory',
reader: {
type: 'json'
}
},
data: {
children: [{
text: 'Main 1',
leaf: true
}, {
text: 'Main 2',
children: [{
text: 'Sub 21',
leaf: true
},{
text: 'Sub 22',
leaf: true
}]
}, {
text: 'Main 3',
leaf: true
}]
}
})
Ext.application({
name: 'Fiddle',
launch: function () {
const treeStore = Ext.create('myTreeStore');
Ext.create('Ext.tree.Panel', {
rootVisible: false,
renderTo: Ext.getBody(),
title: 'Tree Example',
width: 400,
store: treeStore,
});
}
});
ExtJS6: Second instance of TreeStore has no grandchildren.
I have a class, MyStore, which inherits from TreeStore.
Then, I created an instance of MyStore to be displayed in a treepanel.
So far so good.
Then, I created another instance of MyStore to be displayed in another treepanel.
Here comes the problem: the second treepanel does not have grandchild. All it has are it's root node and it's root node's children.
How do I code this so that the 2nd (and succeeding) instance of TreeStore will have grandchildren?
https://fiddle.sencha.com/#fiddle/1ehq
Ext.define('MyStore',{
extend: 'Ext.data.TreeStore',
root: {
expanded: true,
text: 'This is the root node',
children: [
{
text: 'Food',
expanded: true,
children: [
{
text: 'Cake',
leaf: true
},
{
text: 'Ice cream',
leaf: true
}
]
},
{
text: 'Toys',
expanded: true,
children: [
{
text: 'Ball',
leaf: true
},
{
text: 'Bat',
leaf: true
}
]
}
]
}
});
Ext.widget('treepanel',{
title: 'first tree panel',
renderTo: Ext.getBody(),
store: new MyStore()
});
Ext.widget('treepanel',{
title: 'second tree panel',
renderTo: Ext.getBody(),
store: new MyStore()
});
Ext.widget('panel', {
html: 'What happend to the "Food" and "Toys" of the second tree panel? Why did they loose their children?',
renderTo: Ext.getBody(),
});
Use this Fiddle:https://fiddle.sencha.com/#fiddle/1hti
Ext.define('MyStore',{
extend: 'Ext.data.TreeStore'
});
var store1 = Ext.create('MyStore',{
extend: 'Ext.data.TreeStore',
root: {
expanded: true,
text: 'This is the root node',
children: [
{
text: 'Food',
expanded: true,
children: [
{
text: 'Cake',
leaf: true
},
{
text: 'Ice cream',
leaf: true
}
]
},
{
text: 'Toys',
expanded: true,
children: [
{
text: 'Ball',
leaf: true
},
{
text: 'Bat',
leaf: true
}
]
}
]
}
});
var store2 = Ext.create('MyStore',{
extend: 'Ext.data.TreeStore',
root: {
expanded: true,
text: 'This is the root node',
children: [
{
text: 'Food',
expanded: true,
children: [
{
text: 'Cake',
leaf: true
},
{
text: 'Ice cream',
leaf: true
}
]
},
{
text: 'Toys',
expanded: true,
children: [
{
text: 'Ball',
leaf: true
},
{
text: 'Bat',
leaf: true
}
]
}
]
}
});
Ext.widget('treepanel',{
title: 'first tree panel',
renderTo: Ext.getBody(),
store: store1
});
Ext.widget('treepanel',{
title: 'second tree panel',
renderTo: Ext.getBody(),
store: store2
});
Ext.widget('panel', {
html: 'What happend to the "Food" and "Toys" of the second tree panel? Why did they loose their children?',
renderTo: Ext.getBody(),
});
I have a tree panel, and I am trying to add a bellow the selected item.
http://jsfiddle.net/zer8oLo7/
If you click on "Add To Root", it is working.
But. if you click on "Add To Selected", it doesn't work:
Ext.application({
name: 'Fiddle',
launch: function () {
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',
itemId: 'projectTree',
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
},
id: 'projectTree',
width: 200,
height: 500,
store: store,
renderTo: Ext.getBody(),
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Add To Selected',
handler: function () {
var treeNode = Ext.getCmp('projectTree').getSelectionModel().getSelection()
treeNode.appendChild({
text: 'Child 4',
leaf: false
});
}
}, {
text: 'Add to root',
handler: function () {
var treeNode = Ext.getCmp('projectTree').getRootNode();
treeNode.appendChild({
text: 'Child 4',
leaf: false
});
}
}]
}],
});
}
});
getSelection() somehow returns an array of nodes, so you need to take only first node:
...
treeNode[0].appendChild({
text: 'Child 4',
leaf: false
});
...
I really confused by ExtJs tree object, something is wrong with my code but I don't know what.
Consider I have this 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: "alegrbra", 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()
});
How can I bind a click event to my tree's children/leaf?
Like so?
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: "alegrbra", 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(),
listeners: {
itemclick: function(s,r) {
alert(r.data.text);
}
}
});
see this JSFiddle
this is a node in the tree
{
text:'more then a_veryverylongword ',
leaf: true
}
Here the problem is that a very very long word is not shown but if I resize the panel the word is shown?
Does someone tell me, what i should do to break the word? the css is not working to modify the size of the panel is not an option.
Thanks
Here is the sample edited code from sencha and its working...
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: 'more then a_veryverylongword ', leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 250,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});