Sencha touch 2 The list inside the panel cannot be seen
I have list
in fieldset
, but it will not show. How can I display it. I can fit the height, but it makes a scrollable border, which is not very nice.
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
config: {
layout: {
type: 'fit'
},
items: [
{
xtype: 'formpanel',
items: [
{
xtype: 'fieldset',
title: 'Date',
items: [
{
xtype: 'datepickerfield',
label: 'Date',
placeHolder: 'dd/mm/yyyy',
dateFormat: 'd/n/Y',
picker: {
yearFrom: 2013
}
}
]
},
{
xtype: 'fieldset',
layout: {
type: 'fit'
},
title: 'Available times:',
items: [
{
xtype: 'list',
store: {
fields: ['name','id'],
data: [
{name: '10:15',id:1},
{name: '13:15',id:2},
{name: '17:35',id:3},
]
},
itemTpl: [
'<div>{name}</div>'
]
}
]
}
]
}
]
}
});
source to share
Try adding height: 'auto'
and scrollable: false
the list
Demo: http://www.senchafiddle.com/#yyCVE#GNEuj#1aEQr#9eCak#oi6dM
source to share
I think my requirements are similar. Show the complete contents of two lists, each inside a fieldset, which is inside another top-level container (which is added to the Viewport). I wanted the top-level container to handle scrolling, and lists not scrolling at all.
I struggled with this for a long time (ST 2.4.1) before accepting the fact that the height of the list is not automatically calculated, so this approach needs to be manually set to this mode. Fetching an event refresh
from the store and a listener refresh
into a list that manually sets the height of the list is a neat solution.
Here's a Sencha Fiddle demo: https://fiddle.sencha.com/#fiddle/g1n
And the demo code itself:
Ext.Viewport.add({
xtype: 'container',
// Using 'vbox' here will break the lists since that
// is a proportional layout...
layout: 'default',
scrollable: true,
fullscreen: true,
items: [{
xtype: 'titlebar',
docked: 'top',
title: 'Titlebar'
}, {
xtype: 'fieldset',
title: 'List A',
layout: 'fit',
items: [{
xtype: 'list',
itemId: 'lista',
// This is the default row height - don't use
// magic numbers in shipping code...
height: 42,
scrollable: false,
itemTpl: '{message}',
store: {
fields: ['message'],
listeners: {
addrecords: function(store) {
store.fireEvent('refresh', store);
}
}
},
// Reset the list height when the underlying data
// store triggers a 'refresh' event...
listeners: {
refresh: function(list) {
list.setHeight(list.getItemHeight() *
list.container.getInnerItems().length);
}
}
}]
}, {
xtype: 'fieldset',
title: 'List B',
layout: 'fit',
items: [{
xtype: 'list',
itemId: 'listb',
// This is the default row height - don't use
// magic numbers in shipping code...
height: 42,
scrollable: false,
itemTpl: '{message}',
store: {
fields: ['message'],
listeners: {
addrecords: function(store) {
store.fireEvent('refresh', store);
}
}
},
// Reset the list height when the underlying data
// store triggers a 'refresh' event...
listeners: {
refresh: function(list) {
list.setHeight(list.getItemHeight() *
list.container.getInnerItems().length);
}
}
}]
}]
});
// Add a bunch of items to the lists...
Ext.ComponentQuery.query('list').forEach(function(list) {
for(var i = 2; i < 20; i++) {
list.getStore().add({message: 'line ' + i});
}
});
source to share