PDA

View Full Version : [CLOSED] GridView MouseDrag Selections



odyssey
Jan 26, 2013, 10:35 PM
Lets say there is a Grid with many rows. User interaction is to select specified rows and submit.In order to select the rows user must click o each of them. I am trying to find solution for mouse drag selection.

So from here we have

http://examples2.ext.net/#/DragDrop/Advanced/Checkbox_Selector/
With little bit modification I have this.


var startTrack = function () {
this.rows = [];
var r;

Ext.select(".x-grid-row", false).each(function (checkEl) {
r = Ext.getCmp(checkEl.dom.id); //here i must get store.item object but I was unable to do so.What should be here to get an store item
this.rows.push(r);
}, this);
};
dragTrack = function () {
var r, sel;

for (var i = 0, l = this.rows.length; i < l; i++) {
r = this.rows[i];
var sm = Ext.getCmp('grd1').getSelectionModel();
sm.select(r)
}
};


My major problem is how to gather up rows when mouse is dragged ?More specifically how to get to store.data.item when you have "corresponding" dom element

Vladimir
Jan 27, 2013, 8:41 PM
Probably the following plugin can be interesting for you
Sencha forum link http://www.sencha.com/forum/showthread.php?133150-Ext.ux.grid.plugin.DragSelector
Demo link http://harrydeluxe.github.com/extjs-ux/example/grid/dragselector.html
Git link https://github.com/harrydeluxe/extjs-ux/blob/master/ux/grid/plugin/DragSelector.js

odyssey
Jan 28, 2013, 9:37 AM
Probably the following plugin can be interesting for you
Sencha forum link http://www.sencha.com/forum/showthread.php?133150-Ext.ux.grid.plugin.DragSelector
Demo link http://harrydeluxe.github.com/extjs-ux/example/grid/dragselector.html
Git link https://github.com/harrydeluxe/extjs-ux/blob/master/ux/grid/plugin/DragSelector.js

Well I tried the example but it seems I am doing something wrong


<script src="GridDragSelector.js" type="text/javascript"></script> // the drag implemetations from site
<script type ="text/javascript" >
function attachPlagin(grd) { // i am attchaing this pluging on boxready event
grd.plagins = Ext.create('Ext.ux.grid.plugin.DragSelector', {})

}


nothing is happening
what am I doing wrong??

Daniil
Jan 28, 2013, 11:19 AM
Maybe, it is not a single problem bug "plagins" must be "plugins" here.

grd.plagins

odyssey
Jan 28, 2013, 11:45 AM
Maybe, it is not a single problem bug "plagins" must be "plugins" here.

grd.plagins

Nope. It did not help

Daniil
Jan 28, 2013, 1:01 PM
Please provide a sample to reproduce.

Daniil
Jan 28, 2013, 1:51 PM
To attach a plugin you can use a GenericPlugin.

<ext:GenericPlugin runat="server" Path="GridDragSelector.js" InstanceName="Ext.ux.grid.plugin.DragSelector" />

You should put it into a control's Plugins collection.

If you need to attach a plugin by JavaScript, you should call a component's initPlugin method.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-method-initPlugin

odyssey
Jan 29, 2013, 7:41 AM
To attach a plugin you can use a GenericPlugin.

<ext:GenericPlugin runat="server" Path="GridDragSelector.js" InstanceName="Ext.ux.grid.plugin.DragSelector" />

You should put it into a control's Plugins collection.

If you need to attach a plugin by JavaScript, you should call a component's initPlugin method.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-method-initPlugin

