PDA

View Full Version : rowdblclick event in GridPanel



naggy
18 Feb 2011, 2:25 AM
Hi Guys,

I'm currently evaluating ExtJS to check whether or not we want to use it in our next project.

I started my evaluation with ExtJS 3 but I've chosen to move to ExtJS 4 now.

Is there a problem with catching rowdblclick events in the pre-release?

Here's the code that worked in ExtJS 3 but doesn't in ExtJS 4:



grid.on('rowdblclick', function(grid, rowIndex, e) {
var selectedId = store.getAt(rowIndex).id;
window.location.href = "${createLink(controller:'vacationRequest', action:'edit', params:[id:'9id9'])}".replace(/9id9/, selectedId);
});

Thanks,
Markus

apfister
18 Feb 2011, 11:50 AM
where are all the grid events? do we hook into these through some other class? selmodel? view?

steffenk
18 Feb 2011, 12:48 PM
indeed all are missing, only selectionchange is fired (but ir's RowSelectionModel).

PV-Patrick
8 Mar 2011, 3:09 PM
Did anyone ever figure how to get the dblclick event working? I did see another thread referencing the View but then I check there and there is no way to get the Grid View.

PV-Patrick
8 Mar 2011, 3:14 PM
I just happened to stubble across it by looking at the code of a couple GridPlugins, hope this helps others:

This is used in a class for the afterRender function on the grid.


afterRender : function() {
this.callParent(arguments);

this.view = this.down('gridview');
this.view.on('dblclick', function() {
console.log('dbl click');
});
}

mitchellsimoens
9 Mar 2011, 7:38 AM
Have you actually been able to get anything when you do this.down("gridview") ? If I listen to the afterrender event and try to get the gridview it returns null. If I listen to the afterlayout event I get the gridview but like 7 times. I can remove the listener but wish there was an easier way...

This works for me:


initComponent: function() {
var me = this;

me.callParent(arguments);

me.on("afterlayout", me.addDblClickListener, me, { single : true });
},

addDblClickListener: function(grid) {
var me = grid,
view = grid.down("gridview");

view.on("dblclick", me.handleRowDblClick, me);
},

handleRowDblClick: function(view, index, n, e) {
var me = this,
store = me.store,
rec = store.getAt(index);

console.log(rec);
},

mitchellsimoens
9 Mar 2011, 7:47 AM
btw, GridView is just a DataView now =D>

PV-Patrick
9 Mar 2011, 11:01 AM
Ya, I was able to get the GridView. Here is my class, stripped down.



Ext.define('MyApp.GridPanel', {

extend: 'Ext.grid.GridPanel',

initComponent: function() {

Ext.apply(this, {
title : 'Title',
width : 750,
height : 300,
store : store,
renderTo: 'grid-wrap',
columnLines : true,
items : [{
}]
});

this.callParent(arguments);
},

afterRender : function() {
this.callParent(arguments);

this.view = this.down('gridview');
this.view.on('dblclick', this.onDblClick, this);
},

onDblClick : function(dataview, index, node, event) {
var rowNode = this.view.getNode(index),
record = this.view.getRecord(rowNode);
}
});

6epcepk
10 Apr 2011, 2:19 AM
Hi, try to use code above, but event not fired, so whats wrong?


Ext.define('Ext.app.Clients', {
extend: 'Ext.grid.GridPanel',
initComponent: function() {
Ext.apply(this, {
store: this.getStore(),
columns: this.getColumns(),
tbar: this.getTbar(),
renderTo: 'x-clients',
width: 600,
height: 300,
title: 'Clients',
frame: true//,
//plugins: new Ext.grid.RowEditing()
});
this.callParent(arguments);
},
afterRender: function() {
this.callParent(arguments);
this.view = this.down('gridview');
this.view.on('dblclick', this.onDblClick, this);
},
onDblClick: function(dataview, index, node, event) {
//var rowNode = this.view.getNode(index),
//record = this.view.getRecord(rowNode);
console.log('clicked');
},
getStore: function() {...},
getTbar: function() {...},
getColumns: function() {...}
});

PV-Patrick
11 Apr 2011, 8:30 PM
What does this.view return if you do a console.log?

6epcepk
12 Apr 2011, 10:21 PM
This return 'Ext.grid.GridView', component like my init grid.

Neilcoder
13 Apr 2011, 7:19 AM
indeed all are missing, only selectionchange is fired (but ir's RowSelectionModel).

Hi Steffen,

I'm moving code from Ext3 to Ext4 and I had a look in the API at the new GridPanel and the Ext.selection.RowModel and I'm not getting how to do what I want to do, where before I was setting a new RowSelectionModel as follows;



var tablePanelGrid = new Ext.grid.GridPanel({
id : 'tg',
store : tablePanelStore,
enableDragDrop : true,
headers: headers,
autoExpandColumn : 'name',
title : 'tables',
autoHeight : true,
viewConfig: {
plugins: {
ptype: 'gridviewdd',
ddGroup: 'tablePanelGridDDGroup',
acceptDrops: false
}
},
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
beforerowselect : function (sm, rowIndex, keep, rec) {
if (disabledRecords.indexOf(rowIndex) != -1){
deselectRow(rowIndex);
return false;
}
}
}
})
});


