Extjs4.1 如何 监听 滚动条

[昵称诚诚]

各位大神，
用extjs4.1，有这样一个问题，我在panel(Ext.panel.Panel)上放一个formPanel(Ext.form.panel)，然后在这个formPanel上要再放20个subformpanel（Ext.form.panel）.
panel的autoScroll属性为true,由于subformpanel太多，不想把它们一次性加载，第一次显示两个，当panel的滚动条到底部时再继续加载剩下的subformpanel，如何实现？
急求！！！

[葫芦八娃]

添加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);
		  }
		}
    }

[昵称诚诚]

谢谢你的热心回答，能不能别随便粘点代码在这里糊弄？？？请提供符合提问都要求的，有质量的回答。

[昵称诚诚]

非常感谢，我已经有点眉目了，虽然目前还是没能正确监听到我想的位置。。。

[miluszhaolu]

二楼的代码是可用的，能够触发滚动的事件。楼主的意思是必须要到底部的时候触发么？

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

[miluszhaolu]

目测楼主是chen cheng。哈哈。

[miluszhaolu]

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

[昵称诚诚]

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

[葫芦八娃]

引用 4 楼 jobschen 的回复:

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

你试过没啊？ 这段代码就是监听滚动条滚动的。 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)
}

[葫芦八娃]

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

[彳卸风]

引用 7 楼 miluszhaolu 的回复:

二楼的代码是可用的，能够触发滚动的事件。楼主的意思是必须要到底部的时候触发么？

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

我明白你把‘,’为什么写在前边。。。