PDA

View Full Version : List in fieldset



clewinton
30 Jul 2013, 1:35 AM
Hello,

This problem has been driving me crazy and I hope someone will be able to help me out!

I have a field set which has 4 sections which have lists within them, in Sencha Touch 2.0 setting these lists to scrolling:false, height:'auto' worked fine and on loading the stores behind the lists they would take up all the needed space within page.

Since I have upgraded to Sencha Touch 2.2 this no longer works, I have been reading various other posts about using flex:1 and setting the layout:'vbox' on the container, but nothing seem to work. I am always left with nothing where the list should be.

So far the best approach I have found is to manually set the height of the list once the store is loaded based on the number of records. This works fine on some devices as the list content does not wrap, however on some smaller screen devices the list content wraps (on some rows) so the row height is varied which means a simple countAll() * rowHeight does not work.

Any ideas on how I can solve this?

For reference an example of a field set see below, this is within a container which has 1 panel which is a vbox:



{
xtype: 'fieldset',
title: 'Addresses',
width: '95%',
items:
[
{
height: 'auto',
scrollable: false,
xtype: 'Addresses:ost'
}
]
}


Many Thanks

Charles

fmoseley
1 Aug 2013, 5:52 PM
I was able to get this list to display in a fieldset using flex, and layouts. If you modify it to make it more like your actual layout I'll take a look at it.
50

clewinton
2 Aug 2013, 2:24 AM
Hello,

Your example works if I just have lists, however in my page I have some more static data first and then some lists. I have mocked up this example:




Ext.require('*');


Ext.setup({
onReady: function() {
Ext.create('Ext.form.Panel', {
fullscreen: true,
layout: 'vbox',
items: [{
xtype: 'fieldset',
title: 'Details',
width: '95%',
defaults: {
labelAlign: 'left',
labelWidth: '40%',
readOnly: true
},
items: [{
xtype: 'textfield',
label: 'Test'
}, {
xtype: 'textfield',
label: 'Test'
}, {
xtype: 'textfield',
label: 'Test'
}, {
xtype: 'textfield',
label: 'Test'
}]
}, {
xtype: 'fieldset',
title: 'Details',
width: '95%',
defaults: {
labelAlign: 'left',
labelWidth: '40%',
readOnly: true
},
items: [{
xtype: 'textfield',
label: 'Test'
}, {
xtype: 'textfield',
label: 'Test'
}, {
xtype: 'textfield',
label: 'Test'
}, {
xtype: 'textfield',
label: 'Test'
}, {
xtype: 'textfield',
label: 'Test'
}, {
xtype: 'textfield',
label: 'Test'
}, {
xtype: 'textfield',
label: 'Test'
}, {
xtype: 'textfield',
label: 'Test'
}]
}, {
xtype: 'fieldset',
title: 'Details',
width: '95%',
defaults: {
labelAlign: 'left',
labelWidth: '40%',
readOnly: true
},
items: [{
xtype: 'textfield',
label: 'Test'
}, {
xtype: 'textfield',
label: 'Test'
}, {
xtype: 'textfield',
label: 'Test'
}, {
xtype: 'textfield',
label: 'Test'
}, {
xtype: 'textfield',
label: 'Test'
}, {
xtype: 'textfield',
label: 'Test'
}, {
xtype: 'textfield',
label: 'Test'
}]
}, {
xtype: 'fieldset',
title: 'About You',
instructions: 'Tell us all about yourself',
flex: 1,
layout: 'fit',
items: [{
xtype: 'list',
itemTpl: '{title}',
data: [{
title: 'Item 1'
}, {
title: 'Item 2'
}, {
title: 'Item 3'
}, {
title: 'Item 4'
}]


}


]
}, {
xtype: 'fieldset',
title: 'About You',
instructions: 'Tell us all about yourself',
flex: 1,
layout: 'fit',
items: [{
xtype: 'list',
itemTpl: '{title}',
data: [{
title: 'Item 1'
}, {
title: 'Item 2'
}, {
title: 'Item 3'
}, {
title: 'Item 4'
}]


}


]
}]
});
}
});
// or replace all text with a URL



Any idea how I can fix this layout? If I use flex in all field sets it shows the lists but of course the static ones at the top are too short?

Thanks

Charles

clewinton
2 Aug 2013, 2:31 AM
I have been playing more and I suspect it has something to do with if the list is visible on the page render, as it always fails when it falls below the visible area?

jerome76
2 Aug 2013, 10:26 AM
If you add a height to your lists then it shows up fine.
https://fiddle.sencha.com/#fiddle/56

clewinton
2 Aug 2013, 10:29 AM
Hello,

Yes of course, but as explained I load the lists from a DB so I have no idea how many items will be in them. Having lists scrolling within a scrolling page is very difficult for the user so I want the list to grow to fit all the items loaded in the store (as it did in v2.0).

Thanks

Charles

jerome76
2 Aug 2013, 10:55 AM
The scrolling is fine if the user actually scrolls inside the list itself. By adding that directionLock to the list, it prevents the FormPanel from scrolling. I honestly think it would be better for the list to have a static height as then the user wouldn't have to scroll up and down as much to fill out the form. It also seems to not render the list height when it is in the viewable area, so I think it has something to do with your layouts.

clewinton
2 Aug 2013, 11:04 AM
We run this on a iPhone so the user has to scroll down to get to the lists, when the user then finds that scrolling now scrolls the list not the page it's a terrible user experience. Also getting past the first list to the next one is very hard for the user as they must fully scroll the first list, then down the page.

What I don't understand is this worked perfectly before, it seems that v2.2 has made things much worse. If you search around on the Internet for this issue it seems quite common.

Thanks

Chales

Perdiga
10 Mar 2014, 6:45 AM
i am with the same problem here ... any solutions?

https://fiddle.sencha.com/#fiddle/45l

jerome76
10 Mar 2014, 12:22 PM
i am with the same problem here ... any solutions?

https://fiddle.sencha.com/#fiddle/45l

What is it you are trying to achieve?

Edit: I saw your other post.

fmoseley
10 Mar 2014, 2:53 PM
Yes that is tricky as list no longer auto size and require some sizing either on the list or parent container. Do you need the functionality of a list or can you use a dataview as I have done in the following example.
https://fiddle.sencha.com/#fiddle/461

Perdiga
11 Mar 2014, 3:34 AM
tks fmoseley (http://www.sencha.com/forum/member.php?332086-fmoseley)