PDA

View Full Version : Problem with drag-n-drop scroll bar in ExtJs 4



seema
16 Feb 2012, 8:25 PM
Hi,
I'm facing a problem with scroll bar.
I'm creating a drag-n-drop component and in forst grid I want to use scroll bar. This scroll bar works fine first time but after reloading some data in grid, it stops working. I've noticed this problem in very later stage of my development. Any quick help is appreciated.

Here is my code for D-n-D-





Ext.define(




'DataObject', {extend: 'Ext.data.Model',fields: [
{name: 'id'},
{name: 'displayName'},
{name: 'column1'},
{name: 'column2'}]



});

var searchFirstGridStore = Ext.create('Ext.data.Store',
{model: 'DataObject',storeId: 'searchFirstGridStore'



});


var columns = [{text: "", flex: 1, sortable: true, dataIndex: 'displayName'}];





here is code for first grid-



searchFirstGrid = Ext.create('Ext.grid.Panel', {
id :'searchFirstGrid',
multiSelect: true,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'searchFirstGridDDGroup',
dropGroup: 'searchSecondGridDDGroup',
style : { overflow: 'auto', overflowX: 'hidden' }
},
listeners: {
drop: function(node, data, dropRec, dropPosition) {
// some work
}
}
},
store : searchFirstGridStore,
columns : columns,
layout :'fit',
stripeRows : true,
title : 'AVAILABLE BUSINESS MODELS',
margins : '0 2 0 0'
});


hereis second grid code-



searchSecondGridStore = Ext.create('Ext.data.Store', {
model: 'DataObject',
storeId: 'searchSecondGridStore'
});

searchSecondGrid = Ext.create('Ext.grid.Panel', {
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'searchSecondGridDDGroup',
dropGroup: 'searchFirstGridDDGroup'
},
listeners: {
//some work
}
},
store : searchSecondGridStore,
columns : columns,
stripeRows : true,
title : 'SELECTED BUSINESS MODELS',
margins : '0 0 0 3'
});

and this is for panel-


var displayPanel = Ext.create('Ext.Panel', {
id : 'DragAndDropSearchPanel', /* Declare ID for Window to use so it can insert the drag and drop grid into it's main content area */
width : 650,
height : 300,
layout : {
type: 'hbox',
align: 'stretch',
padding: 5
},
defaults : { flex : 1 }, //auto stretch
items : [
searchFirstGrid,
searchSecondGrid
]
})


Please suggest.

mitchellsimoens
17 Feb 2012, 4:49 AM
What Ext JS 4 version?

seema
17 Feb 2012, 6:50 AM
Its 4.0.2

seema
20 Feb 2012, 11:09 PM
I've overrided Ext.grid.Scroller and its working fine now.
Here is the work around code



/*
* Work around for scrollbar issue in extjs 4
*/
Ext.override(Ext.grid.Scroller, {
afterRender: function() {
var me = this;
me.callParent();
me.mon(me.scrollEl, 'scroll', me.onElScroll, me);
Ext.cache[me.el.id].skipGarbageCollection = true;
$(me.scrollEl.dom).scroll({scope: me}, me.onElScrollCheck);
},
wasScrolled: false,
onElScroll: function(event, target) {
this.fireEvent('bodyscroll', event, target);
},
onElScrollCheck: function(event, target) {
var me = event.data.scope;
if (!me.wasScrolled)
me.mon(me.scrollEl, 'scroll', me.onElScroll, me);
me.wasScrolled = false;
}
});