Cannot cancel a detailCard in NestedList

[drb]

REQUIRED INFORMATION


Ext version tested:

• Sencha Touch 2

Browser versions tested against:

• Chrome 21.0.1180.79 m (Windows)

Description:

• Ext.dataview.NestedList. Once you create a detailCard there seems to be no way to cancel it. setDetailCard(null) causes errors.
• I tried getDetailCard().hide() but that did not work
• setting _detailCard = null does work, but seems like a dangerous hack of last resort.

Steps to reproduce the problem:

• Create an Ext.dataview.NestedList with a detailCard.
• Then try to setDetailCard(null)

The result that was expected:

• The detail card should stop coming up.

The result that occurs instead:

• An error is thrown
  Uncaught Error: [ERROR][Ext.dataview.NestedList#applyDetailCard] Invalid item given: null, must be either the config object to factory a new item, or an existing component instance

Test Case:

The code below will alternate between show / not show a detail card based on leafitemtaps

Ext.setup({
    onReady: function () {

        var data = {
            text: 'Groceries',
            items: [{
                text: 'Drinks',
                items: [{
                    text: 'Water',
                    items: [{
                        text: 'Sparkling',
                        leaf: true
                    }, {
                        text: 'Still',
                        leaf: true
                    }, {
                        text: 'Deep',
                        leaf: true
                    }, {
                        text: 'Muddy',
                        leaf: true
                    }]
                }]
            }]
        };

        Ext.define('ListItem', {
            extend: 'Ext.data.Model',
            config: {
                fields: [{
                    name: 'text',
                    type: 'string'
                }]
            }
        });

        var store = Ext.create('Ext.data.TreeStore', {
            model: 'ListItem',
            defaultRootProperty: 'items',
            root: data
        });

        var detailCard = null;
        var showDetail = true;

        var nestedList = Ext.create('Ext.NestedList', {
            fullscreen: true,
            title: 'Groceries',
            displayField: 'text',
            store: store,
            listeners: {
                leafitemtap: function (nlist, list, index, element, record, e, opts) {
                    if (showDetail) {
                        detailCard = {
                            xtype: 'container',
                            items: [
                                {
                                    xtype: 'button',
                                    text: 'hi ' + record.get('text')
                                }
                            ]
                        }
                        nlist.setDetailCard(detailCard);
                    } else {
                        // Cancel the DetailCard
                        nlist.setDetailCard(null);
                    }
                    // toggle whether we are showing or not.
                    showDetail = !showDetail;
                }
            }

        });
    }
});

HELPFUL INFORMATION


Screenshot or Video:

• none

See this URL for live test case: none


Debugging already done:

• See possible fix below.

Possible fix:

• I think the fix is to insert at the front of applyDetailCard

  if (!config) {return config;}

• Also to insert into the front of updateDetailContainer

  if (!newContainer) {return;}

• This works but I am not sure it is sufficient.

Additional CSS used:

• only default ext-all.css

Operating System:

• Windows 7

[Jamie Avins]

Thank you for the suggestion, we'll see if it covers everything.

[Jamie Avins]

This has been fixed for the next release. Please note that your fix isn't correct as setting a detailCard to null should destroy the existing detailCard. Calling the Ext.factory directly will do that properly.

    applyDetailCard: function(config) {
        return Ext.factory(config, Ext.Component, this.getDetailCard());
    },