Can anyone give the coding for the formation of folder structured tree in EXTJS ? how can i make it ? can anyone help for the coding of the same ?
http://dev.sencha.com/deploy/dev/examples/tree/reorder.html
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();
});
Related
I have a new ExtJS 6 application and Im trying to populate an accordion menu.
Note: This same code works perfect in ExtJS 4.2.
This is the accordion component:
Ext.define('MyApp.view.menu.Accordion', {
extend: 'Ext.panel.Panel',
alias: 'widget.mainmenu',
width: 350,
split: true,
layout: {
type: 'accordion',
autoScroll: true,
autoHeight: true,
titleCollapse: false,
animate: false,
activeOntop: true
},
collapsible: true,
floatable: false,
hideCollapseTool: false,
title: 'Menú',
});
Now, I have in my ViewController a store that I load, this is the code:
var menuPanel = Ext.ComponentQuery.query('mainmenu')[0];
storeMenu.load({
callback: function(records, op, success) {
menuPanel.removeAll();
Ext.each(records, function(rec) {
var title = rec.data.title;
var menu = Ext.create({
xtype: 'treepanel',
rootVisible: false,
title: 'This is a test'
});
menuPanel.add(menu);
});
menuPanel.updateLayout();
}
});
My store records count = 7, so I should see 7 items added to my menu, but this is what I get:
If I again do the same but adding a breakpoint in my debuggin console (image below)
Then my result is the following:
The issue is breaking my head and is really very strange, it works if I debugg adding a breakpoint in order it to work.
Any clue on this issue?
Try adding them in one call:
storeMenu.load({
callback: function(records, op, success) {
var panels;
Ext.suspendLayouts();
menuPanel.removeAll();
panels = Ext.Array.map(records, function(rec){
var title = rec.get('title');
return {
xtype: 'treepanel',
rootVisible: false,
title: title
};
});
menuPanel.add(panels);
Ext.resumeLayouts(true);
}
});
can you help with this code. Why is it that its not loading the data that i want. I manage to add the children without using this process but i want to know how to do this. Well this is better anyways thats why i want this.
db_switcher.app.tree = new Ext.tree.TreePanel({
renderTo: 'treePanel',
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
width: 300,
// auto create TreeLoader
//dataUrl: 'get-nodes.php',
//root: {
// nodeType: 'async',
// text: 'Database',
// draggable: true,
// id: 'source',
// children: []
//}
loader: new Ext.tree.TreeLoader({
dataUrl: 'db_switcher/data'
//requestMethod: 'POST'
//listeners: {
// beforeload: function() {
// this.baseParams.subFolderID = clickedVal;
// }
//}
}),
root: new Ext.tree.AsyncTreeNode({
expand: true,
text: "/",
id: "/"
}),
});
db_switcher.app.tree.getRootNode().expand();
This is the exact data form:
[{"db_id":1,"db_host":"xx.xxx.x.xxx","db_name":"service_management","db_user":"xxx","db_driver":"mysql "},{"db_id":2,"db_host":"xx.xxx.x.xxx","db_name":"support_tool","db_user":"xxx","db_driver":"pgsql "}]
I hope someone can help me here.
It is kind of late for some answer, but I had the very same problem and it seems rendering doesn't work properly when leaf attribute is missing in json.
Here goes a working fiddle: https://fiddle.sencha.com/#fiddle/1s5k&view/editor
I have a window and a dataview inside it-
if (!win) {
var dataview = new Ext.DataView({
});
var win = new Ext.Window({
...
...
items: dataview
});
this.win=win;
}
var dview = this.win.items.itemAt(0);
dview.title = 'My view';
this.win.show();
However, the title do not display at first when window is shown but displays in second run. I am thinking of reloading window before showing. Any help?
Within items u can use:
xtype: 'dataview',
title: '',
Ext.define('PowerTrainCopy', {
extend: 'Ext.Window',
id: 'copyPTWin',
height:450,
width: 1110,
modal:true,
title: 'Copy Powertrain',
//plain: true,
border: true,
resizable: true,
draggable: true,
closable: true,
buttonAlign: 'center',
items: []
});
copyPTWin = Ext.create('PowerTrainCopy');
copyPTWin.show();
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
renderTo:'tree-div',
title: 'My Task List',
height: 300,
width: 400,
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
rootVisible: false,
frame: true,
root: {
nodeType: 'async'
},
In the above code,what is the significance of useArrows:true? Is it the property(builtin) to display the tree structure with arrows?
As far as I can see the useArrows: true causes the tree to be rendered using Vista-style arrows instead of +/- signs and lines in the folder nesting.
From TreePanel.js:
// private
onRender : function(ct, position){
Ext.tree.TreePanel.superclass.onRender.call(this, ct, position);
this.el.addClass('x-tree');
this.innerCt = this.body.createChild({tag:'ul',
cls:'x-tree-root-ct ' +
(this.useArrows ? 'x-tree-arrows' : this.lines ? 'x-tree-lines' : 'x-tree-no-lines')});
},
From the ExtJS API:
useArrows : Boolean
true to use Vista-style arrows in the tree (defaults to false)
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.