1. #1
    Sencha User arindam.hit's Avatar
    Join Date
    May 2012
    Location
    Hyderabad
    Posts
    99
    Answers
    1
    Vote Rating
    1
    arindam.hit is on a distinguished road

      0  

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

    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
    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
    pksiv is on a distinguished road

      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
    arindam.hit is on a distinguished road

      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
    arindam.hit is on a distinguished road

      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
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      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
    pksiv is on a distinguished road

      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
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      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

Thread Participants: 2

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."