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]);
}
}
Related
i want to get the list of checked items in itemclick in listeners from tree Panel, but the code below Ext.getCmp('treePanel').getChecked(); return nothing , because the checking process is not completed .....any one help ?
var tree=Ext.create('Ext.tree.Panel', {
id:"treePanel",
title: 'Department',
width: 300,
height: 800,
store: store,
rootVisible: false,
multiSelect: true,
//renderTo: Ext.getBody(),
listeners: {
itemclick: function (thisGrid, record, item, index, e, eOpts) {
if(!record.data.checked){
var checkedItems=Ext.getCmp('treePanel').getChecked();
}
},
}
});
Try this
Ext.getCmp('treepanel')[0].getSelectionModel().selected.items;
PS : if the selectionMode is 'SINGLE' only one item will be returned
if it is 'MULTI' then multiple items will be returned
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 use extjs4.1 with geoext2 in my web app.
I want to load mapPanel to tabPanel via ajax and it fill tabPanel height and width.
If i set mapPanel height and width i can see it in tabPanel but it can't fill tabPanel because i set it height and width.Following code:
mapPanel = Ext.create("GeoExt.panel.Map", {
renderTo: "mappanel",
height: 575,
width: 1124,
map:map,
zoom: 11,
tbar : toolbar
});
var tabs = Ext.create('Ext.tab.Panel', {
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
items: [{
title: 'History',
autoScroll: true
}, {
title: 'Center Panel',
autoScroll: true
}]
});
I insert MapPanel to tabPanel when user click on grid column that has icon via following code.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columnLines: true,
columns: [
{
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 20,
items: [{
icon : '<?php echo Yii::app()->baseUrl.'/images/icons/show.png';?>',
tooltip: 'Show Map',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
var jsonData = Ext.encode(store.proxy.reader.jsonData);
tabs.remove(tabs.getComponent(2));
tabs.insert(2,{
title:'Map',
layout: 'fit',
loader: {
scripts: true,
autoLoad :true,
params:{
history:jsonData,
index:rowIndex
},
failure : function(){
alert('failed');
},
url: '<?php echo Yii::app()->createUrl('MapWidget/HistoryMap');?>'
}
});
tabs.setActiveTab(2);
tabs.doLayout();
}
}]
},
...
But when i clean height and width in mapPanel options i can't see it in tabPanel!
How can i load mapPanel to tabPanel to fill it's content?
From the docs
Do not use this option if the Component is to be a child item of a
Container. It is the responsibility of the Container's layout manager
to render and manage its child items.
Here's some example code for loading components remotely in the correct way: http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/component-loader/component-loader.html
I added "contextmenu" entry to the list of listeners in treepanel, but it seems that it doesn't work. ExtJS doesn't give the control to my event handler function. I also supressed browser default context menu event beforehand, but it doesn't help either.
Any code examples? I haven't found any working samples for ExtJS 4. Am I missing something?
Update 1: my code
var tree = Ext.create('Ext.tree.Panel', {
id: 'treePanel',
store: store,
renderTo: 'tree-div',
height: 300,
width: 250,
title: 'OrgTree',
useArrows: true,
listeners: {
render : {
fn : function() {
Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});
}
},
contextmenu : {
fn: function(node, evtObj) {
alert('here');
}
},
}
});
Update 2: this is the solution extjs tree panel context menu not working
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.