PDA

View Full Version : [CLOSED] NestedList doesn't show up when not set fullscreen



abierbaum
3 Jun 2011, 11:46 AM
I am using a NestedList within another panel. Because of this, I didn't construct the nested list to be fullscreen by default. Surprisingly though, unless it is set to fullscreen it does not load and display the data. I have included an example below.

Am I doing something wrong or is this a bug?



<html>
<head>
<title>Nested List</title>
<link rel="stylesheet" href="deps/sencha_touch/resources/css/sencha-touch.css" type="text/css"/>
<script type="text/javascript" src="deps/sencha_touch/sencha-touch-debug-w-comments.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.setup({
onReady: function() {

var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
items: [{
text: 'Sparkling',
leaf: true
},{
text: 'Still',
leaf: true
}]
},{
text: 'Coffee',
leaf: true
}]
},{
text: 'Fruit',
items: [{
text: 'Bananas',
leaf: true
}]
},{
text: 'Snacks',
items: [{
text: 'Nuts',
leaf: true
},{
text: 'Pretzels',
leaf: true
}]
}]
};
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
var nestedList = new Ext.NestedList({
fullscreen: false, // <=== Change this to true
title: 'Groceries',
displayField: 'text',
store: store
});


var panel = new Ext.Panel({
fullscreen: true,
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'My toolbar'
},
],
items: [nestedList],
});
}
});
</script>
</body>
</html>

rdougan
3 Jun 2011, 2:34 PM
The list actually does appear, the problem is that it is not getting a height so the current height is 0px. You can fix this by either adding fullscreen:true or height: '100%'.

Manu_Fr
6 Sep 2011, 4:15 AM
I have pretty the same problem...

I would like to add a panel and a nestedList in the same viewport but either my nestedList is displayed not my panel (nestedlist fullscreen turn on) or my panel is displayed not my nestedList (nestedlist fullscreen turn off and height set to 100%).

this is an exemple of my code :



Ext.setup({
phoneStartupScreen: 'images/phone_startup.png',
tabletStartupScreen: 'images/tablet_startup.png',
icon: 'icon.png',

onReady : function (){



Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});

var store = new Ext.data.TreeStore({
model: 'ListItem',
proxy: {
type: 'ajax',
url: 'index_PDO.php',
reader: {
type: 'tree',
root: 'items',
}
}
});

var nestedList = new Ext.NestedList({
fullscreen: true,
//height: '100%',
title: 'Items',
scroll: false,
displayField: 'text',
store: store
});

var intro_panel = new Ext.Panel({
html: 'Intro',
style: 'background-color:#FFF000;',
height: 200
});

var viewport = new Ext.Panel({
fullscreen: true,
layout : {
type : 'vbox',
align : 'stretch'
},
scroll: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
title: 'Screen01'
}],
items: [intro_panel,nestedList]
});



}
});



If someone can help me, it will be very nice...

Thank you

Emmanuel

mike.estes
12 Sep 2011, 1:12 PM
@Manu_Fr, you still have the NestedList's fullscreen config set to true. Usually you only want to have your main panel set to fullscreen, setting that config to true causes the component to render directly to the document body immediately. When you have more than one panel rendering fullscreen to the document body you will get unexpected results.

To fix this in the test case your provided, remove the fullscreen and height configs from the NestedList and add flex: 1 instead. You can leave the height setting on the intro_panel.

mike.estes
12 Sep 2011, 1:13 PM
@all, I've officially marked this thread as closed as it does not really involve a framework bug