PDA

View Full Version : Dynamically Loaded Grids In Card Layout Don't Scroll



Tangera
16 Jun 2010, 1:32 PM
I am dynamically loading a number of different grids into a panel with a card layout. The first card always functions perfectly, but when I hit the next button to scroll to the next grid, I suddenly can't scroll. The arrow buttons and mousewheel no longer affect the grid in the panel, even when cells of the grid are highlighted.

The first 'card' in the card layout always continues to work, so I presume it's a problem with the method I wrote to handle navigation, which is shown below:


var navHandler = function(direction){
var layout = CardPanel.getLayout();
var active = layout.activeItem;
var idx = CardPanel.items.findIndexBy(function(o) {
return o == active;
});

var next = idx + direction;
var upperLimit = gridArray.length-1;

if(next <= 0) { next = 0; }
if(next > upperLimit) { next = upperLimit; }

if(next==0)
Ext.getCmp('move-prev').hide();
else
Ext.getCmp('move-prev').show();

if(next==upperLimit)
Ext.getCmp('move-next').hide();
else
Ext.getCmp('move-next').show();

Ext.getCmp('page_num').setText('Page ' + (next + 1));


layout.setActiveItem(next);

};


Is there something more I should be doing here to make sure the grids in the cards that I navigate to have scrolling privilages?

darthwes
16 Jun 2010, 2:36 PM
does your panel have deferredRender defined? You go:



...
layout: 'card',
layoutConfig: {
deferredRender: true
},...


To set it. Could we see some of the panel's code?

Tangera
16 Jun 2010, 5:08 PM
Thank you so much! Setting deferredRender fixed my scrolling problem, and significantly improved loading times. I'm including the code because you asked for it and I am inclined to facilitate your every desire as thanks, but I think my issue is resolved.




var CardPanel =new Ext.Panel({
title: 'Limits Editor',
region: 'center',
layout:'card',
layoutConfig: {
deferredRender: true
},
activeItem: 0,
bbar: [
' ',' ',' ',' ',
{
xtype: 'label',
id: 'page_num',
style: 'border: black, 1px;',
text: 'Page 1'
},
' ',' ',' ',' ',
{
id: 'move-prev',
text: 'Back',
handler: navHandler.createDelegate(this, [-1]),
hidden: true
},

'->',
{
id: 'move-next',
text: 'Next',
handler: navHandler.createDelegate(this, [1])
}
]
});

16 Jun 2010, 6:13 PM
Thank you so much! Setting deferredRender fixed my scrolling problem, and significantly improved loading times. I'm including the code because you asked for it and I am inclined to facilitate your every desire as thanks, but I think my issue is resolved.




var CardPanel =new Ext.Panel({
title: 'Limits Editor',
region: 'center',
layout:'card',
layoutConfig: {
deferredRender: true
},
activeItem: 0,
bbar: [
' ',' ',' ',' ',
{
xtype: 'label',
id: 'page_num',
style: 'border: black, 1px;',
text: 'Page 1'
},
' ',' ',' ',' ',
{
id: 'move-prev',
text: 'Back',
handler: navHandler.createDelegate(this, [-1]),
hidden: true
},

'->',
{
id: 'move-next',
text: 'Next',
handler: navHandler.createDelegate(this, [1])
}
]
});

Why are you doing this? Use a single Toolbar spacer. Check out the API.

Tangera
17 Jun 2010, 5:18 AM
Excuse my possible ignorance, but I believe those are Toolbar spacers, at least in the sense that ' ' is shorthand for {xtype:'tbspacer'}. I'm using so many because I want the Page label to have a certain amount of space around it.

Is there a way to customize the size of the spacer, or a larger option other than '->'? I'm afraid I didn't see those options in the API.

Animal
17 Jun 2010, 5:36 AM
Customize with CSS. That's how they acquire a width.

Tangera
17 Jun 2010, 8:45 AM
Thank you!