PDA

View Full Version : right click menu example anyone?



dirtdevil
28 Aug 2009, 7:13 AM
Is there a right click menu example out there I could see? I've looked through the forums but most of the code is just how to make a menu but now how to pop it up when someone clicks the right mouse button.

jared lewis
28 Aug 2009, 7:20 AM
You have to use the "oncontextmenu" listener, it detects a right click on an Ext object, for example on a tree...

tree.on('contextmenu', function(node){
//Set up some buttons
var button1 = new Ext.menu.Item({
text: "button1"
});

var button2 = new Ext.menu.Item({
text: "button2"
});

//Create the context menu to hold the buttons
var contextMenu = new Ext.menu.Menu();
contextMenu.add(button1, button2);


//Show the menu
contextMenu.show(node.ui.getAnchor());
});

Animal
28 Aug 2009, 7:28 AM
'cept that creates a new one every time you right click...

jared lewis
28 Aug 2009, 7:37 AM
true....in reality you would want to create that outside the listener and just call the show function on it.

dirtdevil
28 Aug 2009, 7:46 AM
Thanks for the help. For some weird reason my contextmenu isn't firing when I put it in a grid...




var partsGrid = Ext.extend(Ext.grid.EditorGridPanel, {
initComponent:function() {
Ext.apply(this, {
//other grid bla bla code here
listeners: {
contextmenu: function(node){
console.log('testing');
}
}
})
partsGrid.superclass.initComponent.apply(this, arguments);
}, onRender:function() {
partsGrid.superclass.onRender.apply(this, arguments);
}
});
Ext.reg('partsgrid', partsGrid);



And yes, I'm already calling the xtype in a panel so the grid gets inited.

Animal
28 Aug 2009, 8:05 AM
Is there a contextmenu event on GridPanel?

Animal
28 Aug 2009, 8:05 AM
I'm outta here.

EXTEND TO CONFIGURE.

jared lewis
28 Aug 2009, 8:14 AM
gridpanel does not have a "contextmenu" event listener, but it does have a "cellcontextmenu", which should get fired when the user right clicks on a cell.

Taken from the docs:
cellcontextmenu : ( Grid this, Number rowIndex, Number cellIndex, Ext.EventObject e )

dirtdevil
28 Aug 2009, 8:16 AM
according to the docs theres a contextmenu, rowcontextmenu and cellcontextmenu for the editorgrid panel, which is what I'm using. I tried all three and I couldn't get any to fire. Is the event one of those events you can't config on init but have to config after render or something? Just throwing out ideas. Is there a simple working sample out there that I could take a look at to see what I'm doing wrong?

jared lewis
28 Aug 2009, 8:33 AM
haha you are right, i didnt scroll down far enough....i was able to get this simple example to work.



var grid = new Ext.grid.GridPanel({
title: "Context Grid Test",
width:400,
height: 400,
layout: 'fit',
cm: new Ext.grid.ColumnModel({
header:'test'
}),
store: new Ext.data.Store(),
//View Config
viewConfig: {
forceFit: true
},
listeners:{
contextmenu: function(e){
console.log(e);
}
}
});

dirtdevil
28 Aug 2009, 8:47 AM
didn't work. Heres the whole grid. The listeners at the top. You can ignore most of the code...



