PDA

View Full Version : Ext.grid.Panel combined with plugins "rowexpander" and "gridviewdragdrop"



ktt
10 Feb 2015, 5:13 AM
Hello,

I'm using ExtJS 4.2.1 and try to combine a grid panel with the plugins "rowexpander" and "gridviewdragdrop".

My problem is:
After I drag the first row to the end of the grid and expand the first row the dragged row will be expanded.

Example:


Ext.application({
name : 'Fiddle',
launch : function() {
var myStore = Ext.create('Ext.data.Store',{
fields: ['date','dayname','intime','outtime','shiftintime','shiftouttime'],
data: [{
date: '2014-07-01',
dayname: 'Tue',
intime: '06:35',
outtime: '15:17',
shiftintime: '07:00',
shiftouttime: '15:00'
},{
date: '2014-07-02',
dayname: 'Wed',
intime: '06:56',
outtime: '15:07',
shiftintime: '07:00',
shiftouttime: '15:00'
}],
proxy: {
type: 'memory',
reader: { type: 'json', root: '' }
}
});
Ext.define('DailyTimeSummary', {
extend: 'Ext.grid.Panel',
//requires: ['Ext.grid.plugin.RowExpander'],
alias: 'widget.dailytimesummary',
title: 'Daily Work',
emptyText: 'No results',
border: 1,
//padding: '5',
enableColumnHide: false,
enableColumnMove: false,
// this needs to be configured with the initial component
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: ['{Date}']
}],
viewConfig: {
plugins: [{
ptype: 'gridviewdragdrop'
}]
},
selModel: {
enableKeyNav: false
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
columns: [
{
xtype: 'datecolumn',
text: 'Date',
width: 90,
format: 'm-d-Y',
dataIndex: 'date'
}, {
dataIndex: 'dayname',
text: 'Day'
}, {

text: 'CheckIn',
width: 90,
dataIndex: 'intime'
}, {

text: 'CheckOut',
width: 90,
dataIndex: 'outtime'
}, {
text: 'Shift In',
width: 90,
dataIndex: 'shiftintime'
}, {

text: 'Shift Out',
width: 90,
dataIndex: 'shiftouttime'
}, {
xtype: 'actioncolumn',
width: 60,
align: 'center',
sortable: false,
items: [{
//icon: 'app/resources/images/cog_edit.png',
iconCls: 'delete',
tooltip: 'Delete',
padding: '0 5 0 0',

handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Delete " + rec.get('Date'));
},
isDisabled: function(view, rowIndex, colIndex, item, record) {
return true; //!record.get('editable');
}
}, {
iconCls: 'delete',
tooltip: 'View',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Terminate " + rec.get('date'));
}
}]
}

],
tools: [{
type: 'help',
itemId: 'btnLeyend'
}, {
type: 'print',
itemId: 'btnPrint'
}],
tbar: me.buildToolbar(),

store: myStore,
});
me.callParent(arguments);
},
buildToolbar: function() {
return [{
text: 'Ver detalle',
action: 'viewDetail'
}];
}
});
Ext.create('Ext.panel.Panel',{
title: 'Attendance',
renderTo: Ext.getBody(),
items: [{
xtype: 'dailytimesummary'
}]
});
}
});


I hope someone can help me! Thanks!

Greetz!

joel.watson
12 Feb 2015, 9:32 AM
Hello,

I'm using ExtJS 4.2.1 and try to combine a grid panel with the plugins "rowexpander" and "gridviewdragdrop".

My problem is:
After I drag the first row to the end of the grid and expand the first row the dragged row will be expanded.

I hope someone can help me! Thanks!

Greetz!

Hi--

Thanks for the report. This is a bug, and has been resolved in Ext JS 4.2.3.

Thanks!
Joel

ktt
13 Feb 2015, 1:37 AM
Hi, thank you for your support! I can confirm the bug fix on Ext JS 4.2.3. Thanks

joel.watson
13 Feb 2015, 6:19 AM
Hi, thank you for your support! I can confirm the bug fix on Ext JS 4.2.3. Thanks

Sure thing, happy to help!

Thanks
Joel