PDA

View Full Version : DND + EditorGrid + Checkcolumn



mboyle253
19 Dec 2010, 9:27 PM
Is there any way to make this work correctly? I need an editor grid with DND functionality, and one of the columns is xtype: 'checkcolumn'. I have tried playing with the existing 'Grid to Grid DND' and 'Editor Grid' examples to see if I could combine the functionality and get it to work, but so far no luck. Here is what I have tried :



Ext.onReady(function(){

var myData = {
records : [
{ name : "Rec 0", column1 : "0", column2 : "0", column3: false },
{ name : "Rec 1", column1 : "1", column2 : "1", column3: false },
{ name : "Rec 2", column1 : "2", column2 : "2", column3: false },
{ name : "Rec 3", column1 : "3", column2 : "3", column3: false },
{ name : "Rec 4", column1 : "4", column2 : "4", column3: false },
{ name : "Rec 5", column1 : "5", column2 : "5", column3: false },
{ name : "Rec 6", column1 : "6", column2 : "6", column3: false },
{ name : "Rec 7", column1 : "7", column2 : "7", column3: false },
{ name : "Rec 8", column1 : "8", column2 : "8", column3: false },
{ name : "Rec 9", column1 : "9", column2 : "9", column3: false }
]
};


// Generic fields array to use in both store defs.
var fields = [
{name: 'name', mapping : 'name'},
{name: 'column1', mapping : 'column1'},
{name: 'column2', mapping : 'column2'},
{name: 'column3',mapping: 'column3', type: 'bool'}

];

// create the data store
var firstGridStore = new Ext.data.JsonStore({
fields : fields,
data : myData,
root : 'records'
});


// Column Model shortcut array
var cols = [
{ id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
{header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
{header: "column2", width: 50, sortable: true, dataIndex: 'column2'},
{
xtype: 'checkcolumn',
header: 'Checkcolumn',
dataIndex: 'column3',
width: 55
}
];

// declare the source Grid
var firstGrid = new Ext.grid.EditorGridPanel({
ddGroup : 'secondGridDDGroup',
store : firstGridStore,
clicksToEdit: 1,
columns : cols,
sm: new Ext.grid.RowSelectionModel(),
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
title : 'First Grid'
});

var secondGridStore = new Ext.data.JsonStore({
fields : fields,
root : 'records'
});

// create the destination Grid
var secondGrid = new Ext.grid.EditorGridPanel({
ddGroup : 'firstGridDDGroup',
store : secondGridStore,
sm: new Ext.grid.RowSelectionModel(),
clicksToEdit: 1,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
title : 'Second Grid'
});


//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
width : 650,
height : 300,
layout : 'hbox',
renderTo : 'panel-basic',
defaults : { flex : 1 }, //auto stretch
layoutConfig : { align : 'stretch' },
items : [
firstGrid,
secondGrid
],
bbar : [
'->', // Fill
{
text : 'Reset both grids',
handler : function() {
//refresh source grid
firstGridStore.loadData(myData);

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

// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);

/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view scroller element
var firstGridDropTargetEl = firstGrid.getView().scroller.dom;
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup : 'firstGridDDGroup',
notifyDrop : function(ddSource, e, data){
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
firstGrid.store.add(records);
firstGrid.store.sort('name', 'ASC');
return true
}
});


// This will make sure we only drop to the view scroller element
var secondGridDropTargetEl = secondGrid.getView().scroller.dom;
var secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup : 'secondGridDDGroup',
notifyDrop : function(ddSource, e, data){
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
secondGrid.store.add(records);
secondGrid.store.sort('name', 'ASC');
return true
}
});

});
In this attempt, I get the checkbox, but it is not editable. I also tried changing the column definition and assigning an editor to the checkcolumn row :



var cols = [
{ id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
{header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
{header: "column2", width: 50, sortable: true, dataIndex: 'column2'},
{
xtype: 'checkcolumn',
header: 'Checkcolumn',
dataIndex: 'column3',
width: 55,
editor:{xtype:'checkbox'}

}
];

This sort of works, but on edit, the checkbox jumps to the middle of the grid. It tried various combinations of layouts and css to fix this without success.

Could anybody offer some guidance? Many thanks.

Condor
19 Dec 2010, 11:56 PM
Which Ext version are you using?

(In Ext 3.3 CheckColumn works differently from Ext 3.2 and below)

mboyle253
20 Dec 2010, 8:09 AM
I am using 3.3. Are the differences documented somewhere? Did I miss something?

Thanks

Condor
20 Dec 2010, 9:59 PM
No API difference, but CheckColumn now uses column events instead of registering it's own event handler on the grid.

ps. CheckColumn now uses the mousedown event. If you change that to the click event you probably can get it to coexist with d&d.

mboyle253
21 Dec 2010, 3:24 PM
Thanks Condor, that worked. I'm not sure if I did things the most efficient way, but here is what I replaced the checkcolumn definition with:



{ xtype:'checkcolumn', header:'Check',
dataIndex: 'column3',
width: 55,
processEvent : function(name, e, grid, rowIndex, colIndex){
if (name == 'click') {
var record = grid.store.getAt(rowIndex);
record.set(this.dataIndex, !record.data[this.dataIndex]);
return false; // Cancel row selection.
} else {
return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
}
}
}

PTG
2 Jan 2011, 5:31 AM
This fix worked for me too.

Thank you.

wininie
9 Mar 2012, 2:20 AM
Fix for me too.
I just apply the fix in the file CheckColumn.js directly

Thanks