PDA

View Full Version : [CLOSED] Drag and Drop with Group Summary



insomnix
25 Apr 2013, 2:57 PM
Novice Ext Js user here needing a little pointer. I have two grids, drag and drop enabled so I can move items from one grid to the other. The first grid is set up as a group with summary, the second has just a summary, no grouping. Everything so far works great. I'm able to drag to the second grid and the total comes out the way I want it. However, in the first grid the total for each group does not decrease when I drag away from that grid. Not only that, but when I drag something from grid two back to grid one, the totals increase to a greater number than was there before. Below is my code:


Ext.require([
'Ext.grid.*'
,'Ext.data.*'
,'Ext.dd.*'
,'Ext.form.field.Number'
,'Ext.form.field.Date'
,'Ext.tip.QuickTipManager'
]);

Ext.define('DataObject', {
extend: 'Ext.data.Model'
,idProperty: 'name'
,fields: [
{name: 'group', type: 'string'},
{name: 'name', type: 'string'},
{name: 'column1', type: 'string'},
{name: 'column2', type: 'string'},
{name: 'cost', type: 'float'}
]
});

Ext.onReady(function(){
//Ext.tip.QuickTipManager.init();
var myData = [
{ group : "gr1", name : "Rec 0", column1 : "0", column2 : "0", cost : 5 },
{ group : "gr1", name : "Rec 1", column1 : "1", column2 : "1", cost : 5 },
{ group : "gr1", name : "Rec 2", column1 : "2", column2 : "2", cost : 6 },
{ group : "gr1", name : "Rec 3", column1 : "3", column2 : "3", cost : 3 },
{ group : "gr1", name : "Rec 4", column1 : "4", column2 : "4", cost : 8 },
{ group : "gr1", name : "Rec 5", column1 : "5", column2 : "5", cost : 1 },
{ group : "gr2", name : "Rec 6", column1 : "6", column2 : "6", cost : 2 },
{ group : "gr2", name : "Rec 7", column1 : "7", column2 : "7", cost : 3 },
{ group : "gr2", name : "Rec 8", column1 : "8", column2 : "8", cost : 5 },
{ group : "gr2", name : "Rec 9", column1 : "9", column2 : "9", cost : 5 }
];

// create the data store
var firstGridStore = Ext.create('Ext.data.Store', {
model: 'DataObject'
,data: myData
,sorters: {property: 'name', direction: 'ASC'}
,groupField: 'group'
});

var secondGridStore = Ext.create('Ext.data.Store', {
model: 'DataObject'
,sorters: {property: 'name', direction: 'ASC'}
,groupField: 'group'
});

// Column Model shortcut array
var firstColumns = [{
text: 'Record Name'
,flex: 1
,tdCls: 'items'
,sortable: true
,dataIndex: 'name'
,hideable: false
,summaryType: 'count'
,renderer: function(v, params) {
params.tdCls = "items";
return v;
}
,summaryRenderer: function(v, params, data) {
return ((v === 0 || v > 1) ? '(' + v + ' group)' : '(1 group)');
}
},{
text: "column1"
,width: 70
,sortable: true
,dataIndex: 'column1'
},{
text: "column2"
,width: 70
,sortable: true
,dataIndex: 'column2'
},{
text: 'Cost'
,width: 75
,sortable: false
,groupable: false
,dataIndex: 'cost'
,renderer: function(v, params, record){
return Ext.util.Format.usMoney(v);
}
,summaryType: function(records){
var i = 0
,length = records.length
,total = 0
,record;

for (; i < length; ++i) {
record = records[i];
total += record.get('cost');
}
return total;
}
,summaryRenderer: Ext.util.Format.usMoney
}];

// Column Model shortcut array
var secondColumns = [{
text: "Record Name"
,width: 70
,sortable: true
,dataIndex: 'name'
},{
text: "column1"
,width: 70
,sortable: true
,dataIndex: 'column1'
},{
text: "column2"
,width: 70
,sortable: true
,dataIndex: 'column2'
},{
text: 'Cost'
,width: 75
,sortable: false
,groupable: false
,dataIndex: 'cost'
,renderer: function(v, params, record){
return Ext.util.Format.usMoney(v);
}
,summaryType: function(records){
var i = 0
,length = records.length
,total = 0
,record;

for (; i < length; ++i) {
record = records[i];
total += record.get('cost');
}
return total;
}
,summaryRenderer: Ext.util.Format.usMoney
}];

// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
flex: 1
,xtype: 'grid'
,multiSelect: true
,viewConfig: {
plugins: {
ptype: 'gridviewdragdrop'
,dragGroup: 'firstGridDDGroup'
,dropGroup: 'secondGridDDGroup'
}
}
,store: firstGridStore
,columns: firstColumns
,stripeRows: true
,title: 'First Grid'
,margins: '0 2 0 0'
,features: [{
id: 'group'
,ftype: 'groupingsummary'
,groupHeaderTpl: '{name}'
,hideGroupedHeader: true
}]
});

// create the destination Grid
var secondGrid = Ext.create('Ext.grid.Panel', {
flex: 1
,xtype: 'grid'
,multiSelect: true
,viewConfig: {
plugins: {
ptype: 'gridviewdragdrop'
,dragGroup: 'secondGridDDGroup'
,dropGroup: 'firstGridDDGroup'
}
}
,store: secondGridStore
,columns: secondColumns
,stripeRows: true
,title: 'Second Grid'
,margins: '0 0 0 3'
,features: [{
ftype: 'summary'
}]
});

//Simple 'border layout' panel to house both grids
var displayPanel = Ext.create('Ext.Panel', {
width: 800
,height: 400
,layout: {
type: 'hbox'
,align: 'stretch'
,padding: 5
}
,renderTo: Ext.getBody()
,defaults: { flex: 1 } //auto stretch
,items: [
firstGrid
,secondGrid
]
,dockedItems: {
xtype: 'toolbar'
,dock: 'bottom'
,items: ['->',{
text: 'Reset both grids',
handler: function(){
//refresh source grid
firstGridStore.loadData(myData);

//purge destination grid
secondGridStore.removeAll();
}
}]
}
});
});

Any pointers would be appreciated.

*EDIT BY SLEMMON
Tested on 4.2.0.663 (same results as described above)
Tested on 4.2.1.789 (same results + dragging the row from the right grid to the left works unless there are no rows left to drag in which case an error is logged: "Uncaught RangeError: Maximum call stack size exceeded")

slemmon
29 Apr 2013, 11:03 AM
Thanks for the report! I have opened a bug in our bug tracker.

In the meantime you might try refreshing the gridView after the drop event.

insomnix
20 May 2013, 4:29 PM
Something else I found. If you drag an item from one group to the second grid, then try to drag it back to the first grid, it will error if you drop on a group other than the group it started on.

mysticav
20 Aug 2013, 9:10 PM
slemmon,

refreshing the view does nothing. On previous versions this was the only workaround, but since 4.2.1, there's no way to update the summary row after removing a record (decreasing).

Any other workaround ?

This bug is affecting terribly my application.

By the way, there must be an updateSummary function!!

refreshing the view is a very heavy and unnecessary process for this situation.

Thanks.