Disclosure icons in Ext.List are not displayed correctly after loading new data

[farion]

REQUIRED INFORMATION


Ext version tested:

• Sencha 2.0.1

Browser versions tested against:

• Chrome 18

DOCTYPE tested against:

• HTML5

Description:
We use the disclosure field in a model to control the visibility of the disclosure icon for each row in an Ext.List. This works with the initial data only. If the data of the store is changed, the disclosure icons do not match to the disclosure field. The problem is deterministic - often the situation is the opposite of the expected result.

Steps to reproduce the problem:
See the test case. Click on the button at the top to load new data and see the problem.
The items with (>) should have a disclosure icon, otherwise not.

The result that was expected:
The disclosure icons are displayed exactly for the records, where disclosure = true.

The result that occurs instead:
The disclosure icons are displayed randomly.

Test Case:

This is only a slightly changed version of the second example of the Ext.List documentation.

Ext.define('Contact', {
  extend : 'Ext.data.Model',
  config : {
    fields : ['firstName', 'lastName', 'disclosure']
  }
});

var store = Ext.create('Ext.data.Store', {
  model : 'Contact',
  sorters : 'lastName',

  grouper : {
    groupFn : function(record) {
      return record.get('lastName')[0];
    }
  },

  data : [{
    firstName : 'Tommy',
    lastName : 'Maintz',
    disclosure : true
  }, {
    firstName : 'Rob',
    lastName : 'Dougan',
    disclosure : false
  }, {
    firstName : 'Ed',
    lastName : 'Spencer',
    disclosure : false
  }, {
    firstName : 'Jamie',
    lastName : 'Avins',
    disclosure : false
  }, {
    firstName : 'Aaron',
    lastName : 'Conran',
    disclosure : true
  }, {
    firstName : 'Dave',
    lastName : 'Kaneda',
    disclosure : false
  }, {
    firstName : 'Jacky',
    lastName : 'Nguyen',
    disclosure : true
  }, {
    firstName : 'Abraham',
    lastName : 'Elias',
    disclosure : false
  }, {
    firstName : 'Jay',
    lastName : 'Robinson',
    disclosure : false
  }, {
    firstName : 'Nigel',
    lastName : 'White',
    disclosure : true
  }, {
    firstName : 'Don',
    lastName : 'Griffin',
    disclosure : false
  }, {
    firstName : 'Nico',
    lastName : 'Ferrero',
    disclosure : false
  }, {
    firstName : 'Jason',
    lastName : 'Johnston',
    disclosure : false
  }]
});

Ext.create('Ext.List', {
  fullscreen : true,
  itemTpl : '<div class="contact">{firstName} <strong>{lastName}</strong><tpl if="disclosure"> ( &gt; )</tpl></div>',
  store : store,
  grouped : true,
  onItemDisclosure : function() {
    alert('Disclosure click');
  },
  items : [{
    xtype : 'button',
    text : 'load different data',
    handler : function() {
      store.setData([{
        firstName : 'Heiner',
        lastName : 'Mueller',
        disclosure : false
      }, {
        firstName : 'Peter',
        lastName : 'Meier',
        disclosure : true
      }, {
        firstName : 'Frank',
        lastName : 'Meiser',
        disclosure : false
      }])
    }
  }]
});

HELPFUL INFORMATION


Debugging already done:

• none

Possible fix:

• not provided

Regards Farion

[mitchellsimoens]

Thanks for the report.

[Jamie Avins]

This has been fixed for the next release. The following override should resolve the issue, please let us know if you still have issues:

Ext.define('Overrides.dataview.element.List', {
    override: 'Ext.dataview.element.List',

    updateListItem: function(record, item) {
        var me = this,
            dataview = me.dataview,
            extItem = Ext.fly(item),
            innerItem = extItem.down(me.labelClsCache, true),
            data = dataview.prepareData(record.getData(true), dataview.getStore().indexOf(record), record),
            disclosureProperty = dataview.getDisclosureProperty(),
            hasDisclosureProperty = data && data.hasOwnProperty(disclosureProperty),
            iconSrc = data && data.hasOwnProperty('iconSrc'),
            disclosureEl, iconEl;

        innerItem.innerHTML = dataview.getItemTpl().apply(data);

        if (hasDisclosureProperty) {
            disclosureEl = extItem.down(me.disclosureClsCache);
            disclosureEl[data[disclosureProperty] === false ? 'addCls' : 'removeCls'](me.hiddenDisplayCache);
        }

        if (dataview.getIcon()) {
            iconEl = extItem.down(me.iconClsCache, true);
            iconEl.style.backgroundImage = iconSrc ? 'url("' + iconSrc + '")' : '';
        }
    }
}