I am using tree editor. I need the tree node to become editable only when it is double clicked. So far I have done this
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) {}
I have searched the api to find something like "clicksToEdit" which we use in editor grid but cant find anything. Is there any way to do this?
Ext.tree.TreeEditor adds two event listeners (beforeclick, dblclick) to tree
so you may unsubscribe its from tree
tree.on('afterrender', function() {
tree.un('beforeclick', treeEditor.beforeNodeClick, treeEditor);
tree.un('dblclick', treeEditor.onNodeDblClick, treeEditor);
})
From API of Ext.tree.TreePanel:
beforeclick : ( Node node, Ext.EventObject e )
Fires before click processing on a node. Return false to cancel the default action.
So you could do this:
var tree = new Ext.tree.TreePanel({
root: this.getChildren(),
height: 300,
loader: new Ext.tree.TreeLoader(),
useArrows: true,
autoScroll: true,
listeners: {
dblclick: onTreeNodeDblClick,
beforeclick: function() { return false;}
}
});
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
var menu1 = new Ext.menu.Menu({
items: [{
text: 'Open in new tab'
}]
});
var treePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
region: 'center',
useArrows: true,
singleExpand: true,
split: false,
height: 360,
minSize: 150,
rootVisible: false,
autoScroll: true,
store: store,
border: false,
columns: [{
xtype: 'treecolumn',
dataIndex: 'text',
flex: 2,
sortable: true,
displayField: true
}]
});
treePanel.on('contextmenu', function(event, node) {
alert(node)
//treePanelCurrentNode = node;
x = event.browserEvent.clientX;
y = event.browserEvent.clientY;
menu1.showAt([x, y]);
}, this);
Working on 4.1 ext js and trying to add context menu to this tree panel but menu is not working. In the tree panel store is coming
but my code
treePanel.on('contextmenu', function(event,node){};
is not working
not event
treePanel.on('click', function(event,node){};
Any idea related to ext js context menu on tree panel ?
Tree doesn't have contextmenu event in ExtJS4.
You should use itemcontextmenu instead of contextmenu:
treePanel.on('itemcontextmenu', function(view, record, item, index, event) {
alert(record)
//treePanelCurrentNode = record;
menu1.showAt(event.getXY());
event.stopEvent();
}, this);
When the data view is rendered it disabling the default right click web browser menu, this is called in listeners “render” event and “itemcontexmenu” event is for detecting right click mouse event, capture the mouse cursor position and displaying the menu.
listeners: {
render: function() {
Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});
},
itemcontextmenu : function( grid, record, item, index, event){
x = event.browserEvent.clientX;
y = event.browserEvent.clientY;
menu1.showAt([x, y]);
}
}
I have yet another problem with extjs. When I build treeview I can't get the scope to work with the tree nodes. The scope of root node is my js object as opposed to treenode which returns window as the scope.
Any idea why?
TreePanel Definition:
this.treeForParamPanel= new Ext.tree.TreePanel(
{
layout: 'fit',
frame:true,
iconCls:'search',
animCollapse:false,
collapsedIconCls: 'search',
titleCollapse :true,
collapsible: true,
split:true,
collapsed: false,
animate: false,
lines: true,
id:'treeParamPanel'+this.id,
region:region,
title: 'aaa',
anchor:'100%',
//rootVisible:false,
width: 200,
height:300,
border:false,
autoScroll:true,
loader: new Ext.tree.TreeLoader({
scope:this,
dataUrl:'index.php?act=index.php'
})
});
this.rootTreeForParamPanel = new Ext.tree.AsyncTreeNode({
text: 'aaa',
draggable:false,
id:'source',
scope:this,
listeners: {
click: {
scope:this,
fn:function(ev) {
alert(this);
}
}
}
});
this.treeForParamPanel.setRootNode(this.rootTreeForParamPanel);
Item Definition:
[
{
"text": "testyybvnvbnvb",
"id": "16",
"leaf": true,
"draggable": "false",
"qtip": "aaa",
listeners: {
click: {
scope: this,
fn:function(ev) {
alert(this);
}
}
}
}
]
When using TreePanel's I normally put the click event on the treepanel and not on each of the nodes. If you don't need the click event to be handled differently for each node, put the click event on the treepanel like this:
this.treeForParamPanel = new Ext.tree.TreePanel(
{
... your parameters...
listeners:
{
click: function(node, event) {
alert('You have clicked on node ' + node.id);
},
scope: this
}
});
Now the scope of the click event is the same as when you created the treepanel and you still have access to the node which is being clicked on by the user.
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
}