Extjs4.1 如何 监听 滚动条

Question

本帖最后由 jobschen 于 2013-04-11 17:11:58 编辑

Answer 1

添加Panel scroll监听事件,support extended javascript 2.0以上,例子是4.0的。{
        title: 'Framed panel: Width 280/Height 180',
        html: html,
        collapsible: true,
        frame: true,
        autoScroll: true,
        width: 280,
        height: 180,
listeners: {
  render: function(p){
p.body.on('scroll', function(){
  // do stuff
  alert(1)
}, p);
  }
}
    }

Answer 2

好吧，我承认，这段代码的确是很久以前从国外的ext论坛上查到的，接下来的代码希望有人会帮你写，我不糊弄任何人，真的，祝你好运。

Answer 3

thanks,这个我也google过，只是这个与我想要的差太远了，我想要监听某一个panel的滚动条，但extjs的api里并没有这个监听事件，自己想了好久也没想出怎么实现，继续请教中

Answer 4

你试过没啊？ 这段代码就是监听滚动条滚动的。
API里有，你没仔细查，提示你下，Ext.Element. 
---do stuff---部分监听滚动条是否拉倒底部，你参考下面的代码吧？至于你的那些加panel的要求自己去看example，免得又说别人乱贴代码糊弄你.var d = p.body.dom;
if(d.scrollTop == d.scrollHeight - d.offsetHeight){
alert(d.scrollTop+'\t'+d.scrollHeight+'\t'+ d.offsetHeight)
}

Answer 5

二楼的代码是可用的，能够触发滚动的事件。楼主的意思是必须要到底部的时候触发么？Ext.define('mvcDemo.view.makerChecker.userDetailPanel',{
extend:'EpssCommonPanel'
   ,alias:"widget.mckuserdetailpanel"
   ,region:'center'
   ,layout:{type:'vbox',align:'stretch'}
   ,overflowY:'auto'
   ,bodyStyle :{backgroundColor:'#FFFFFF'}
   ,defaults:{anchor:'-16'}
   ,margin:0
   ,height:500
   ,bodyPadding:5
   ,dockedItems: [{xtype:'mcktoolbar',titleText:"Demo > makerCheckerMaintenance"}]
   ,items:[
{xtype: 'mckuserdetail'},
{xtype: 'mckproductgrid'},
{xtype: 'mckbuttonbar'}
]
,listeners: {
  render: function(component){
   component.body.on('scroll', function(e){
console.log("scroll");
//component.add({xtype: 'mckbuttonbar'});
var d=component.body.dom;
if(d.scrollTop === d.scrollTopMax){
alert("scroll to end")
}
   },this,{buffer :100}); 
   }
    } 
});

Answer 6

目测楼主是chen cheng。哈哈。

Answer 7

Panel里面加控件例子： if(mainContainer){//panel
Ext.suspendLayouts(); 
//batch of updates 
mainContainer.removeAll();//移除所有原有的控件
mainContainer.setBodyStyle('padding', '5px');
mainContainer.add({xtype: 'mcksearchform',margin:0,region:'north'});
mainContainer.add({xtype: 'mckusergrid',margin:0,region:'north'});
mainContainer.add({xtype: 'mckuserdetailpanel',margin:0,region:'center'});
Ext.resumeLayouts(true);
};