Sencha Touch - List Creation - How to apply a class to the final item in the list

Question

Sencha Touch - List Creation - How to apply a class to the final item in the list

I am currently working on a list creation process using the following format:

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

In my Json file, the {title} values are being populated. However, I am looking for a way to add a specific class to the last item in the list for styling purposes. Any thoughts on how to accomplish this?

Would appreciate any suggestions!

javascript list sencha-touch extjs

Answer 1

Answer №1

Although I cannot run this code myself, I believe the following code snippet may be helpful:

let menuTemplate = 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>'
);

Answer 2

Although I cannot run this code myself, I believe the following code snippet may be helpful:

let menuTemplate = 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>'
);

Answer 3

Answer №2

Although this post is dated, I wanted to share my solution for Sencha Touch 2:

The simplest approach is to utilize scss:

(...) - within the nesting of your list-item class, insert the following:

&:first-child { ... implement whatever you require here or consider using a mixin }

&:last-child { ... implement whatever you require here or consider using a mixin } Enjoy ;o)

Answer 4

Although this post is dated, I wanted to share my solution for Sencha Touch 2:

The simplest approach is to utilize scss:

(...) - within the nesting of your list-item class, insert the following:

&:first-child { ... implement whatever you require here or consider using a mixin }

&:last-child { ... implement whatever you require here or consider using a mixin } Enjoy ;o)

Answer 5

Answer №3

One approach is to keep your Ext.List definition clean and dynamically add a class to an item template every time the list is 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'; //applied to every third item                          
            }
        Ext.get(cmp.getNode(i)).addCls(styleClass);
    }
}

Incorporate the following code at the end:

   myList.on('update', onUpdateOrLoad);

OR

myList.on('afterrender', onUpdateOrLoad);

Choose based on your requirement

Here is an example of how I utilize this:

A list where the first and last items are rounded, while the rest have angular edges to create a grouped tableView effect.

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

torList.on('update', onUpdateOrLoad);

I hope this explanation is clear and beneficial to you. Thank you

Answer 6

One approach is to keep your Ext.List definition clean and dynamically add a class to an item template every time the list is 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'; //applied to every third item                          
            }
        Ext.get(cmp.getNode(i)).addCls(styleClass);
    }
}

Incorporate the following code at the end:

   myList.on('update', onUpdateOrLoad);

OR

myList.on('afterrender', onUpdateOrLoad);

Choose based on your requirement

Here is an example of how I utilize this:

A list where the first and last items are rounded, while the rest have angular edges to create a grouped tableView effect.

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

torList.on('update', onUpdateOrLoad);

I hope this explanation is clear and beneficial to you. Thank you

Sencha Touch - List Creation - How to apply a class to the final item in the list

Answer №1

Answer №2

Answer №3

Similar questions

Add a new class to an element located in a separate div using JavaScript

Refreshing a Node.js server page upon receiving a JSON update

Issue with Vue3: The imported module is not defined

Stop Bootstrap 5 Accordion from collapsing

Creating a unique 3D model through specified coordinates with the use of THREE.js

The process of transferring a file from a client to a server and then from one server to another

After upgrading to react native version 0.73, the user interface freezes and becomes unresponsive when working with react-native-maps

Updating an Angular directive with dynamically added ng-module and ng-change attributes

Navigating through the sidebar on Next.js

The Next JS build process exclusively creates server-side pages

Testing Angular 2: Ensuring Component Properly Calls Router with Accurate Arguments

Retrieving time zone using offset with javascript

Utilize Javascript/Jquery to categorize JSON data based on the days of the week (Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday)

the value contained in a variable can be accessed using the keyword "THIS"

Explain what a particular kind of list is (not an object)

What is the best way to retrieve a Rails variable that is restricted to a specific partial?

Unable to locate node module when using Npm.require

Modifying the appearance of a Component within a NavLink

Exploring the source code of NPM public and private packages within the node_modules directory

AngularJS chatbox widget for interactive communication