CODEWITHSUNDEEP
javascriptlistsencha-touchextjs
Xtian
Xtian

Reputation: 3587

Sencha Touch - Creating a List - Want to add a class to the last item

I have a list I am creating like so:

        var listTpl = new Ext.XTemplate(
        '<div class="menuListItemContainer">',
            '<h1>MENU</h1>',
            '<tpl for=".">',
                    '<div class="menuListItem">',
                        '{title}',
                    '</div>',
            '</tpl>',
        '</div>',
        '<div class="x-clear"></div>'
    );

I have a Json file where the {title} is coming from, what i'd like to do but not sure how is the last item in the last I would like to attach a class for styling purposes.

Any ideas?

Upvotes: 0

Views: 1637

Answers (3)

Rudra
Rudra

Reputation: 21

I know the post is old, here is my solution tho as it fits to Sencha Touch 2, too:

Easiest way, use scss:

(...) - here is the nesting of your list-item class, inside add the below:

&:first-child { ... whatever you need here or better use a mixin }

&:last-child { ... whatever you need here or better use a mixin } Enjoy ;o)

Upvotes: 2

geekay
geekay

Reputation: 1671

you can leave you Ext.List definition clean and add the class to an item tpl everytime the list gets updated or rendered.

var onUpdateOrLoad = function(cmp, index, element, e)
{

    var styleClass;
    for (var i = 0; i < cmp.store.data.length; i++)
    {
           if(i%3==0)
            {
            styleClass= 'mm-box-colored-red'; //every third item                          
            }
        Ext.get(cmp.getNode(i)).addCls(styleClass);
    }
}

and then somewhere at the bottom add:

   myList.on('update', onUpdateOrLoad);

OR

myList.on('afterrender', onUpdateOrLoad);

according to your need

Following is my usage

a list that has first and last item rounded accordingly and leaves rest of the items angular to give a grouped tableView effect. var onUpdateOrLoad = function(cmp, index, element, e) {

    var styleClass;
    for (var i = 0; i < cmp.store.data.length; i++)
    {   
        if(i==0)
        {           
            styleClass = 'mm-box-rouded-up';  // first item in the list
        }else if(i==cmp.store.data.length-1)
        {
            styleClass= 'mm-box-rounded-down';  //last item in list
        }
        else{
            styleClass= 'mm-box-rounded-no';
        }
    }
}

torList.on('update', onUpdateOrLoad);

Hope this makes sense and be of help. Thank you

Upvotes: 0

Jollymorphic
Jollymorphic

Reputation: 3530

I'm not in a position to execute this code, but I think something along these lines would do the trick:

var listTpl = new Ext.XTemplate(
   '<div class="menuListItemContainer">',
      '<h1>MENU</h1>',
      '<tpl for=".">',
         '<div class="menuListItem {[xindex === xcount ? "extraClass" : ""]}">',
            '{title}',
         '</div>',
      '</tpl>',
   '</div>',
   '<div class="x-clear"></div>'
);

Upvotes: 2

Related Questions