NestedList, MultiSelect and Persistent Selection

[DrunkenBeard]

Hi there,

I was wondering if there was any way to enable multiselection on a NestedList leaf items ? I would also like to know if a NestedList can keep it's leef items selected even when I navigate between different categories ? I'm trying to implement a control panel for my application that is similar to the way Apple implements the iPad control panel but I'm still not sure about the most optimal way to do it. Nested Lists seem fine for the job as I'll only have multiple selection items inside each category, but if I can't achieve MultiSelect and persist the user selections I'll have either to extend NestedList or just use a normal lists with a card layout to do it.

Either way, any suggestions are welcome. Thanks

[jjdltc]

Even if ST 1.x is not longer supported, I face the same doubt in ST 2.x (2.4.1) and can't find any reliable solution in forums so I made my own approach witch I leave here for future use if someone need it. (ST 2.x)


We face 2 main needs

• Allow the multi selection ( Which is solve in this post )
• Keep the selection over the complete component (What I'm attempt to do)

I also add (by convenience) a base method to get all the selected items inside the nested lists (Complete)

In short words this is the code and print a "console.log" with the selection "onBack" using a getSelection() over the nested list.

Explained is:

• Extend the base list to use, so just select the leaf items

Ext.define('ux.NestedInnerList', {
    extend: 'Ext.dataview.List',
    xtype: "NestedInnerList",
    alternateClassName: "NestedInnerList",
    alias: "NestedInnerList",
    doItemSelect: function(list, record) {
        if (record.data.leaf) {
            this.callParent(arguments);
            this.parent.select.apply(this.parent, [record, true, false]);
        }
    },
    doItemDeselect: function(list, record) {
        if (record.data.leaf && this.parent) {
            this.callParent(arguments);
            this.parent.deselect.apply(this.parent, [record, false]);
        }
    }
});

• And extend the nestedlist to allow the getSelection Method (and do a mixin with selectable)

Ext.define('ux.NestedListMultiSelect', {
    extend: 'Ext.dataview.NestedList',
    xtype: "NestedListMultiSelect",
    alternateClassName: "NestedListMultiSelect",
    alias: "NestedListMultiSelect",
    mixins: ['Ext.mixin.Selectable'],
    config: {
        clearSelectionOnListChange: false,
        listConfig: {
            xtype: "NestedInnerList"
        },
        mode: "MULTI"
    },
    constructor: function(config) {
        var me = this;


        me.mixins.selectable.constructor.apply(me, arguments);
        me.callParent(arguments);
    }
});

Hope this help someone (BTW is just a fast implementation, if there is any improvement it will be good to know)

---
JJDLTC

[Geomap]

Thank You! This help me to start a similar implementation.

[jjdltc]

It surprised me that after all this time it result useful for someone else.
I'm glad about that.
You're welcome