Can you point me to where I can find out more about this?

As you can see from the code my outcome is to prevent records from being dragged if the row index number is represented in my disabledRecords array, so if there was a simply way of doing this in Extjs4 that would also help.

Thanks
Neil

steffenk
13 Apr 2011, 7:48 AM
hi,

it's difficult to say, as the code has changed since my post you replied to.
So if you read the thread, most events are in the GridView.

I'm not sure about dragdrop in a grid, all i know is that you have to explore everything. I read docs and code and try to get the results, but i didn't start to real move Ext3 app to Ext4, i'm still playing with the examples and some test code.

mitchellsimoens
13 Apr 2011, 8:01 AM
There is a plugin with ptype of 'gridviewdragdrop'. In the documentation it is here:

http://dev.sencha.com/deploy/ext-4.0-beta2/docs/api/Ext.grid.GridViewDDplugin.html

This will create a DragZone that you can access via grid.dragZone and a GridViewDropZone which you can access via grid.dropZone.

The onBeforeDrag method in the DragZone is where you can cancel dragging, in theory.

pkli
13 Apr 2011, 9:26 AM
Why not simply :



grid = new Ext.grid.GridPanel({
... grid config ...
,viewConfig: {
listeners: {
itemdblclick: {
fn: function(gridview,rowrecord,rowhtml,rowindex,e) {
... function ...
}
}
}
}
})



or grid.getView().on('itemdblclick', ...


??

mitchellsimoens
13 Apr 2011, 10:30 AM
Why not simply :



grid = new Ext.grid.GridPanel({
... grid config ...
,viewConfig: {
listeners: {
itemdblclick: {
fn: function(gridview,rowrecord,rowhtml,rowindex,e) {
... function ...
}
}
}
}
})



or grid.getView().on('itemdblclick', ...


??

If you want double click yes but he started talking about wanting to cancel drag by using a selection event.

pkli
13 Apr 2011, 10:36 AM
oups ...

sorry, i've just reading the first posts ...

Neilcoder
14 Apr 2011, 3:07 AM
There is a plugin with ptype of 'gridviewdragdrop'. In the documentation it is here:

http://dev.sencha.com/deploy/ext-4.0-beta2/docs/api/Ext.grid.GridViewDDplugin.html


Hi I had a look through the documentation and failed to get it to work, I think I may not understand how to use the plugins syntax,


var tablePanelGrid = new Ext.grid.GridPanel({
id : 'tg',
store : tablePanelStore,
enableDragDrop : true,
stripeRows : true,
headers: headers,
preventHeaders: true,
autoExpandColumn : 'name',
title : 'tables',
enableColumnMove : false,
enableHdMenu : false,
width:150,
height:600,
autoHeight : true,
plugins: {
ptype: 'gridviewdragdrop',
ddGroup: 'tablePanelGridDDGroup',
enableDrag: true
}

});


I used this code but the grid doesn't load and it give's no errors.

Is there a tutorial somewhere on using plugins in extjs4? I'm not quite following what I'm supposed to do.

steffenk
14 Apr 2011, 4:13 AM
plugins property require an array!

You should start looking at the examples, eg
http://dev.sencha.com/deploy/ext-4.0-beta2/examples/grid/group-summary-grid.js

Neilcoder
14 Apr 2011, 4:54 AM
It makes more sense that it should be an array, although I did see in the grid2grid example in viewConfig where it was being passed as an Object,



var secondGrid = new Ext.grid.GridPanel({
viewConfig: {
plugins: {
ptype: 'gridviewdd',
dragGroup: 'secondGridDDGroup',
dropGroup: 'firstGridDDGroup'
},
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
//Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn);
}
}
},......


My code is wrong anyhow, as I changed it to an array and it still failed silently... so I checked the API and I think http://dev.sencha.com/deploy/ext-4.0-beta2/docs/api/Ext.grid.GridViewDDplugin.html
should be in the viewConfig of the grid panel;



,viewConfig: {
plugins: [{
ptype: 'gridviewdragdrop',
ddGroup: 'tablePanelGridDDGroup',
enableDrag: true
}],


So my config option of the plugin is wrong or missing some values... so I'll keep reading the API and looking through the examples

mitchellsimoens
14 Apr 2011, 5:29 AM
viewConfig : {
stripeRows : true,
plugins : [
{ ptype : 'gridviewdragdrop' }
]
}

So this plugin does have to go on the view so I tried the above code to the array grid example that comes with the download and works correctly.

EDIT
The valid drop tooltip stays open a lot tho. Will probably file a bug for it after researching some.

mitchellsimoens
14 Apr 2011, 5:50 AM
Bug is reported. This is due to when the indexes are updated, GridView is reporting 29 rows when there are only 28 records in the Store. This is because technically there are 29 rows because when you drop a row it inserts that row there. Don't really think this is the proper way to do it, why not just move the record in the Store and it should reflect in the GridPanel. Leaving up to the dev team but I marked it as Critical.

karnak
22 Apr 2011, 6:56 AM
Cant you just add the following code to your 'Ext.apply', per the feedviewer example?



viewConfig: {
itemId: 'view',
listeners: {
scope: this,
itemdblclick: this.onRowDblClick
}
}