Nested List with Disclosure only on Leaf

[sissonb]

Currently I am using the getItemTextTpl configuration of the Ext.NestedList to check whether the record is a leaf. If it is I modify the template to include an element with "x-list-disclosure" as the class. This works, but is messy.

Is there a way to use onItemDisclosure and only have it create disclosure icons on leaf items?

Thanks

[mitchellsimoens]

Inspect the DOM... is there a CSS change between if a row is a leaf or not? You may be able to hide the icon via CSS.

[sissonb]

Not Leaf

<div class="x-list-item">
    <div class="x-list-item-body"><span>Today</span></div>
   <div class="x-list-disclosure"></div>
</div>

Leaf

<div class="x-list-item">
    <div class="x-list-item-body">
        <span class="x-list-item-leaf">
            <div class="leaf-node">
                 <span>Torrance</span>
            </div>
        </span>
    </div>
    <div class="x-list-disclosure"></div>
</div>

I don't think there is a selector that can find

.x-list-disclosure

from

.x-list-item-leaf

.
Thanks for the idea. I'll play around with it some more.

[sissonb]

So what I ended up doing is adding 2 listeners to the nested list component that adds the class leafList when all the nodes are leafs and branchList when there is a node with children in the list. Then I use some CSS to hide the buttons.

Here's the relevant JS and CSS.

            cardswitch:function(list, newCard, oldCard, index, animated) {               var isLeaf = true;
               newCard.store.each(function(record, index, records) {
                   if (!record.get('leaf')) {
                       isLeaf = false;
                   }
             });


             if (isLeaf) {
                this.addCls('leafList');
                this.removeCls('branchList');
             }
             else {
                 this.addCls('branchList');
                 this.removeCls('leafList');
             }
        }

        render:function(list) {
            this.addCls('branchList');
        }

.branchList .x-list-disclosure{    display: none;}