var partsGrid = Ext.extend(Ext.grid.EditorGridPanel, {
initComponent:function() {
Ext.apply(this, {
listeners: {
contextmenu: function(node){
console.log('testing');
}
},
store: new Ext.data.ArrayStore({
autoLoad: true,
fields: [
{name: 'partnum', type: 'string'},
{name: 'name', type: 'string'},
{name: 'price', type: 'float'},
{name: 'category', type: 'string'},
{name: 'units', type: 'int'},
],
data: [
['GR001','Ejector Seat',2300.00,'COCKPIT',30],
['GR002','Inst Panel',50000.00,'COCKPIT',42],
['GR003','Flight Stick',34000.00,'COCKPIT',13],
['GR004','Left Wing',243000.00,'EXTERIOR',6],
['GR005','Right Wing',33600.00,'EXTERIOR',6],
['GR006','Engine',43973600.00,'EXTERIOR',6],
['GR007','Landing Gear',49630.00,'EXTERIOR',6]
]
}),
viewConfig: {
getRowClass : function (record, index) {
if(!record){
return '';
}

if( record.data.units<='3' ){
return 'redcls';
}

if( record.data.units<='10' ){
return 'orangecls';
}

}
},
selModel: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(a,b,c){
debug(c);
Ext.getCmp('details').getForm().setValues(c.data);
Ext.getCmp('details').getForm().setValues({price:Ext.util.Format.usMoney(c.data.price)});
Ext.getCmp('image').getEl().dom.src = './' + c.data.partnum + '.jpg';

}
}
}),
cm: new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [{
id: 'partnum',
header: 'Part Number',
dataIndex: 'partnum',
width: 75
},{
header: 'Name',
dataIndex: 'name',
width: 75,
editor: new Ext.form.TextField({
allowBlank: false
})
},{
header: 'Price',
dataIndex: 'price',
renderer: 'usMoney',
width: 75,
editor: new Ext.form.NumberField({
allowBlank: false
})
},{
header: 'Category',
dataIndex: 'category',
width: 75,
editor: new Ext.form.ComboBox({
triggerAction: 'all',
width: 100,
mode: 'local',
value: 'CATEGORY',
store: new Ext.data.ArrayStore({
fields: [
'id'
],
data: [
['COCKPIT'],
['EXTERIOR']
]
}),
valueField: 'id',
displayField: 'id',
allowBlank: false
})
},{
header: 'Units',
dataIndex: 'units',
width: 75,
editor: new Ext.form.NumberField({
allowBlank: false
})
}]
}),
autoExpandColumn: 'partnum',
clicksToEdit: 2,
enableDragDrop: true,
tbar: [{
xtype: 'textfield',
width: 100,
value: 'name'
},
'Date Added'
,{
xtype: 'datefield'
},{
xtype: 'combo',
triggerAction: 'all',
width: 100,
mode: 'local',
value: 'CATEGORY',
store: new Ext.data.ArrayStore({
fields: [
'id'
],
data: [
['CATEGORY'],
['COCKPIT'],
['EXTERIOR']
]
}),
valueField: 'id',
displayField: 'id'
},{
text: 'Search'

},new Ext.Toolbar.SplitButton({
text: 'Split Button',
tooltip: {text:'This is a an example QuickTip for a toolbar item', title:'Tip Title'},
iconCls: 'blist',
// Menus can be built/referenced by using nested menu config objects
menu : {
items: [{
text: '<b>Bold</b>'
}, {
text: '<i>Italic</i>'
}, {
text: '<u>Underline</u>'
}, '-', {
text: 'Pick a Color',
menu: {
items: [
new Ext.ColorPalette({
listeners: {
select: function(cp, color){
Ext.example.msg('Color Selected', 'You chose {0}.', color);
}
}
}),
'-', {
text: 'More Colors...'
}
]
}
}, {
text: 'Extellent!'
}]
}
})]
})
partsGrid.superclass.initComponent.apply(this, arguments);
}, onRender:function() {
partsGrid.superclass.onRender.apply(this, arguments);
}
});
Ext.reg('partsgrid', partsGrid);

jared lewis
28 Aug 2009, 9:07 AM
for some reason it is ignoring that listeners declaration in the Ext.apply function, but i was able to add it in after creating a new grid like so

var p = new partsGrid();
p.on('contextmenu', function(e){
console.log(e);
});

Condor
29 Aug 2009, 3:44 AM
This is one of the reasons why I advise against using initComponent!

In Ext 3.0 you should override the constructor instead:

