PDA

View Full Version : vertical scroller and vbox incompatible?



jep
3 Feb 2012, 11:26 AM
I have the following example code:



Ext.regModel('User', {
fields: [
{name: 'name', type: 'string'},
{name: 'checked', type: 'boolean', defaultValue:false}
]
});

var myStore = new Ext.data.Store({
model: 'User',
data:[
{name:'Joe'},
{name:'Sue'},
{name:'Bob'},
{name:'Jeff'},
{name:'Alice'}
]
});

new Ext.Application({
name: 'app',
launch: function() {
this.viewport = new Ext.Panel({
fullscreen:true,
layout:'fit',
items:{
xtype:'panel',
scroll:{direction:'vertical'},
layout:{type:'vbox', align:'stretch'},
items:[
{
itemId:'label',
html:'test',
style:{backgroundColor:'blue'},
},
{
itemId:'list',
style:{backgroundColor:'yellow'},
scroll:false,
xtype:'list',
store:myStore,
itemTpl:'<div>{name}</div>',
}
]
}
});
}
});


The effect I want is that the app comes up fullscreen, but the elements are autosized and laid out vertically taking up the entire width of the window. And you can scroll vertically in case your device is too small to fit all the elements. I have an extra panel in there to isolate this problem from it being directly on the viewport. I run into the same thing when I have a panel embedded way down inside an app several levels deep.

But this example code fails and I'm just not sure why. It fails in a really weird way, too. What I get is this:

31349

Neither component takes up the full width. And the list takes up the entire initial vertical space, with the bottom offscreen. If you flip the order and put the label after the list, the label is offscreen because the list takes up the entire initial vertical space. It does this both in Chrome 16 and on my iPad.

However, in either case, if you call



app.viewport.down('#label').doComponentLayout();
app.viewport.down('#list').refresh();


it causes them to layout correctly. Still leaves me leery of actually doing that, though.

So, what's actually wrong with this? I couldn't find anything in the docs saying scrolling shouldn't be used with vbox.

I notice if I change the app to have an extra panel like this



new Ext.Application({
name: 'app',
launch: function() {
this.viewport = new Ext.Panel({
fullscreen:true,
layout:'fit',
items:{
xtype:'panel',
layout:'fit',
scroll:{direction:'vertical'},
items:{
xtype:'panel',
layout:{type:'vbox', align:'stretch'},
items:[
{
itemId:'label',
html:'test',
style:{backgroundColor:'blue'},
},
{
itemId:'list',
style:{backgroundColor:'yellow'},
scroll:false,
xtype:'list',
store:myStore,
itemTpl:'<div>{name}</div>',
}
]
}
}
});
}
});


it works fine. It seems to only fail when I have the scroll element and the vbox layout on the same panel. If I nest them, it works. But why? Is it a bug in Sencha or some kind of rule about how you're supposed to put applications together?

jep
3 Feb 2012, 12:43 PM
Ugh. Now I find even with my "fixed" version, I can get a problem if my list has a lot of items. Like:



var myStore = new Ext.data.Store({
model: 'User',
data:[
{name:'One'},
{name:'Two'},
{name:'Three'},
{name:'Four'},
{name:'Five'},
{name:'Six'},
{name:'Seven'},
{name:'Eight'},
{name:'Nine'},
{name:'Ten'},
{name:'Eleven'},
{name:'Twelve'},
{name:'Thirteen'},
{name:'Fourteen'}
]
});


Basically, enough Items that they run off the screen. I think List <i>really</i> doesn't like scroll:false being set. And I haven't been able to figure out any trick to fix that problem. But that's why I need in my app...


Update:
Actually, scroll:false isn't the only problem. This results in a layout where you can never see label2:



Ext.regModel('User', {
fields: [
{name: 'name', type: 'string'},
{name: 'checked', type: 'boolean', defaultValue:false}
]
});

var myStore = new Ext.data.Store({
model: 'User',
data:[
{name:'One'},
{name:'Two'},
{name:'Three'},
{name:'Four'},
{name:'Five'},
{name:'Six'},
{name:'Seven'},
{name:'Eight'},
{name:'Nine'},
{name:'Ten'},
{name:'Eleven'},
{name:'Twelve'},
{name:'Thirteen'},
{name:'Fourteen'}
]
});

new Ext.Application({
name: 'app',
launch: function() {
this.viewport = new Ext.Panel({
fullscreen:true,
layout:'fit',
items:{
xtype:'panel',
layout:'fit',
scroll:{direction:'vertical'},
items:{
xtype:'panel',
layout:{type:'vbox', align:'stretch'},
items:[
{
itemId:'label',
html:'top label',
style:{backgroundColor:'blue'},
},
{
itemId:'list',
style:{backgroundColor:'yellow'},
xtype:'list',
store:myStore,
itemTpl:'<div>{name}</div>',
},
{
itemId:'label2',
html:'bottom label',
style:{backgroundColor:'blue'}
},
]
}
}
});
}
});