PDA

View Full Version : How can I drag and drop grid column header in a Component?



guaraviton
26 Sep 2012, 10:34 AM
Hi guys,
is there a way to drag and drop a grig column header inside a component, without loosing it´s column header in the gird? I only need to copy de column header inside a single component.
Like above...

38969

Thanks

scottmartin
26 Sep 2012, 7:03 PM
One thought would be to have the drop panel as a grid with a store. When you drop the header in the 2nd 'grid' create a record in the store and cancel the drop to maintain the header.

Scott.

guaraviton
27 Sep 2012, 5:02 AM
scottmartin (http://www.sencha.com/forum/member.php?165873-scottmartin), thanks for replying me, but how can i configure the column target?

My study case code above:


Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.dd.*'
]);


Ext.define('DropDataObject', {
extend: 'Ext.data.Model',
fields: ['coluna1', 'coluna2']
});


Ext.define('DragDataObject', {
extend: 'Ext.data.Model',
fields: ['coluna1']
});




Ext.onReady(function(){


var dragData = [
{ coluna1 : "Teste1A", coluna2 : "Teste1B" },
{ coluna1 : "Teste2A", coluna2 : "Teste2B" }
];


// create the data store
var dragGridStore = Ext.create('Ext.data.Store', {
model: 'DropDataObject',
data: dragData
});

var dropGridStore = Ext.create('Ext.data.Store', {
model: 'DragDataObject'
});

var dragColumns = [
{text: "Coluna1", flex: 1, sortable: true, dataIndex: 'coluna1'},
{text: "Coluna2", width: 70, sortable: true, dataIndex: 'coluna2'}
];

var dropColumns = [
{text: "Coluna", flex: 1, sortable: true, dataIndex: 'coluna1'},
];


// declare the source Grid
var dragGrid = Ext.create('Ext.grid.Panel', {
multiSelect: true,
store : dragGridStore,
columns : dragColumns,
stripeRows : true,
title : 'Drag Grid',
margins : '0 2 0 0',
enableDragDrop : true,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'dragGrid',
dropGroup: 'dropGrid'
}
}
});





// create the destination Grid
var dropGrid = Ext.create('Ext.grid.Panel', {
store : dropGridStore,
columns : dropColumns,
stripeRows : true,
title : 'Drop Grid',
margins : '0 0 0 3',
enableDragDrop : true,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'dropGrid',
dropGroup: 'dragGrid'
}
}
});


//Simple 'border layout' panel to house both grids
var displayPanel = Ext.create('Ext.Panel', {
width : 800,
height : 300,
layout : {
type: 'hbox',
align: 'stretch',
padding: 5
},
renderTo : 'panel',
defaults : { flex : 1 }, //auto stretch
items : [
dragGrid,
dropGrid
]
});


});

guaraviton
27 Sep 2012, 6:41 AM
I´m close to solution, but the drag text is not ok, it´s breaking the column´s header text, like the image above:
Any idea?

38996


Ext.require([ 'Ext.grid.*',
'Ext.data.*',
'Ext.dd.*'
]);


Ext.define('DropDataObject', {
extend: 'Ext.data.Model',
fields: ['coluna1', 'coluna2']
});


Ext.define('DragDataObject', {
extend: 'Ext.data.Model',
fields: ['coluna1']
});




Ext.onReady(function(){


var dragData1 = [
{ coluna1 : "Teste1A", coluna2 : "Teste1B" },
{ coluna1 : "Teste2A", coluna2 : "Teste2B" }
];

var dragData2 = [
{ coluna1 : "Teste1A", coluna2 : "Teste1B" },
{ coluna1 : "Teste2A", coluna2 : "Teste2B" }
];


var dragGridStore1 = Ext.create('Ext.data.Store', {
model: 'DropDataObject',
data: dragData1
});

var dragGridStore2 = Ext.create('Ext.data.Store', {
model: 'DropDataObject',
data: dragData1
});

var dropGridStore = Ext.create('Ext.data.Store', {
model: 'DragDataObject'
});

var dragColumns1 = [
{text: "Coluna1", flex: 1, sortable: true, dataIndex: 'coluna1', listeners : {render : configRender1}},
{text: "Coluna2", width: 70, sortable: true, dataIndex: 'coluna2', listeners : {render : configRender1}}
];

var dragColumns2 = [
{text: "Coluna1", flex: 1, sortable: true, dataIndex: 'coluna1', listeners : {render : configRender2}},
{text: "Coluna2", width: 70, sortable: true, dataIndex: 'coluna2', listeners : {render : configRender2}}
];

var dropColumns = [
{text: "Coluna", flex: 1, sortable: true, dataIndex: 'coluna1'},
];


// declare the source Grid
var dragGrid = Ext.create('Ext.grid.Panel', {
multiSelect: true,
store : dragGridStore1,
columns : dragColumns1,
stripeRows : true,
title : 'Drag Grid',
margins : '0 2 0 0',
enableDragDrop : true,
id: 'dragGrid'
});

// declare the source Grid
var dragGrid2 = Ext.create('Ext.grid.Panel', {
multiSelect: true,
store : dragGridStore2,
columns : dragColumns2,
stripeRows : true,
title : 'Drag Grid2',
margins : '0 2 0 0',
enableDragDrop : true,
id: 'dragGrid2'
});


var dropGrid = Ext.create('Ext.grid.Panel', {
store : dropGridStore,
columns : dropColumns,
stripeRows : true,
title : 'Drop Grid',
margins : '0 0 0 3',
enableDragDrop : true,
id: 'dropGrid',
listeners : {
render : function(g) {
var dropOff = new Ext.dd.DropZone(g.getEl(), {
ddGroup : 'test',
getTargetFromEvent : function(e) {
return Ext.getCmp('dropGrid');
},
onDragDrop: function(e, id){
var t = e.getTarget('dropGrid');
alert('onDragDrop');
},
notifyDrop : function(dd, e, data) {
var gridDrop = Ext.getCmp('dropGrid');
var gridDrag = Ext.getCmp(data.grid);
var store = gridDrop.getStore();
var dragData = {coluna1 : data.element.text + ' - ' + gridDrag.title};
store.add(dragData);
}
})
}
}
});





//Simple 'border layout' panel to house both grids
var displayPanel = Ext.create('Ext.Panel', {
width : 800,
height : 300,
layout : {
type: 'hbox',
align: 'stretch',
padding: 5
},
renderTo : 'panel',
defaults : { flex : 1 }, //auto stretch
items : [
dragGrid,
dragGrid2,
dropGrid
]
});


});


function configRender1(g){
var dragElement = new Ext.dd.DragSource(g.getEl(), {
copy : false,
isTarget : false,
ddGroup : 'test',
getDragData : function(e) {
var target = Ext.get(e.getTarget());
return {
element : g,
item : target,
grid : 'dragGrid'
};
}
});
}


function configRender2(g){
var dragElement = new Ext.dd.DragSource(g.getEl(), {
copy : false,
isTarget : false,
ddGroup : 'test',
getDragData : function(e) {
var target = Ext.get(e.getTarget());
return {
element : g,
item : target,
grid : 'dragGrid2'
};
}
});
}

scottmartin
27 Sep 2012, 7:02 AM
Have a look at the column renderers. If you remove them, you can see the text.

Scott.

guaraviton
27 Sep 2012, 10:04 AM
I didn´t understand, column renders is about to render the value of the items of the column, isn´t it?
Can you show me an example? This is the final step of the implementation, and i really don´t know how to solve.

Thanks