Results 1 to 7 of 7

Thread: Adding a class to DataView/List items

  1. #1
    Sencha Premium User
    Join Date
    Mar 2009
    Posts
    254
    Answers
    1

    Default Answered: Adding a class to DataView/List items

    This is a sample rendered markup for a List item:

    HTML Code:
    <div class="x-list-item x-item-selected" id="ext-element-454">
      <div class="x-list-item-label">
        <div class="z-mail-read-items-folder">Inbox</div>
      </div>
      <div class="x-list-disclosure"></div>
    </div>
    Is there any way to add a custom cls to the outermost div (having class x-list-item)?
    NodeInterface has a cls property, but setting it does nothing. I tried specifying a custom itemTpl but that affects only the inner <div> which actually houses the label (as you can see in the markup above, custom itemTpl added a class "z-mail-read-items-folder" to the <div>Inbox</div> node. But I need this to be applied to the outer-most <div>).

  2. Okay I found the solution myself. Here are a couple of simple overrides that would do what I mentioned above:

    Code:
    Ext.define('Ext.override.dataview.element.Container', {
        override: 'Ext.dataview.element.Container',
    
    
        getItemElementConfig: function (index, data) {
            var ret = this.callParent(arguments);
    
    
            if (data.cls) {
                ret.cls += ' ' + data.cls;
            }
    
    
            return (ret);
        }
    });
    
    
    Ext.define('Ext.override.dataview.element.List', {
        override: 'Ext.dataview.element.List',
    
    
        getItemElementConfig: function (index, data) {
            var ret = this.callParent(arguments);
    
    
            if (data.cls) {
                ret.cls += ' ' + data.cls;
            }
    
    
            return (ret);
        }
    });
    DataView and List use private framework classes Ext.dataview.element.Container and Ext.dataview.element.List to manage their view items. I overrode the getItemElementConfig in both these classes appending "cls" from record's data if present.

    I guess I would now turn this thread into a feature-request.

  3. #2
    Sencha Premium User
    Join Date
    Mar 2009
    Posts
    254
    Answers
    1

    Default

    Okay I found the solution myself. Here are a couple of simple overrides that would do what I mentioned above:

    Code:
    Ext.define('Ext.override.dataview.element.Container', {
        override: 'Ext.dataview.element.Container',
    
    
        getItemElementConfig: function (index, data) {
            var ret = this.callParent(arguments);
    
    
            if (data.cls) {
                ret.cls += ' ' + data.cls;
            }
    
    
            return (ret);
        }
    });
    
    
    Ext.define('Ext.override.dataview.element.List', {
        override: 'Ext.dataview.element.List',
    
    
        getItemElementConfig: function (index, data) {
            var ret = this.callParent(arguments);
    
    
            if (data.cls) {
                ret.cls += ' ' + data.cls;
            }
    
    
            return (ret);
        }
    });
    DataView and List use private framework classes Ext.dataview.element.Container and Ext.dataview.element.List to manage their view items. I overrode the getItemElementConfig in both these classes appending "cls" from record's data if present.

    I guess I would now turn this thread into a feature-request.

  4. #3
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    66

    Default

    Thanks for sharing your solution, r_honey, that helps.

    In my ST 1.1 app, I was specifying background-position on the list top-level div to control the position of a progress bar that shows how much the user has completed work under each list item. In that case, specifying a class is not ideal, because background-position corresponds to percentage, so there would need to be 100 different classes. If I can't get style to work, I'll end up just using 10 classes or something.

    Anyhow, it's quite a shame how ST 2 doesn't directly allow access to the full template of each list item anymore. Hopefully we will see something like your solution implemented.

  5. #4
    Sencha Premium User
    Join Date
    Mar 2009
    Posts
    254
    Answers
    1

    Default

    Hi bdvr, I think you have a very easy solution:

    Code:
    Ext.define('Ext.override.dataview.element.List', {
        override: 'Ext.dataview.element.List',
    
    
        getItemElementConfig: function (index, data) {
            var ret = this.callParent(arguments);
    
    
            if (data.cls) {
                ret.style = 'background-color: #ababab';
            }
    
    
            return (ret);
        }
    });
    You can apply anything in style based on inspection of data available. "ret" gets passed to Ext.Element.create, which means you can use the goodness of DomHelper specification objects.

  6. #5
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    66

    Default

    Ah, very nice--thanks!

  7. #6

    Default

    How do I use this override? Do I need to override Ext.dataview.List as well in order to use your override?

  8. #7
    Sencha Premium User
    Join Date
    Mar 2009
    Posts
    254
    Answers
    1

    Default

    Quote Originally Posted by hitman01 View Post
    How do I use this override? Do I need to override Ext.dataview.List as well in order to use your override?
    Well just included the override js somewhere in your scripts after the ST scripts.

Posting Permissions

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