var partsGrid = Ext.extend(Ext.grid.EditorGridPanel, {
constructor: function(config) {
partsGrid.superclass.constructor.call(this, Ext.apply({
listeners: {
contextmenu: function (node) {
console.log('testing');
}
},
store: new Ext.data.ArrayStore({
autoLoad: true,
fields: [{
name: 'partnum',
type: 'string'
},{
name: 'name',
type: 'string'
},{
name: 'price',
type: 'float'
},{
name: 'category',
type: 'string'
},{
name: 'units',
type: 'int'
}],
data: [
['GR001', 'Ejector Seat', 2300.00, 'COCKPIT', 30],
['GR002', 'Inst Panel', 50000.00, 'COCKPIT', 42],
['GR003', 'Flight Stick', 34000.00, 'COCKPIT', 13],
['GR004', 'Left Wing', 243000.00, 'EXTERIOR', 6],
['GR005', 'Right Wing', 33600.00, 'EXTERIOR', 6],
['GR006', 'Engine', 43973600.00, 'EXTERIOR', 6],
['GR007', 'Landing Gear', 49630.00, 'EXTERIOR', 6]]
}),
viewConfig: {
getRowClass: function (record, index) {
if (!record) {
return '';
}
if (record.data.units <= '3') {
return 'redcls';
}
if (record.data.units <= '10') {
return 'orangecls';
}
}
},
selModel: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function (a, b, c) {
debug(c);
Ext.getCmp('details').getForm().setValues(c.data);
Ext.getCmp('details').getForm().setValues({
price: Ext.util.Format.usMoney(c.data.price)
});
Ext.getCmp('image').getEl().dom.src = './' + c.data.partnum + '.jpg';
}
}
}),
cm: new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [{
id: 'partnum',
header: 'Part Number',
dataIndex: 'partnum',
width: 75
},{
header: 'Name',
dataIndex: 'name',
width: 75,
editor: new Ext.form.TextField({
allowBlank: false
})
},{
header: 'Price',
dataIndex: 'price',
renderer: 'usMoney',
width: 75,
editor: new Ext.form.NumberField({
allowBlank: false
})
},{
header: 'Category',
dataIndex: 'category',
width: 75,
editor: new Ext.form.ComboBox({
triggerAction: 'all',
width: 100,
mode: 'local',
value: 'CATEGORY',
store: new Ext.data.ArrayStore({
fields: ['id'],
data: [
['COCKPIT'],
['EXTERIOR']]
}),
valueField: 'id',
displayField: 'id',
allowBlank: false
})
},{
header: 'Units',
dataIndex: 'units',
width: 75,
editor: new Ext.form.NumberField({
allowBlank: false
})
}]
}),
autoExpandColumn: 'partnum',
clicksToEdit: 2,
enableDragDrop: true,
tbar: [{
xtype: 'textfield',
width: 100,
value: 'name'
},
'Date Added', {
xtype: 'datefield'
},{
xtype: 'combo',
triggerAction: 'all',
width: 100,
mode: 'local',
value: 'CATEGORY',
store: new Ext.data.ArrayStore({
fields: ['id'],
data: [
['CATEGORY'],
['COCKPIT'],
['EXTERIOR']]
}),
valueField: 'id',
displayField: 'id'
},{
text: 'Search'
},
new Ext.Toolbar.SplitButton({
text: 'Split Button',
tooltip: {
text: 'This is a an example QuickTip for a toolbar item',
title: 'Tip Title'
},
iconCls: 'blist',
// Menus can be built/referenced by using nested menu config objects
menu: {
items: [{
text: '<b>Bold</b>'
},{
text: '<i>Italic</i>'
},{
text: '<u>Underline</u>'
},
'-', {
text: 'Pick a Color',
menu: {
items: [new Ext.ColorPalette({
listeners: {
select: function (cp, color) {
Ext.example.msg('Color Selected', 'You chose {0}.', color);
}
}
}), '-', {
text: 'More Colors...'
}]
}
},{
text: 'Extellent!'
}]
}
})]
}, config));
},
onRender: function () {
partsGrid.superclass.onRender.apply(this, arguments);
}
});
Ext.reg('partsgrid', partsGrid);

grzegorz.borkowski
12 Oct 2009, 1:56 AM
This is one of the reasons why I advise against using initComponent!
In Ext 3.0 you should override the constructor instead
I've just stumble upon this thread - Condor, can you give us some pointer to the explanation of the difference between overriding constructor vs initComponent? What's changed in Ext 3.0 and why we shouldn't use initComponent?

Condor
12 Oct 2009, 4:45 AM
The only thing that has changed in Ext 3 is that you can now specify the constructor as a config option of Ext.extend. In Ext 2.x you had to specify the constructor as a function and extend this function.

You can use both the constructor and initComponent to configure a Component descendant, but initComponent has some special things you have to take care of:
1. The config options should be applied to both 'this' and 'this.initialConfig' (most examples forget to modify initialConfig).
2. You can't specify an id or listeners in the config object that you apply to 'this', because these config options are already processed before initComponent is called.

In short, it's just simpler to extend the constructor than initComponent.

grzegorz.borkowski
12 Oct 2009, 5:23 AM
Thanks for info. I think you should consider posting some short info about it on Ext blog, because probably hardly anybody knows about it, as it wasn't mentioned anywhere within "what's new in Ext 3.0" posts series.