PDA

View Full Version : onScroll event for ContentPanel?



FreeGroup
7 Aug 2007, 1:31 AM
Hi,

I want greate an application with Ext and the Open-jACOB Draw2D lib.
Unfortunately I need the current scroll position of the ContentPanel which
is the paint area of the Draw2D. ( http://www.openjacob.org/draw2d.html )

Question: How to register an event handler for the "onScroll" event for the
ContentPanel center1?


var center = new Ext.ContentPanel('center1', {width:100, height:200});
center.on('scroll', function(){alert("dsssssssdd");});
Example = function(){
var layout;
return {
init : function(){
layout = new Ext.BorderLayout(document.body, {
west: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
autoScroll:true,
animate: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
autoScroll:true,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true,
autoScroll:true,
fitToFrame:true
}
});

layout.beginUpdate();
layout.add('south', new Ext.ContentPanel('south', {title: 'South'}));
layout.add('west', new Ext.ContentPanel('autoTabs', {title: 'Auto Tabs'}));
layout.add('center',center);
layout.endUpdate();
layout.on('regionresized', function(){alert("ddd");}, null, {delay:50});
},

};

}();
Ext.EventManager.onDocumentReady(Example.init, Example, true);



greetings

Andreas

Iveco
18 Sep 2007, 8:19 AM
I am also using Draw2D and need this functionality for a fixed toolbar (from Draw2D) which will keep it's position fixed according to current scrolling offset (something like a div with position: fixed).

Thats why I need the "onscroll" event for the ContentPanel, which will run a function in Draw2D to update it's toolbar position.

I also made a borderlayout where a contentpanel is created from a div called "paintarea", I call this contentpanel centerpanel.

When I try to add the event directly in the borderlayout structure:



...beginupdate
mainLayout.add('center', centerPanel = new Ext.ContentPanel('paintarea', {title: 'ABC'}));
centerPanel.on("scroll", function(){alert("test");});
...endupdate


does not work. Also in my onReady() function I tried the way using getters for the contentpanel but the same result:



Layout().getCenterPanel().on()...
or
Ext.get('paintarea').on("scroll", function(){alert("test");});


both don't work.

So how do I register correctly a "scroll" event for a contentpanel?

Thank you very much.

I am using ExtJS 1.1.1

Iveco
21 Sep 2007, 3:36 AM
I did some more tests and I still don't have found any solution.

As I said I am creating a borderlayout, which holds a contentpanel which is made of an html markup called "paintarea".

I am able to add the following events to that div/content panel body.



Ext.get('paintarea').on("click", function(){ alert("Test ok."); });


This is fine and gets me the alert when I click on the center panel div.



Ext.get('paintarea').on("scroll", function(){ alert("Test ok scroll."); });


This won't alert anything even when I scroll the div (style="position:relative;width:3000px;height:3000px;")

So when the click event is fine, should scroll also be fine. Is there maybe any bug in extjs or something like that which pretends from firing this event? Someone may test this with a simple scrollable div center content panel (look at the style I posted)?

I tested this with IE7 and FF2.0 using Ext JS 1.1.1.

Thanks for any hint,

Regards,

Iveco

Animal
21 Sep 2007, 3:41 AM
myContentPanel.resizeEl.on("scroll"...