PDA

View Full Version : Panel not scrolling



simondoherty
1 Aug 2011, 5:18 AM
As part of an app being developed in Sencha Touch, my colleague and I have encountered a similar bug to the one discussed here: http://www.sencha.com/forum/showthread.php?128265-Scroller-not-long-enough-after-AJAX-images-load

We're loading data from a JSON file and parsing it to load content into a panel, named photo panel. This panel is a card in a tab panel (main tab panel). The tab panel itself is defined as being a card in a card layout on a root panel.

Under certain conditions, the photo panel content does not scroll beyond the size of the viewport. Through some testing we have found at least one condition that will cause this bug to occur.

If the photo panel is displayed in the main tab panel before changing the active item on the root panel, it will work correctly. If another card is displayed in the root panel before switching to the photo card on the main tab panel, then the bug occurs and it does not scroll.

This bug also applies to other cards in the root panel card layout.

We have tried following various suggestions on the forums, such as changing the layout properties of the cards but to no avail.

Using PhoneGap 0.96 and Sencha Touch 1.0.3

mitchellsimoens
1 Aug 2011, 7:15 AM
Does this problem persist if you try Sencha Touch 1.1.0?

simondoherty
1 Aug 2011, 7:37 AM
Hi Mitchell,

thanks for getting back to me. We have just tried it with the newer 1.1.0 build of Sencha Touch, and yes, the problem still persists.

Simon.

mitchellsimoens
1 Aug 2011, 7:40 AM
Ok, and it's on the Panel where you update the contents with some HTML? Will create a test case to see.

mitchellsimoens
1 Aug 2011, 7:45 AM
Made this teset case but couldn't see anything wrong with scrolling:


var panel = new Ext.Panel({
fullscreen : true,
scroll : 'vertical'
});

setTimeout(function() {
console.log('Update');
panel.update('<p>Beginning</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>End</p>');
}, 2000);

Maybe you can provide a better test case?

simondoherty
1 Aug 2011, 7:47 AM
Hi Mitchell,

that's correct. We have a panel in a tab panel with a docked hbox panel at the top. The html content of this panel is being altered after successfully reading a JSON file. By the time the switching between cards occurs, this has not always completed due to the size of the JSON file being read. We are attempting to negotiate with the client we're building the app for to reduce the waste in the file.

Could the delay in completing the html content somehow be affecting the scrolling when switching the card layouts the tab panel is located on?

Simon.

mitchellsimoens
1 Aug 2011, 7:51 AM
Hi Mitchell,

that's correct. We have a panel in a tab panel with a docked hbox panel at the top. The html content of this panel is being altered after successfully reading a JSON file. By the time the switching between cards occurs, this has not always completed due to the size of the JSON file being read. We are attempting to negotiate with the client we're building the app for to reduce the waste in the file.

Could the delay in completing the html content somehow be affecting the scrolling when switching the card layouts the tab panel is located on?

Simon.

Most clients don't understand that mobile developing is fragile when it comes to performance. What you could do on a desktop computer, you can't always do in a mobile environment. Being a Solutions Engineer, I have been in your shoes too many times :) Only send what is needed, user experience trumps server strain.

As for the delay, it could. Not 100% if the scroller remains active when a component is hidden. Have you tried waiting for the update to complete before switching? Not saying this what you should do in production but it could help debug.

simondoherty
1 Aug 2011, 8:08 AM
*looks amused*

At the moment, the JSON file content is being given to us by the client. We're hoping it can be reduced :)

We display a loading mask / spinner to the user if they switch to the photo card and it's not finished loading. Not the best method perhaps, but better than displaying no content.

My colleague has discovered something more specific about the bug. Switching to another card in the tab panel before moving to another card in the root panel (hiding the tab panel) does NOT cause the issue with scrolling.

mitchellsimoens
1 Aug 2011, 8:10 AM
Ok.. shot in the dark :D

Do you have a test case that I could see?

simondoherty
1 Aug 2011, 8:38 AM
2724427245

This is an example app I just put together. I've stripped out the URLs from the photos as I'm not allowed to share the identity of whom the client we're making the app for.

mitchellsimoens
1 Aug 2011, 8:47 AM
Wow, a 1500 line JSON file you are parsing... that will eat up a lot of performance. Plus you have two for loops that have to go through it all. Have you thought about using a DataView instead of doing it all by hand?

simondoherty
2 Aug 2011, 12:13 AM
The first for-loop is to identify the single attribute in the object. This is also why we have so far been unable to use a store / dataview combination; a store is expecting an array in the JSON file, not a single object with a single attribute.

A lot of our problems stem from the JSON file and the way it is currently being formatted for us.

Does the store load the entire file into memory or does it only query it for data as requested? Also, how efficient is the dataview in comparison to what we're already doing manually? Our app is already quite complicated with multiple cards in the tab panel, the cards to emulate full screen views, etc.

The test app I sent you does demonstrate the bug; switching between the cards and then the tab panels breaks the scrolling on the cards in the tab panel unless a different card is activated first in the tab panel.

We have tried manually setting the active card in the tab panel to something different and then back again but it then fires unwanted events from other parts of the app.

simondoherty
16 Aug 2011, 5:09 AM
Is anything being done about this bug?

knappe
12 Nov 2011, 10:56 PM
I'm seeing this exact behavior when attempting to use an afterrender listener to build some form elements, modifying the dataview. Did anyone have a solution to this problem?

Navarr
15 Nov 2011, 9:30 AM
I'm having a different scrolling problem.

Using the following code:



.list-scroll { height: 80px; display: block; }



.box { width: 200px; height: 70px; display: inline-block; border: 1px solid black; margin: 5px; }



.article-box { height: 75px; padding: 5px; border: 1px solid black; display: inline-block; margin: 0 5px 0 5px; min-width: 150px; }



.cat-name { padding: 5px; margin: 5px 0 0 5px; display: inline-block; background-color: black; color: #DDDDDD; height: 30px; line-height: 30px; }



.cat-triangle { content: '', height: 0; display: inline-block; position: relative; width: 0; border: 15px solid transparent; border-color: transparent transparent black black; }




new Ext.Application({
name: 'BGSU News', launch: function() { list = new Ext.Container({ layout: { type: 'vbox', align: 'stretch', }, scroll: 'vertical' }); viewport = this.viewport = new Ext.Panel({ fullscreen: true, layout: 'card' }); viewport.list = list; viewport.setActiveItem(list); for(var a = 0;a < 10;++a) { var cat = new Ext.Container({ layout: 'hbox', scroll: 'horizontal', height: 75 }); list.add(list.items.length,new Ext.Container({ layout: { type: 'vbox', align: 'stretch' }, items: [{html: '<div class="cat-name">Category #' + (a + 1) + '</div><div class="cat-triangle"></div>' }, cat] })); for(var i = 0;i < 21;++i) cat.insert(cat.items.length,{ html: '<div class="article-box">Article ' + (i + 1) + '</div>' }); } list.doLayout(); } });

If you scroll to the end of a category horizontally, then scroll vertically, it will no longer allow you to scroll horizontally in that category anymore.

knappe
17 Nov 2011, 8:33 AM
I'm seeing this exact behavior when attempting to use an afterrender listener to build some form elements, modifying the dataview. Did anyone have a solution to this problem?

Applying a layout to the containing panel of 'fit' resolved the layout issues I was seeing.