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
});
...
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,
});
}
});
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>
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 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
I'm still new to Sencha Touch/ExtJS, and I'm currently exploring the demos and getting started samples. But I stumbled upon this problem where when I insert a nested list on tab panel items I can't navigate the list items anymore.
Here's my code:
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
// store with data
var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
items: [{
text: 'Sparkling',
leaf: true
},{
text: 'Still',
leaf: true
}]
},{
text: 'Coffee',
leaf: true
},{
text: 'Espresso',
leaf: true
},{
text: 'Redbull',
leaf: true
},{
text: 'Coke',
leaf: true
},{
text: 'Diet Coke',
leaf: true
}]
},{
text: 'Fruit',
items: [{
text: 'Bananas',
leaf: true
},{
text: 'Lemon',
leaf: true
}]
},{
text: 'Snacks',
items: [{
text: 'Nuts',
leaf: true
},{
text: 'Pretzels',
leaf: true
},{
text: 'Wasabi Peas',
leaf: true
}]
},{
text: 'Empty Category',
items: []
}]
};
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'Groceries',
displayField: 'text',
dock: 'top',
store: store
});
var btnSpecTop = [
{ ui: 'back', text: 'Back'},
{ xtype: 'spacer' },
{ ui: 'default', text: 'Login' }
] // end btnSpecTop
var tapHandler = function (btn, evt) {
alert("Button '" + btn.text + "' tapped.");
}
var dockedItems = [{
xtype: 'toolbar',
dock: 'top',
title: 'Demo',
items: btnSpecTop,
defaults: { handler: tapHandler }
},
{
xtype: 'tabpanel',
layout: 'card',
dock: 'top',
fullscreen: true,
items:[{
title: 'test1',
html: '<p>test 1</p>'
},
{
title: 'test2',
html: '<p>test 2</p>',
dockedItems: nestedList
},
{
title: 'test3',
html: '<p>test 3</p>'
}]
}
]
var appPanel = new Ext.Panel({
id: 'appPanel',
fullscreen: true,
dockedItems: dockedItems
});
} // end onReady
});
Hope someone could lend a hand. Thanks!
This bug is only present on the pre-RC version of Sencha Touch. :)
I don't know which version sencha-touch you are using but in sencha-touch-1.1.0 the navigation is
working very well and there are no errors are thrown to the console,so try it again while observing your
console ,i think there has be a problem