PDA

View Full Version : Problem with scroll for drag/drop in a panel



coolrb
21 Mar 2011, 11:26 PM
Hello,
I have a panel generally represents a book. This panel contains multiple parts( panel), chapters(panel) and topics(label). A topic can be dropped into chapter and a chapter can be dropped into parts. The Book panel should be scrollable so that topic/chapter can be dropped to chapter/part appearing outside the viewable part of browser. But scroll never works. Please find my code


Book Panel:
bookPanel = new Ext.Panel({
title: 'Arrange Parts/Chapters/Topics',
id:'_bookpnl'+bookid,
height:400,
autoScroll : true,
header:false
});
var chCount = 0;
for(i=0;i<obj.parts.length;i++){
parts = obj.parts[i];
// alert(parts.name);
partPanel = new Ext.Panel({
title: 'Part'+(i+1)+'<input type="part" id="part'+parts.id+'" size="100%" type=text value="'+parts.name+'">' +
'<a href="#" onclick="deletepart(event); return false;"><img align="left" src="imgs/delete_icon.png"/></a>',
id:parts.id,
baseCls:'partcls',
collapsible:true,
type:parts.type,
ttype:'part'
});

bookPanel.add(partPanel);

chapters = parts.chapters;
if(chapters){
for(cc=0;cc<chapters.length;cc++){
chCount = chCount+1;
chid = parts.id+'-'+chapters[cc].id;
chapterPanel = new Ext.Panel({
id:chid,
type:chapters[cc].type,
title: 'Chapter '+chCount+'<input size="100%" type="chapter" ' +
'onclick="this.focus();" partid="'+parts.id+'" chapterid="'+chapters[cc].id+'" type=text value="'+chapters[cc].name+'">' +
'<a href="#" onclick="deletechapter(event); return false;"><img align="left" src="imgs/delete_icon.png"/></a>',
cls:'chapter',
ttype: 'chapter',
collapsible:true
});

partPanel.add(chapterPanel);

topics = chapters[cc].topics;

for(tt=0;tt<topics.length;tt++){
tid = chid+'-'+topics[tt].id;
chapterPanel.add({
xtype:'label',
id:tid,
topictype:topics[tt].type,
// cls:'topicHead topic',
html:'<div class="topic">'+topics[tt].title+'<img align="right" onclick=deletetopic(event); src="imgs/delete_icon.png"/></div>'
});
}
}
}
panel.doLayout();
//To enable drag n drop
enableDragNDropOnBook();
enableDragNDropChptrOnParts();
}
}


Code to enable scrolling while drag-n-drop


var el = Ext.get('_bookpnl'+bookid);

el.ddScrollConfig = {
vthresh: 50,
hthresh: -1,
frequency: 100,
increment: 200
};
Ext.dd.ScrollManager.register(el);


The scroll never works. The book panel is part of a tab.

coolrb
22 Mar 2011, 11:24 PM
ANybody?

ejatin
29 Mar 2011, 11:48 PM
see if this can help

http://www.sencha.com/forum/showthread.php?2029-Nested-complex-multi-tab-layout-and-scrolling

optiplex
30 Mar 2011, 12:26 AM
there have very cool info