Extjs treePanel node scope problem - extjs

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.

Related

ExtJS disable Treelist hover

How can I disable the hover events of an ExtJS treelist component (in micromode) so that the floater is only opened by a click/touch and not on hover/mouseover/mouseenter.
(Using ExtJS 6.2 Classic)
This overriding the element config did the trick.
Ext.define('Admin.view.main.TreeList', {
extend: 'Ext.list.Tree',
requires: [
],
xtype: 'pdmtreelist',
ui: 'navigation',
micro:true,
expanderFirst: false,
expanderOnly: true,
element: {
reference: 'element',
listeners: {
click: 'onClick',
mouseenter: 'onMouseEnter',
// mouseenter: Ext.emptyFn,
// mouseover: Ext.emptyFn,
mouseleave: 'onMouseLeave',
},
children: [{
reference: 'toolsElement',
listeners: {
mouseover: Ext.emptyFn
//mouseover: 'onToolStripMouseOver'
}
}]
}
});

Extjs 4 - FormPanel inside menu - focus issue

I have form panel as a menu item. The problem is that it constantly looses focus and standard navigation controls like tab are not working. Is there some kind of config to make this work? Notice i extend Ext.panel.Panel instead of Ext.form.Panel. When i use the second one i get origin.on is not a function. Here is code:
this.tbar = [{
xtype: 'tbfill'
}, {
xtype: 'tbseparator'
}, {
xtype: 'button',
text: 'Wyszukiwanie',
iconCls: 'icon-magnifier',
menu: {
focusOnToFront: true,
items: [{
xtype: 'decision_quicksearch',
title: 'Panel wyszukiwania',
iconCls: 'icon-magnifier',
}]
},
listeners: {
afterrender: function () {
//register this btn to quicksearch panel so we can hide menu when search button is clicked
Ext.apply(this.menu.items.items[0], {
parentComponent: this
});
}
}
}];
And the form:
Ext.define('GSIP.view.decisions.DecisionQuickSearchPanel' ,{
extend: 'Ext.form.Panel',
alias : 'widget.decision_quicksearch',
layout:'anchor',
title:'Wyszukiwanie decyzji',
frame:true,
width:300,
defaults: {
anchor: '100%'
},
style: {
marginLeft: 'auto',
marginRight: 'auto'
},
bodyPadding:20,
initComponent: function() {
this.addEvents('quicksearch');
this.items = this.createForm();
this.buttons = [{
text:'Szukaj',
iconCls:'icon-magnifier',
scope:this,
handler:this.processForm
}],
this.callParent(arguments);
},
createForm:function() {
var items = [{
xtype:'textfield',
fieldLabel:'Znak',
labelWidth:40,
name:'sign'
},{
xtype:'textfield',
fieldLabel:'Numer',
labelWidth:40,
name:'number'
},{
xtype:'textfield',
fieldLabel:'Rok',
labelWidth:40,
name:'suffix',
}];
return items;
},
processForm:function() {
var result = this.buildFilter();
this.fireEvent('quicksearch', result);
this.parentComponent.hideMenu();
},
buildFilter:function() {
var sign = this.down('textfield[name=sign]').getValue();
var number = this.down('textfield[name=number]').getValue();
var suffix = this.down('textfield[name=suffix]').getValue();
var result = new Array();
var res = {
name:'documents.sign',
valuesType:'string',
filterType:'like',
values:[{id:1, value:sign}]
};
result.push(res);
var res = {
name:'documents.number',
valuesType:'string',
filterType:'like',
values:[{id:1, value:number}]
};
result.push(res);
var res = {
name:'documents.suffix',
valuesType:'string',
filterType:'like',
values:[{id:1, value:suffix}]
};
result.push(res);
return result;
}
});
I have accomplished a similar functionality but in a different way.
What I did is simply made the button generate an Ext.Window with no header and limited border and positioned it under the button on open. You can then use MouseOut events to close the window and it will operate just like a menu or you could put the header on the bottom and place a close tool and have the window "pin".
buttonClick: function (btn, e, opts) {
var popUpWindow = Ext.create('Ext.window.Window', {
width: 450,
maxHeight: 400,
resizable: false,
closable: false,
title: 'Report Filters',
headerPosition: 'bottom',
border: false,
draggable: false,
bodyStyle: 'background:white;padding:5px;',
items: [
//...your form
]
});
popUpWindow.showAt(btn.getBox(false).x - 3, btn.getBox(false).y - 7);
}
Here is what i ended up with. It seems that this is exactly as if i was using menu but using method provided by ViaoV
var me = this;
this.popUpWindow = Ext.create('Ext.window.Window', {
resizable: false,
closable: false,
constrainHeader: true,
title: 'Panel wyszukiwania',
iconCls: 'icon-magnifier',
border: false,
draggable: false,
items: [{
xtype: 'decision_quicksearch',
listeners: {
afterrender:function(me) {
Ext.getDoc().on('mousedown', function(o) {
console.log('mousedown');
if (!o.within(me.getEl())) {
me.parentComponent.toggle(false);
}
})
// me.getEl().on('blur', function() {
// console.log('blur');
// me.parentComponent.toggle(false);
// });
}
},
}]
});
this.tbar = [{
xtype:'tbfill'
}, {
xtype:'tbseparator'
}, {
xtype:'button',
text:'Wyszukiwanie',
iconCls:'icon-magnifier',
enableToggle:true,
menu: { },
listeners:{
afterrender:function() {
//register this btn to quicksearch panel so we can hide menu when search button is clicked
Ext.apply(me.popUpWindow, {
parentComponent:this
});
},
toggle: function(btn, pressed) {
if (pressed) me.popUpWindow.showAt(btn.getBox(false).x - 3, btn.getBox(false).y + btn.getBox(false).height);
else me.popUpWindow.hide();
}
}
}];
EDIT: After some testing the solution i ended up with is not a good one. I have comboboxes in my panel which are defined by boundlist as another dom, so when i pick item from cbox !o.within(me.getEl()) evaluates to true and hides my panel. I really need the functionality when the user clicks elsewhere the window hides.

