PDA

View Full Version : Help a newb: Scrolling wide horizontal content



orangechicken
24 Jun 2010, 2:29 PM
I'm brand new to Sencha/Ext and the Getting Started tutorial is not beginner enough, especially regarding the layout system.

I have Ext.setup() with fullscreen:true and an onReady function. The onReady adds a panel with layout of hbox, scroll of 'horizontal' and a bunch of images for items. I then call doLayout() on the panel since I'm adding the items programmatically.

However, nothing renders with that setup... Nothing is added to the DOM at all.

If I add another container - I've used an Ext.Container - with fullscreen:true (again) and the panel of images as its sole item, then the list renders.

Unfortunately, while scrolling appears to "work", the images are clipped to the width of the viewport.

So, questions:

1. Why doesn't it render without an additional 'fullscreen' container? (I already told Ext.setup to be fullscreen, after all)
2. Why are the images clipped? I assume it's because the container, being fullscreen, sets the width to the viewport's width. How do I have the container be that wide, but not chop off the content of its contents?

orangechicken
24 Jun 2010, 2:31 PM
Strangely, it appears to be related to the width of the images. I wasn't setting the width explicitly. Adding "width:256,height:256" to the list.add() call for each image solves Question #2. That raises a new question: How can this be done dynamically? (BTW, setting autoWidth:true and autoHeight:true results in images that are 18px high and the correct width *but* clipped to the viewport width).

orangechicken
24 Jun 2010, 2:35 PM
Also, explicitly setting the width and height on the html for the images fixes it.