How to make a list with multiple column in each row in Sencha touch?

[arindam.hit]

I want a list with multiple columns in each row. The row also can consist the image. I am able to get the values from store. But unable to display them in a proper way. i need the view something like below: textimage.PNG

[pksiv]

You can do this all with the itemTpl and proper html/css styling.

For example:

itemTpl : '<div style="font-size: 0.9">{fileName}</div><div style="font-size: 0.8em">{someOtherInfo}<br/></div><div style="font-size: 0.7em">{yetMoreInfoOnA3rdLineEvenSmaller}</div>'

[arindam.hit]

Ok, i will try..

[arindam.hit]

i tried with the below code:

itemTpl:  Ext.create('Ext.XTemplate',                                        			'<div style="font-size: 1">{firstName}</div><div style="font-size: 1">{lastName}<br/></div><div style="font-size: 1">{heading}</div>'
        											)

But it is showing on after another vertically..

[jerome76]

i tried with the below code:

itemTpl:  Ext.create('Ext.XTemplate',  ...)

But it is showing on after another vertically..

You shouldn't need all those divs if they are producing the same style.

...
itemTpl:  new Ext.XTemplate(
'<div style="font-size: 1">{firstName}<br />{lastName}<br/>{heading}</div>'
)
...

And what do you mean it is showing on[e] after another vertically?
You are adding in <br /> which creates a line break in the html so they would be on separate lines.

I'd like to see an image of what it is producing for you.

[pksiv]

Styling is not my strong suit but I know you can format anything you want in the list. That line was taken directly from my code with just the field names changed. Try it with a very simple List first and work up to the one with the images.

[jerome76]

Take a look at the Tweet example.

Here is the css styling they use:

.tweet-wrapper {
  h2 { font-weight: bold; padding-bottom: 3px; }
  img { border-radius: 5px; float: left; }
  .tweet {
    font-size: 70%;
    margin-left: 60px;
    min-height: 50px;
   }
}

Here is how they use it in the itemTpl:

itemTpl: Ext.create(
    'Ext.XTemplate',
    '<div class="tweet-wrapper">',
    '   <img src="{profile_image_url}" />',
    '   <div class="tweet">',
    '       <h2>{from_user}</h2>',
    '       <p>{text}</p>',
    '   </div>',
    '</div>',

Hope this helps. It did for me