Results 1 to 7 of 7

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

  1. #1
    Sencha User arindam.hit's Avatar
    Join Date
    May 2012
    Location
    Hyderabad
    Posts
    99
    Answers
    1
    Vote Rating
    1
      0  

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

    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
    Attached Images Attached Images
    Last edited by arindam.hit; 10 Jul 2012 at 2:39 AM. Reason: image change

  2. Take a look at the Tweet example.

    Here is the css styling they use:
    Code:
    .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:
    Code:
    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

  3. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    9
    Answers
    1
    Vote Rating
    2
      1  

    Default

    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>'

  4. #3
    Sencha User arindam.hit's Avatar
    Join Date
    May 2012
    Location
    Hyderabad
    Posts
    99
    Answers
    1
    Vote Rating
    1
      0  

    Default

    Ok, i will try..

  5. #4
    Sencha User arindam.hit's Avatar
    Join Date
    May 2012
    Location
    Hyderabad
    Posts
    99
    Answers
    1
    Vote Rating
    1
      0  

    Default

    i tried with the below code:

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

  6. #5
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    100
      0  

    Default

    Quote Originally Posted by arindam.hit View Post
    i tried with the below code:

    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.
    Code:
    ...
    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.

  7. #6
    Sencha User
    Join Date
    Apr 2012
    Posts
    9
    Answers
    1
    Vote Rating
    2
      0  

    Default

    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.

  8. #7
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    100
      0  

    Default

    Take a look at the Tweet example.

    Here is the css styling they use:
    Code:
    .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:
    Code:
    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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •