PDA

View Full Version : Drag And Drop Not Working - Help quick!



Kachopsticks
30 Sep 2014, 8:25 AM
I need to use drag and drop and when I click my row to begin the drag an error is thrown in the getDragData function. This is the original function, not overridden. The code to create my grid is below. That is from my ui file. Any ideas are appreciated. I didn't see isSelected as a method belonging to the selModel, but maybe I am missing it. I have very similar logic working for other grids so I assume the ext js framework is not the issue. Any ideas are appreciated!



getDragData : function(e){
var t = Ext.lib.Event.getTarget(e);
var rowIndex = this.view.findRowIndex(t);
if(rowIndex !== false){
var sm = this.grid.selModel;
if(!sm.isSelected(rowIndex) || e.hasModifier()){//blows up here, isSelected is not a defiend //method
sm.handleMouseDown(this.grid, rowIndex, e);
}
return {grid: this.grid, ddel: this.ddel, rowIndex: rowIndex, selections:sm.getSelections()};
}
return false;
},





Ext.ns('CMA');
CMA.PartyAddressGridUi = Ext.extend(Ext.grid.EditorGridPanel, {
frame: true,
loadMask: true,
stripeRows: true,
header: true,
enableColumnHide: false,
enableColumnMove: false,
enableDragDrop: true,
ddGroup: 'addressDDGroup',
initComponent: function() {
this.columns = [
Ext.create({
width: 115,
xtype: 'cmaAddressTypeColumn'
}),
Ext.create({
id: 'addressGridAddressColumn',
xtype: 'cmaAddressColumn'
}),
Ext.create({
width: 65,
xtype: 'cmaEffectiveDateColumn'
}),
Ext.create({
width: 65,
xtype: 'cmaAddressValidFromColumn'
}),
Ext.create({
width: 55,
xtype: 'cmaAddressValidToColumn'
})
];
this.tbar = {
xtype: 'toolbar',
height: 23,
items: [
{
xtype: 'tbtext',
text: 'Addresses'
},
{
xtype: 'tbseparator'
},
{
xtype: 'button',
text: 'Add',
iconCls: 'icon-plus',
ref: '../addButton'
}
]
};
this.view = new Ext.grid.GridView({
forceFit: true,
deferEmptyText: false,
emptyText: '<div class="cma-error">Residence Address Required.</div>'
});
CMA.PartyAddressGridUi.superclass.initComponent.call(this);
}
});

Kachopsticks
30 Sep 2014, 10:52 AM
I just got it. I am not sure what the exact cause of this issue was, but I believe it has something to do with the fact that I was adding in these columns in my initComponent function. I suspect it ahs something to do with the check column but I am not sure. In any case to fix the error I added these two lines into my afterRender function. Maybe this will help someone else down the road.

the selModel was missing methods so I recreated it, once it was recreated some of its functions were looking for a reference to the grid, so I added the reference int he second line


this.selModel = new Ext.grid.RowSelectionModel();
this.selModel.grid = this;




this.getColumnModel().config.push(new Ext.ux.grid.CheckColumn({
securityEnable: true,
id: 'lastKnownColumn',
dataIndex: CMA.LAST_KNOW_KEY,
header: 'Last Known',
editable: true,
width: 70,
fixed: true
}));

//Shortening of effective date header to allow room for last know column.
this.getColumnModel().getColumnsBy(function(col){
if (col instanceof CMA.EffectiveDateColumn) {
col.header = 'Eff. Date';
}
}, this);

//action column pushed into column model added with deletion and edit icons
this.getColumnModel().config.push(new Ext.grid.ActionColumn({
id: 'actionColumn',
securityEnable: true,
scope: this,
items: [{
iconCls: 'icon-edit-record',
tooltip: 'Edit',
handler: this.showEditView
}, {
xtype: 'spacer',
width: 25
}, {
iconCls: 'icon-minus',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex, item, event){
this.deleteAddressFromGrid(rowIndex);
}
}],
width: 65,
fixed: true
})