The documentation for the TreeNode object lists a Config option named expandable:
expandable : Boolean
If set to true, the node will always show a plus/minus icon, even when
empty
I am creating a number of non-leaf objects the following way:
treeNodes[tag] = new Ext.tree.TreeNode({
text : tag,
leaf : false,
expanded : false,
expandable : true,
loaded : true
});
But after adding them to the root TreeNode the result is something like:
Which gets users complaining for having to double-click to expand a node. How can I get the plus/minus buttons as seen in this example?
There is no wrong in the code snippet that you have pasted here. There may be some config in TreePanel which you might be added in your code can cause the problem. May the config like 'iconCls'
Working fiddle is here... Plus and Minus in ExtJS tree
Ext.onReady(function() {
new Ext.tree.TreePanel({
title: 'Simple Tree',
width: 200,
height: 150,
rootVisible: false,
renderTo: Ext.getBody(),
root: {
expanded: true,
children: [{
text: "detention",
leaf: false,
expanded: false,
expandable: true,
loaded: true
}, {
text: "homework",
expanded: true,
children: [{
text: "book report",
leaf: true
}, {
text: "alegrbra",
leaf: true
}]
}, {
text: "buy lottery tickets",
leaf: true
}]
}
});
});
The version used was 3.4.0. Check your version and code.
Related
I am using extjs 3.4
I would like to have preselected node when treepanel first loads. In my example this would be second node. Same thing as mouse click on that node - just it happens by default on selected node.
So, how can I simulate mouse click on second node? (or just make it active item by default)
Ext.ns('App.Misc.West');
App.Misc.West.View = Ext.extend(Ext.Panel, {
constructor: function (config) {
var me = this;
var cfg = {
items: [{
xtype: 'treepanel',
ref: 'treeMisc',
id: 'treeMisc',
root: new Ext.tree.AsyncTreeNode({
expanded: true,
text: 'Data tables',
children: [{
text: 'Books',
bookTitle: 'Books',
leaf: true
}, {
text: 'Cars',
bookTitle: 'Cars',
leaf: true
}]
}),
rootVisible: true
}]
};
Ext.apply(cfg, config);
App.Misc.West.View.superclass.constructor.call(me, cfg);
}
});
You can use checked (multiple selection with checkbox) or select programmatically in the 'load' and node 'expand' handlers:
new Ext.tree.TreePanel({
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader({
listeners: {
}
}),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
text: 'Data tables',
children: [{
text: 'Books',
bookTitle: 'Books',
leaf: true
}, {
text: 'Cars',
bookTitle: 'Cars',
leaf: true,
//checked: true // <-- selected with checkbox
}]
}),
rootVisible: false,
listeners: {
// Single selection (simulated mouse click)
load: function (treeLoader, node) {
this.getRootNode().on('expand', function (node) {
this.getSelectionModel().select(this.getRootNode().childNodes[1]);
}, this);
}
},
renderTo: Ext.getBody()
});
I have a directory (folder) structure, which I show with the xtype 'breadcrumb' (ExtJS Version 6.6).
Now I will add a additional toggle in my app. When I active the toggle, all folders should be shown in the breadcrump text list and in the selectboxes. This is my actual developing status and works fine.
When I deactive the toggle, all folders with a leading "A" in the folder name should be hide in the selectboxes (or should be disable and shown grayed out). In the breadcrump text list this ("A"-)folders should be shown grayed out.
For example I have the breadcrump text list "root > folder_0_0 > folder_1_0" in my app and then I change the toggle value: Then I do not want to reload the complete breadcrump.
How can I resolve this problem? Thank you for your hints Thomas
here is my code. You can find this: https://fiddle.sencha.com/#view/editor&fiddle/2mqb
Ext.application({
name: 'BeadcrumbTest',
launch: function() {
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
text: 'Root_folder',
children: [{
text: 'A_folder',
leaf: true
}, {
text: 'B_folder',
expanded: true,
children: [{
text: 'A_folder',
leaf: true
}, {
text: 'B_folder',
leaf: true
}]
}, {
text: 'C_folder',
leaf: true
}]
}
}),
panel = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 100,
bodyPadding: 10,
tbar: {
xtype: 'breadcrumb',
store: store
},
buttons: ['->', {
xtype: 'button',
text: 'Handle "A" folder',
handler: function() {
// todo
}
}]
});
}
});
I found a solution: I overwrite the methods updateSelection(), _onMenuClick() and _onMenuBeforeShow() from classic/src/Breadcrumb.js.
I have a simple ExtJS 4.1 checkbox TreePanel. The tree is build on simple logic.
If you select all child node of any node, deselect all the child nodes and select the parent node.
If you select a parent node, deselect all the child nodes.
Please use following fiddle which mocks the above requirement.
Example via fiddle
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
renderTo: Ext.getBody(),
width: 400,
height: 400,
store: {
root: {
expanded: true,
children: [{
checked: false,
text: "1 detention",
expanded: true,
children: [{
checked: false,
text: '1.1 foo',
leaf: false,
children: [{
checked: false,
text: "1.1.1 India",
expanded: true
}, {
checked: false,
text: "1.1.2 Singapore",
expanded: true
}, {
checked: false,
text: "1.1.3 USA",
expanded: true
}]
}, {
checked: false,
text: '1.2 bar',
leaf: true
}]
}, {
checked: false,
text: "2 homework",
expanded: true,
children: [{
checked: false,
text: "2.1 book report",
leaf: true
}, {
checked: false,
text: "2.2 algebra",
expanded: true,
children: [{
checked: false,
text: "2.2.1 buy lottery tickets",
leaf: true
}, {
checked: false,
text: "2.2.2 buy lottery tickets 2",
leaf: true
}]
}, {
checked: false,
text: "2.3 English report",
leaf: true
}]
}, {
checked: false,
text: "3 buy lottery tickets",
leaf: true
}]
}
},
rootVisible: false,
disableSelection: true,
//selModel: {mode: 'SIMPLE'},
listeners: {
checkchange: function (record, checked, opts) {
if (!checked) return;
var parentNode = record.parentNode;
// Deselect children
function deselectChildren(record) {
record.eachChild(function (record) {
record.set('checked', false);
deselectChildren(record);
});
}
deselectChildren(record);
// See if all siblings are selected now
var allSiblingSelected = false;
if (parentNode) {
allSiblingSelected = parentNode.childNodes.reduce(function (previous, node) {
return previous && node.get('checked');
}, true);
}
if (allSiblingSelected) {
parentNode.set('checked', true);
// Apparently won't fire on its own. Below line creates problem
this.fireEvent('checkchange', parentNode, true, opts);
}
// Deselect ancestors
else {
while (parentNode) {
parentNode.set('checked', false);
parentNode = parentNode.parentNode;
}
}
}
}
});
When you see the code, you will see that when all the siblings of a node is selected, I manually set the 'checked' config for the parent node as true and then on line number 96 manually fire the checkchange event of the parent node which will deselect all the child nodes.
problem: Some times, this event is not getting fired and inconsistent result is produced by the tree. If I put debug point or use console.log, system fires this event every time.
Interesting thing which I observed is, when you debug the code or use console.log to write some debug info, system will work fine. I assume somehow checkchange event is not getting fired at times which I am manually triggering using fireEvent.
What options I have to automatically fire checkchange event when I set the 'checked' config for parent node or if I can use any other approach.
Please help
Thank you
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()
});
How to build a tree in EXTJS ? It has to include the images(with '+' & '-' symbols) with respective node.Can you get me the code for the same ????
Start by defining an Ext.data.TreeStore to load your data into:
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'treeData.json'
},
root: {
text: 'Countries',
expanded: true
}
});
Json:
[{
"text": "United Kindom",
"children": [{
"text": "Glasgow",
"leaf": true
}, {
"text": "Edinburgh",
"leaf": true
}, {
"text": "London",
"leaf": true
}],
"leaf": false
},
{
"text": "France",
"leaf": true
}
...
]
Create the Tree Panel and render it to the document's body:
Ext.create('Ext.tree.Panel', {
title: 'Countries & Cities',
width: 500,
height: 300,
store: store,
useArrows: false,
rootVisible: false,
renderTo: Ext.getBody(),
style: 'margin: 50px'
});
Just look at the source code for any of the Ext JS Tree demos.
For example:
Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
// auto create TreeLoader
dataUrl: 'get-nodes.php',
root: {
nodeType: 'async',
text: 'Ext JS',
draggable: false,
id: 'src'
}
});
// render the tree
tree.render('tree-div');
tree.getRootNode().expand();
});
This looks like a good example: static tree for a static tree.
Saki makes a lot of tutorials and examples that are very helpful for EXTJS. One of Saki's Examples is an asynchronous tree. You can find it by looking to the left under state.
This seems like a good tutorial for a dynamic tree with a Ruby on Rails backend: dynamic tree with RoR backend.