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