PDA

View Full Version : firstGrid.getView().scroller in undefined showing in dnd_grid_to_grid example



jaisonjames
3 Jan 2011, 9:58 PM
Showing an error when i use dnd_grid_to_grid example in my code? I have already tried some of solution which is posted in this forum. But did't get solution. Can someone help me?

Below my code



VisibilityDashBoardPanel = Ext.extend(Ext.Panel, {
initComponent: function()
{


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


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

// 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'}
];

// declare the source Grid
var firstGrid = new Ext.grid.GridPanel({
ddGroup : 'secondGridDDGroup',
store : firstGridStore,
columns : cols,
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.GridPanel({
ddGroup : 'firstGridDDGroup',
store : secondGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
title : 'Second Grid'
});


var visibilityPanel = new Ext.Container({
border:false,
width:'100%',
autoEl: 'div', // This is the default
type: 'hbox',
items:[{
border:false,
layout:'form',
items:[{
fieldLabel: '<b>Report Visibility</b>',
xtype: 'combo',
labelStyle: 'width:120px',
width : 130,
triggerAction: 'all',
store: ['Private',
'Specified Users',
'Public']
}]
},
{
border:false,
layout:'column',
items: [{
columnWidth: .70,
xtype:'fieldset',
title:'Visible To',
layout:'column',
bodyStyle:'margin:20;',
items:[firstGrid,
{
id: 'selectFieldMoveButton',
flex: 0,
border: false,
width: 40,
layout: 'hbox',
layoutConfig:{
align: 'middle',
pack: 'center',
padding: 5
},
items : [
{ xtype:'button',
icon:'../image/reportui/icon-grid-moveright.png',
handler : function(b,e){
var nodes = Ext.getCmp('listSelectFieldTreePanel').getSelectionModel().getSelectedNodes();

if (nodes.length > 0)
{
var selectedFields = new Array();

Ext.each(nodes, function(node){
selectedFields[selectedFields.length] = node.attributes;
})
}

var store = Ext.StoreMgr.get('listSelectedFieldStore');

var records = store.reader.readRecords({selectedFields : selectedFields});

Ext.each(records.records, function(rec) {
rec.id = Ext.data.Record.id(rec); // assign new id
store.add(rec);
});
}
}
]
},secondGrid
]
},{columnWidth:.02, bodyStyle:'border:1px solid #fff;'},{
columnWidth: .22,
border:false,
id:'myGroup',
xtype: 'checkboxgroup',
// Put all controls in a single column with width 100%
columns: 1,
bodyStyle: 'padding:20px 20px',
items: [
{boxLabel: 'Allow users to copy report', name: 'cb-col-1', bodyStyle: 'padding:20px 20px'},
{boxLabel: 'Disply filters settings', name: 'cb-col-2'},
{boxLabel: 'Disply data with my visibility permissions', name: 'cb-col-3'}
]

}]
}]

})

Ext.applyIf(this, {
layout : 'fit',
width: '100%',
border:false
,items: [{
region:'west',
width: '100%',
border:false,
items : [visibilityPanel]
// Hbox layout with filter options and available icons
}]
});


// 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
}
});



VisibilityDashBoardPanel.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('VisibilityDashBoardPanel', VisibilityDashBoardPanel);

evant
3 Jan 2011, 10:25 PM
Because it's not rendered yet. You need to wait until the grid is rendered before you can access the scroller.

jaisonjames
3 Jan 2011, 10:36 PM
evant Thank you for your reply.

Nothing rendering and showing this error in error console only.

Could you more clarify your solution?

Thanks

jaisonjames
3 Jan 2011, 11:57 PM
anyone have idea?

talha06
3 Jan 2011, 11:59 PM
apply it as I did here (http://www.sencha.com/forum/showthread.php?120125-DragDrop-problem)..

jaisonjames
4 Jan 2011, 12:23 AM
showing afterrender : function(comp) {.... Syntax error

Any idea?

talha06
4 Jan 2011, 12:25 AM
u should add it into grid's 'listener' config..


...........
,listeners : {
afterrender : function(comp) {
..................;
}
}

jaisonjames
4 Jan 2011, 1:25 AM
Thank you very much talha06 (http://www.sencha.com/forum/member.php?78980-talha06). Its working fine :)


u should add it into grid's 'listener' config..


...........
,listeners : {
afterrender : function(comp) {
..................;
}
}

talha06
4 Jan 2011, 1:36 AM
happy to see that u solved ur problem.. ;)