PDA

View Full Version : listview, panel, and autoHeight



epalm
5 Apr 2010, 11:07 AM
I have a Panel containing a ListView. I'm rendering the Panel to a div. Both the Panel and the ListView have autoHeight: true. After being rendered to the div, I populate the ListView with a few items. Although I can see the items in the DOM via FireBug, they don't appear in the ListView (see attached screenshot). If I set the ListView to height: 200, it everything displays as expected.

The point is I don't want to have to specify fixed heights. I want the ListView/Panel to be as tall as necessary to display all items in the ListView, and use the browser to scroll. What am I doing wrong?

Thanks!



<html>
<head>
<title>GateKeeper</title>
<script type="text/javascript">

Ext.onReady(function() {

var panel = new Ext.Panel({
renderTo: 'div_groupList',
layout: 'fit',
autoHeight: true,
frame: true,
items: {
xtype: 'listview',
autoHeight: true,
singleSelect: true,
style: 'background-color: #FFFFFF;',
columns: [
{ header: 'Name', dataIndex: 'name' }
],
store: {
xtype: 'jsonstore',
autoLoad: true,
proxy: new Ext.data.HttpProxy({
method: "GET",
url: 'groups/listGroups.html'
}),
root: 'data',
fields: [
'id',
'name'
],
sortInfo: {
field: 'name',
direction: 'ASC'
}
}
}
});

});

</script>
</head>
<body>
<div id="div_groupList">
</div>
</body>
</html>


Edit: Vastly simplified my example code

CrazyEnigma
5 Apr 2010, 12:33 PM
The object you are extending will call constructor first, and the following two, items are redundant. Or at least the second call is.

If config is null, then set config to an empty object. Apply nothing if config is an empty object.



constructor: function(config) {

config = config || {};

Ext.applyIf(config, {
});

GK.listpanel.ListPanelBaseCls.superclass.constructor.call(this, config);
},

I believe:


layout: 'fit',

is static. You may want to specify the layout within your constructor.


Ext.apply(this, config, {layout: 'fit'});


If you want to enforce layout, then:


Ext.apply(this, {layout: 'fit'});

epalm
5 Apr 2010, 2:47 PM
Thanks CrazyEnigma.

I've simplified my example code. I can't seem to put a ListView into a Panel and have them autoHeight to the height of the ListView after it's been populated with items.

epalm
7 Apr 2010, 5:20 AM
I still can't figure this out. It seems like such a simple problem. I've simplified the code in the original post, and would really appreciate some guidance! What am I missing here?

CrazyEnigma
9 Apr 2010, 9:22 AM
Hunh, did you modify the original post, because the thread has no coherence now.

epalm
9 Apr 2010, 9:23 AM
Yes, I simplified the code in the original post. We're no longer dealing with any inheritance, just that little block of runnable code.