I am sending a small example.The strange thing is that in plain JavaScript it works (if attached to plugins property it is not working if attached on events) but in ext.net version only selection box is appearing but the selection is not taking place .Please can you look at it .


Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.ux': 'http://extjs.cachefly.net/extjs-4.1.1-gpl/examples/ux/',
'Ext.ux.grid': '../../ux/grid'
//'Ext.ux.grid.plugin': '../../ux/grid/plugin'
}
});
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*',
'Ext.ux.CheckColumn',
'Ext.ux.grid.plugin.DragSelector'
]);
Ext.onReady(function () {
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
'name',
'email',
{ name: 'start', type: 'date', dateFormat: 'n/j/Y' },
{ name: 'salary', type: 'float' },
{ name: 'active', type: 'bool' }
]
});
var data = (function () {
var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
lastLen = lasts.length,
firstLen = firsts.length,
usedNames = {},
data = [],
s = new Date(2007, 0, 1),
now = new Date(),

getRandomInt = function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},

generateName = function () {
var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
if (usedNames[name]) {
return generateName();
}
usedNames[name] = true;
return name;
};

while (s.getTime() < now.getTime()) {
var ecount = getRandomInt(0, 3);
for (var i = 0; i < ecount; i++) {
var name = generateName();
data.push({
start: Ext.Date.add(Ext.Date.clearTime(s, true), Ext.Date.DAY, getRandomInt(0, 27)),
name: name,
email: name.toLowerCase().replace(' ', '.') + '@sencha-test.com',
active: getRandomInt(0, 1),
salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
});
}
s = Ext.Date.add(s, Ext.Date.MONTH, 1);
}

return data;
})();
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Employee',
proxy: {
type: 'memory'
},
data: data,
sorters: [{
property: 'start',
direction: 'ASC'
}]
});

var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Employee',
proxy: {
type: 'memory'
},
data: data,
sorters: [{
property: 'start',
direction: 'ASC'
}],
listeners: {
load: function () {
//alert ('store loaded');
//Ext.getCmp('grdMan').plugins.push(Ext.create('Ext. ux.grid.plugin.DragSelector', {}))
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
id: 'grdMan',
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
// defaults to textfield if no xtype is supplied
allowBlank: false
}
}, {
header: 'Email',
dataIndex: 'email',
width: 160,
editor: {
allowBlank: false,
vtype: 'email'
}
}, {
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'start',
width: 90,
field: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y',
minValue: '01/01/2006',
minText: 'Cannot have a start date before the company existed!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}
}, {
xtype: 'numbercolumn',
header: 'Salary',
dataIndex: 'salary',
format: '$0,0',
width: 90,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
}, {
xtype: 'checkcolumn',
header: 'Active?',
dataIndex: 'active',
width: 60,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
}],
renderTo: 'editor-grid',
width: 600,
height: 400,
title: 'Employee Salaries',
frame: true,
multiSelect: true,
tbar: [{
itemId: 'removeEmployee',
text: 'Remove Employee',
iconCls: 'employee-remove',
handler: function () {
var sm = grid.getSelectionModel().getSelection();

for (var i = 0; i < sm.length; i++) {
//sm[i].commit();
store.remove(sm[i]);
}
},
disabled: true
}],
plugins: [Ext.create('Ext.ux.grid.plugin.DragSelector', {})],
listeners: {
'selectionchange': function (view, records) {
grid.down('#removeEmployee').setDisabled(!records. length);
},
boxReady: function () {
// none of this lines works
//this.plugins.push(Ext.create('Ext.ux.grid.plugin.D ragSelector', {}))
//thus.plugins = Ext.create('Ext.ux.grid.plugin.DragSelector', {})


}

}
});

});

<ext:GridPanel ID="GridPanel1" runat="server" Title="Array Grid" Width="600" Height="350">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
<ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">
</ext:Column>
<ext:Column ID="Column4" runat="server" Text="Change" DataIndex="pctChange">
</ext:Column>
<ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" DataIndex="lastChange" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<Plugins>
<ext:GenericPlugin runat ="server" Path ="GridDragSelector.js" InstanceName="Ext.ux.grid.plugin.DragSelector" ></ext:GenericPlugin>
</Plugins>
<Listeners>
</Listeners>
</ext:GridPanel>

Daniil
Jan 29, 2013, 10:56 AM
Do you use the Ext.NET sources from SVN trunk?

It currently uses ExtJS 4.2.0 beta 2. In the raw ExtJS sample you use ExtJS 4.1.1.

I think it is the main difference between the examples. The plugins looks not updated for ExtJS 4.2. JavaScript errors occur on drag.

Here is also an interesting example.
http://forums.ext.net/showthread.php?22673&p=99139&viewfull=1#post99139

odyssey
Jan 29, 2013, 12:28 PM
Do you use the Ext.NET sources from SVN trunk?

It currently uses ExtJS 4.2.0 beta 2. In the raw ExtJS sample you use ExtJS 4.1.1.