extjs tree panel context menu not working

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]);
}
}

Extjs Tree editor - disable single click to edit

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;}
}
});

On an ExtJS drag and drop tree using the drop or beforedrop listeners dont seem to fire

I have a tree in extjs. I've added the drag and drop plugin and those function fine in the browser but I need to send the dragged and drop change to my DB correct? To do this I believe I should listen for the drop event then make an ajax call to my back end.
I have a checkchange event that fires OK but a drop or beforedrop even seem to do nothing.
Here is my tree's config, what am I doing wrong?
todotree = {
title: 'Tree Grid',
width: 600,
height: 400,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
},
store: new Ext.data.TreeStore({
storeId: 'treestore',
fields: [{
name: 'actionTitle',
type: 'string'
}],
proxy: {
type: 'ajax',
url: 'index.php/todo/listtree',
reader: 'json'
}
}),
rootVisible: false,
columns: [
{
xtype: 'treecolumn',
text: 'Title',
flex: 3,
dataIndex: 'actionTitle'
}],
listeners: {
checkchange: function(node, checked){
Ext.Ajax.request({
url: 'index.php/todo/togglecheck/' + node.data.recordId + '/' + checked,
success: function() {}
});
},
drop: function(){ alert("drop") },
beforedrop: function(){ alert("beforedrop") }
}
}
Thanks in advance
EDIT:
I also tried this config to no avail. I don't think I understand how this is all supposed to work.
...
beforedrop: function(node, data, overModel, dropPosition, dropFunction){
alert("beforedrop");
dropFunction = function(){
alert('dropFunction');
};
}
...
Those events are fired by the TreeView and you are adding the listeners on the Panel. This should work:
todotree = {...
viewConfig: {
listeners: {
beforedrop: function () {}
}
}
}

Resources