In setting up the test case, I noticed the text field doesn't look right - not sure if that is a separate issue or if I'm missing a new config option in 2.1.0 RC2
Steps to reproduce the problem:
Add a list to a vbox panel and set the list's 'scrollable' config option to false
The result that was expected:
The list should not be scrollable and the list's height should be the height of all list items.
The result that occurs instead:
The list is scrollable and the list takes up the remainder of the vbox panel.
The first attachment is the expected result and was obtained with ST 2.0.1
The second attachment shows the result with ST 2.1.0 RC2. The list is too tall and is scrollable (and the scrollbar doesn't seem to be styled correctly at the bottom - it is flat instead of rounded)
Debugging already done:
Tested in Sencha Touch 2.0.1 and it works as expected - the "flex: 1" must be removed from the list config in the example provided. Removing "flex: 1" with 2.1.0 RC2 results in the list disappearing completely (height == 0).
Thank you for trying to get this in front of the sencha team! I also have experienced this issue and from the old posts it looks like people have tried to bring this up but without success.
Tested in Sencha Touch 2.0.1 and it works as expected - the "flex: 1" must be removed from the list config in the example provided. Removing "flex: 1" with 2.1.0 RC2 results in the list disappearing completely (height == 0).
I believe that setting "flex:1" is why the list fills up the space. But as you mentioned otherwise the list is invisible because of a height of 0. In the past there was not a flex set and the height would automatically fit all the items.
This is a bi-product of the infinite list as it needs a height and since it won't possibly render all rows it needs to be scrollable to be able to detect when it needs to render the new rows.
Mitchell Simoens @LikelyMitch Modus Create, Senior Frontend Engineer
________________
Need any sort of Ext JS help? Modus Create is here to help!
It breaks a very basic behavior in lists, which are very basic and highly used components.
The result, as I already wrote in the Q&A forum, is that lists can't be nested in a scrollable vbox layout parent panels without the use of flex or fixed height.
I'd expect the Sencha team to put this bug in a very high position in the bug list for the final release of 2.1.0.
A temporary workaround would be appreciated too.
I can handle myself pretty well with javascript, but fixing complex CSS-related issues in not as easy.
@mitchellsimoens thank you for the clarification about the changes that come along with infinite list.
I will include my vote that if it is possible to "enable/disable" the infinite list, so that it can be used as a component with other items that would be a big perk over resorting to dataview for everything.
In any event I encourage you to make this clear in the documentation when 2.1 is released.
These forums are very helpful when we hear from @mitchellsimoens and his team members. Thank You!
Mitchell,
I saw your post in the Lists are always scrollable thread, and it sounds like Sencha's position is that the infinite list feature breaks the "scrollable: false" behavior and it is up to developers to manually set the height and style the items in a generic DataView to get the old unscrollable list behavior.
We have some use cases where we would like to display all items in a list (within a scrollable parent container) and the number of items would never be large enough to affect performance.
It would be convenient if there was a way to turn off the infinite list feature (perhaps simply with "scrollable: false"). Is that something Sencha might consider? I ask because I am working on a migration plan from Touch 2.0.1 to 2.1 and it would be good to know whether we need to build new custom controls.