PDA

View Full Version : Getting the index of last visible container



url
4 Apr 2014, 6:32 AM
Hi All,

I have a panel with scroll bar and it's having 10 containers in which only 4 containers are visible (Without scrolling).

I want to get the index of last visible container. (Number of items in container can be 1000 also)

Can anybody suggest me how can i get that index programatically?

scottmartin
4 Apr 2014, 7:09 AM
You might have to clean it up a little, but you get the idea:



Ext.application({
name : 'Fiddle',

launch : function() {


var mainPanel = Ext.create('Ext.container.Container', {
width: 200,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
html: 'Inside Panel1'
},{
xtype: 'panel',
html: 'Inside Panel2'
},{
xtype: 'panel',
html: 'Inside Panel3'
},{
xtype: 'panel',
html: 'Inside Panel4'
},{
xtype: 'panel',
html: 'Inside Panel5',
hidden: true
}],
renderTo: Ext.getBody()
});


var visiblePanels = mainPanel.query('{isVisible()}');
console.log(visiblePanels);

console.log(visiblePanels[visiblePanels.length-1]);

}
});

url
4 Apr 2014, 9:34 PM
Hi scottmartin,

Thanx for your quick response.

My requirement is..

I just modified your piece of code

Ext.application({
name : 'Fiddle',


launch : function() {


var mainPanel = Ext.create('Ext.container.Container', {
width: 200,
height : 300,
autoScroll : true,
items: [{
xtype: 'panel',
html: 'Inside Panel1',
height: 100
},{
xtype: 'panel',
html: 'Inside Panel2',
height: 100
},{
xtype: 'panel',
html: 'Inside Panel3',
height: 100
},{
xtype: 'panel',
html: 'Inside Panel4',
height: 100
},{
xtype: 'panel',
html: 'Inside Panel5',
hidden: true
}],
renderTo: Ext.getBody()
});


var visiblePanels = mainPanel.query('{isVisible()}');
console.log(visiblePanels);


console.log(visiblePanels[visiblePanels.length-1]);

}
});

Now in view first 3 panels are visible. When i scroll down the rest panels would be visible. That is InsidePanel4 content panel.

I want to get the index of 3rd panel. (In the above case).


Please refer to the following screenshot
48581

scottmartin
5 Apr 2014, 10:57 AM
You would have to do something like loop the panel list and check for panel.el.dom.offsetTop <= parent.height or something like that.