List with multiple items that contain multiple boxes Sencha Touch 2.3

Question

I have a list in my app that I'm creating with Sencha-Touch 2.3. Imagine a single list item that has multiple pieces of data equally spaced apart horizontally. There can be many list items like this. The size in between the boxes that are in each list item change depending on the device, because their size is a percentage of the devices width. What I described here is what I want to happen.

Right now I'm using an itemTpl with span elements. I gave the span elements a class so that I can reference it in css. The css changes I make to width do not make any difference to these span elements in each list item. The span elements all touch, with no space in between them no matter what I do.

How can I make what I described here happen? I've been searching the internet for an answer for a long time but haven't found anything.

Answer 1

Have you tried looking at the Ext.dataview.DataView with useComponents:true?

You can define a DataItem with a layout of hbox and use multiple sub-components with flex:1 to get a bunch of horizontal boxes with all equal width.

check out the docs here to get a sense of how to implement a DataItem inside of a DataView