PDA

View Full Version : hbox layout wrap?



blackpond
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!

Thanks.

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

holdenmatt
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) {
this.addRow();
}

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

// Get the item after it's created and positioned.
this.doLayout();
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) {
this.addRow();
this.items.last().add(item);
}
}
});

riahut.com
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.

sdruckerfig
12 Aug 2011, 5:35 AM
Try this:



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




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

Ext.getCmp('fooPnl').add({
xtype: 'button',
text: 'A button',
cls: 'wrapper',
width: 100, height: 40
});
Ext.getCmp('fooPnl').doLayout();
}
}
]
}]
});

rndm
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({
width:500px,
height:500px,
items:[App.views.ImageGrid]
});


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
});