View Full Version : hbox layout wrap?

2 May 2011, 10:17 AM
New to Sencha Touch and loving it!

Is it possible to configure hbox layout in such a way that items wrap to a new line when they reach the far right side of the container? In other words, the items would be floated left into the container. This would in a sense create a grid of items.

Or a better way of doing it would also be helpful!


27 May 2011, 5:53 PM
I'd also like to know how to do this, if anyone has a suggestion.

28 May 2011, 12:40 PM
Ok, I whipped up a solution that's working great for my needs.
Comments/suggestions welcome.

* @class App.views.WrappingPanel
* @extends Ext.Panel
* Adds wrapping behavior to a Panel: items are added to an hbox
* subpanel until it overflows, causing a new hbox row to be created
* for additional items.
App.views.WrappingPanel = Ext.extend(Ext.Panel, {

* What's the minimum padding (in pixels) to allow on the right
* of an item before wrapping it to a new row?
minRightPadding: 5,

// We'll stack hbox rows in a vbox that fills the horizontal space.
layout: {
type: "vbox",
align: "stretch"

* @private
* Add another hbox as the next row of items.
addRow: function() {
this.add(new Ext.Panel({
layout: "hbox"

* Add another item: put it in the last row if possible without overflow,
* otherwise create a new row for it.
addItem: function(item) {

// Add the first row, if needed.
if (this.items.getCount() == 0) {

// Try adding the new item to the last row.
var lastRow = this.items.last();

// Get the item after it's created and positioned.
item = lastRow.items.last();

// Compute the left/right edge position, relative to the container.
var left = item.el.dom.offsetLeft,
right = left + item.el.dom.offsetWidth;

// If not enough padding on right (overflow!), add a new row.
var rightPadding = item.container.getWidth() - right;
if (rightPadding < this.minRightPadding) {

8 Aug 2011, 12:21 PM
Not readlly working for me:

item.el is undefined,

just doesn't exist in that instance of Ext.Panel
Unless this is some kind of race condition, when el is not yet created.

12 Aug 2011, 5:35 AM
Try this:

<style type="text/css">
.wrapper {
text-wrap: normal;
float: left;

var fooPnl = new Ext.Panel({
id: 'fooPnl',
items: [],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
text: 'Insert Button',
handler: function() {

xtype: 'button',
text: 'A button',
cls: 'wrapper',
width: 100, height: 40

10 Feb 2012, 6:32 PM
Sorry, I'm new to Sencha Touch. How would I use your App.views.WrappingPanel class? Thanks so much for any help. I'm trying:

App.views.ImageContainer = new Ext.Panel({

App.views.ImageGrid = new App.views.WrappingPanel({
items: [App.data.Images] //This is a 10x10 array of 100 images, each 50x50 pixels, so they will fit 10 per line