Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-3265 in a recent build.
  1. #1
    Sencha User
    Join Date
    Sep 2011
    Location
    Boston
    Posts
    139
    Vote Rating
    6
    drb is on a distinguished road

      0  

    Default Cannot cancel a detailCard in NestedList

    Cannot cancel a detailCard in NestedList


    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

    Code:
    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
      Code:
      if (!config) {return config;}
    • Also to insert into the front of updateDetailContainer
      Code:
      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
    Last edited by drb; 14 Aug 2012 at 12:57 PM. Reason: reformatted Code example properly

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


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

    Sencha Inc

    Jamie Avins

    @jamieavins

  3. #3
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    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.

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

    Sencha Inc

    Jamie Avins

    @jamieavins

Thread Participants: 1

Tags for this Thread