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
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);
}
});
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();
I am quite new to extjs and I would like to have an inline editor for my tree, I know there is a TreeEditor in extjs and I am not quite sure how to use it, does anyone have a small example to get me started with the Ext.tree.TreeEditor ?
Thanks
Yea, this one does suck a bit because there's no good docs online. Here's a short sample, cribbed from the docs and from ExtJS in Action:
var tree = new Ext.tree.TreePanel({
root: this.getChildren(),
height: 300,
loader: new Ext.tree.TreeLoader(),
useArrows: true,
autoScroll: true,
listeners: {
dblclick: onTreeNodeDblClick
}
});
var treeEditor = new Ext.tree.TreeEditor(tree, {}, {
cancelOnEsc: true,
completeOnEnter: true,
selectOnFocus: true,
allowBlank: false,
listeners: {
complete: onTreeEditComplete
}
});
onTreeNodeDblClick: function(n) {
treeEditor.editNode = n;
treeEditor.startEdit(n.ui.textNode);
}
onTreeEditComplete: function(treeEditor, o, n) {
//o - oldValue
//n - newValue
}
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();
});
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.