I think it is the main difference between the examples. The plugins looks not updated for ExtJS 4.2. JavaScript errors occur on drag.

Here is also an interesting example.
http://forums.ext.net/showthread.php?22673&p=99139&viewfull=1#post99139

No I am not using Ext.net from svn SVN trunk.So you are suggesting to updating to Ext.net 2.2 ??

Daniil
Jan 29, 2013, 1:01 PM
No, the plugin doesn't work with the Ext.NET sources from SVN (because the plugin seems not update for ExtJS 4.2).

What Ext.NET version are you using?

odyssey
Jan 29, 2013, 1:13 PM
No, the plugin doesn't work with the Ext.NET sources from SVN (because the plugin seems not update for ExtJS 4.2).

What Ext.NET version are you using?

Version 2.1

Daniil
Jan 29, 2013, 1:32 PM
Then you just need to set up Mode="Multi" for the selection model.

<ext:RowSelectionModel runat="server" Mode="Multi" />

odyssey
Jan 29, 2013, 1:45 PM
Then you just need to set up Mode="Multi" for the selection model.

<ext:RowSelectionModel runat="server" Mode="Multi" />
:)
Jesus. I was about to give up. Thanks a lot

Daniil
Jan 29, 2013, 1:52 PM
:)

There is the "multiSelect" option for the GridPanel in your raw ExtJS sample.

Setting this option for the GridPanel in ASPX won't help, because you set up a SelectionModel. It would override MultiSelect="true".

Moreover, MultiSelect option is deprecated.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Table-cfg-multiSelect

odyssey
Jan 30, 2013, 8:58 AM

Daniil
Jan 30, 2013, 1:10 PM
Do you mean selecting the text in the cells?

odyssey
Jan 30, 2013, 1:12 PM
Do you mean selecting the text in the cells?
Yes exactly

Daniil
Jan 30, 2013, 5:05 PM
Please set up EnableTextSelection="true" for the GridPanel's View.

<ext:GridPanel runat="server">
<View>
<ext:GridView runat="server" EnableTextSelection="true" />
</View>
</ext:GridPanel>

odyssey
Jan 31, 2013, 7:31 AM
Please set up EnableTextSelection="true" for the GridPanel's View.

<ext:GridPanel runat="server">
<View>
<ext:GridView runat="server" EnableTextSelection="true" />
</View>
</ext:GridPanel>

No Daniil this is not the case since the rowselection cancels textselection because both are listeneiing on mouse dragevents
if you attach this then EnableTextSelection="true" does not work


<ext:GenericPlugin runat="server" Path="GridDragSelector.js" InstanceName="Ext.ux.grid.plugin.DragSelector">
</ext:GenericPlugin>

Thats why I asked to make cell text selectable on doubleclick .Ofcource if it is possible

Daniil
Jan 31, 2013, 9:39 AM
I see...

There is the onRender method in the plugin where a DragTracker instance is created.

Please try to add "preventDefault: false" option.

me.tracker = new Ext.dd.DragTracker({
preventDefault: false,
...

It is true by default.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dd.DragTracker-cfg-preventDefault

odyssey
Jan 31, 2013, 10:32 AM
I see...

There is the onRender method in the plugin where a DragTracker instance is created.

Please try to add "preventDefault: false" option.

me.tracker = new Ext.dd.DragTracker({
preventDefault: false,
...

It is true by default.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dd.DragTracker-cfg-preventDefault

Unfortunately it did not work

Daniil
Jan 31, 2013, 11:01 AM
It works for me in FireFox. Please ensure the old script is not cached and re-requested.

odyssey
Jan 31, 2013, 11:14 AM
It works for me in FireFox. Please ensure the old script is not cached and re-requested.

yes you are right it is ugly but it works.However I feel that there shoud be a way on double click selection

Daniil
Jan 31, 2013, 12:49 PM
Maybe handle the GridPanel's or GridView's ItemDblClick event and try to select the text manually via JavaScript.

odyssey
Feb 01, 2013, 7:03 AM
Maybe handle the GridPanel's or GridView's ItemDblClick event and try to select the text manually via JavaScript.
I am trying to do exactly this

Daniil
Feb 01, 2013, 7:35 AM
Good. What is your progress?