PDA

View Full Version : Ext.ux.grid.plugin.DragSelector



harrydeluxe
11 May 2011, 8:15 AM
Grid DragSelector Plugin:

http://harrydeluxe.github.com/extjs-ux/img/dragselector.jpg

Source on Github:
https://github.com/harrydeluxe/extjs-ux/blob/master/ux/grid/plugin/DragSelector.js

Demo:
http://harrydeluxe.github.com/extjs-ux/example/grid/dragselector.html

deister
11 May 2011, 9:05 AM
Nice one!

ZaDarkSide
23 May 2011, 2:23 PM
Very nice and usefull

Foggy
25 May 2011, 4:41 AM
Nice stuff, thanks for porting it to 4.0 ;)

salarmehr
2 Aug 2011, 1:22 AM
Very useful ,thanks a lot

loiane
4 Aug 2011, 4:43 AM
Very usefull and nice! [2]
Thanks for sharing!

harrydeluxe
2 May 2012, 2:35 PM
Works now with 4.1.0
See: https://github.com/harrydeluxe/extjs-ux/ (https://github.com/harrydeluxe/extjs-ux/#extuxgridplugindragselector)

koblass
7 May 2012, 1:41 AM
Quick question,

Would it be possible to unselect everything if you click outside of the row ?
It would be useful especially with tileview grid.

Best
Daniel

wangld
7 May 2012, 6:03 AM
very nice
thanks:>

Creszzle
7 May 2012, 7:19 PM
Nice job and useful!

But there is a small problem:
from bottom to top is normal,
from top to bottom some items have not been selected~

harrydeluxe
8 May 2012, 12:43 AM
@Creszzle I know the problem, but at the moment i have not found the bug. Since i have little time.

@koblass I will integrated soon.

ttbgwt
24 May 2012, 4:02 AM
First off, great plugin. When I add cell editing to my grid then the drag selector doesnt work after I edit a cell. Does drag selector work with cell editing?



plugins: [
Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1,
listeners: {
beforeedit: function (e, editor) {
if (!me.cellEditingEnabled) {
return false;
}
}
}
}),
Ext.create('Ext.ux.grid.plugin.DragSelector', {})
],

ttbgwt
24 May 2012, 9:11 AM
If my grid has a horizontal scrollbar active, if I click on the scrollbar and drag, then the selection process starts?

ttbgwt
24 May 2012, 9:28 AM
This fixed my issue:



onBeforeStart: function(e)
{
// return false if is a right mouseclick
if(e.button === 2)
{
return false;
}


// return false if any grid editor is active
if(this.grid.editingPlugin && this.grid.editingPlugin.editing)
{
return false;
}


// scrollbar fix from digitalbucket.net :)
if(e.getPageX() > this.view.el.getX() + this.view.el.dom.clientWidth - 20)
{
return false;
}
//ADDED THIS FIXED MY ISSUE
if(e.getPageY() > this.view.el.getY() + this.view.el.dom.clientHeight - 20)
{
return false;
}


// call cancelClick
this.cancelClick(e);


return !this.dragSafe || e.target == this.view.el.dom || Ext.DomQuery.is(e.target, this.targetDragSelector);
},




If my grid has a horizontal scrollbar active, if I click on the scrollbar and drag, then the selection process starts?

talha06
29 May 2012, 12:44 AM
great plugin, thanks for sharing harrydeluxe! =D>

ttbgwt
30 May 2012, 6:01 PM
I added locked: true to a couple of columns n my grid and now the plugin doesnt work? Is there any way to get this to work with locked columns?

ttbgwt
17 Aug 2012, 6:41 AM
If I use your plugin with a locking column, I get this error:

TypeError: plugin.clone is not a function



* Clones items in the plugins array if they are instantiated Plugins. If an item
* is just a plugin config, it leaves it alone.
*
* This is so that plugins can be replicated on both sides of the LockingView
*
*/
clonePlugins: function() {
var me = this,
plugins = me.plugins,
plugin,
i = 0, len;

if (plugins) {
len = plugins.length;
for (; i < len; i++) {
plugin = plugins[i];
if (typeof plugin.init === 'function') {
plugins[i] = plugin.clone(); //THIS IS THE ERROR LOCATION
}
}
}
}

ExtJSNinjas
20 Mar 2013, 3:11 PM
Are there any plans to update this plugin to work with 4.2.0? Thanks.

jakejamessteele
23 Sep 2013, 3:00 PM
+1 anyone ported this or a similar one to 4.2.1?

jsxiao
23 Sep 2013, 5:14 PM
very useful, thanks a lot.:)

olecom
11 Jun 2014, 5:41 PM
Are there any plans to update this plugin to work with 4.2.0? Thanks.

It is fixed for 4.2 and some more, see: https://github.com/harrydeluxe/extjs-ux/pull/20