Results 1 to 8 of 8

Thread: .initComponent on Ext.List breaks CSS

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    11

    Default .initComponent on Ext.List breaks CSS

    Sencha Touch version tested:
    • 1.0.3


    • only default ext-all.css

    Platform tested against:
    • iOS 4
    • Chrome on Ubuntu

    Description:
    • If I do a .initComponent on a Ext.List component after the component have been rendered the first time, and tap an item in the list, the onItemDeselect() event is triggered right after the onItemSelect() event (somewhere around line 22965 in sencha-touch-debug.js). Hence the x-item-selected CSS class is removed straight away.

    Test Case:
    Code:
      Ext.setup({
       
        onReady : function() {
    
    
    Ext.regModel('Contact', {
        fields: ['firstName', 'lastName']
    });
    
    var store = new Ext.data.JsonStore({
        model  : 'Contact',
        sorters: 'lastName',
    
        getGroupString : function(record) {
            return record.get('lastName')[0];
        },
    
        data: [
            {firstName: 'Tommy',   lastName: 'Maintz'},
            {firstName: 'Rob',     lastName: 'Dougan'},
            {firstName: 'Ed',      lastName: 'Spencer'},
            {firstName: 'Jamie',   lastName: 'Avins'},
            {firstName: 'Aaron',   lastName: 'Conran'},
            {firstName: 'Dave',    lastName: 'Kaneda'},
            {firstName: 'Michael', lastName: 'Mullany'},
            {firstName: 'Abraham', lastName: 'Elias'},
            {firstName: 'Jay',     lastName: 'Robinson'}
        ]
    });
    
    var list = new Ext.List({
        fullscreen: true,
        
        itemTpl : '{firstName} {lastName}',
        grouped : true,
        indexBar: true,
        
        store: store,
    
        simpleSelect: true,
    
        listeners: {
             itemtap: function(list, index){
                var rec = list.store.getAt(index)
                alert(rec.get('firstName') + ' ' + rec.get('lastName'));
    
             }
        }
    });
    
    list.show();
            
            //// code below messes things up
            list.itemTpl = '{lastName}';
            list.initComponent();
            list.refresh();
            
            
        }
    });
    Steps to reproduce the problem:
    • See code above

    The result that was expected:
    • I would expect the x-item-selected class to stay on tap

    The result that occurs instead:
    • The x-item-selected is applied on tap, but gets removed straight away

    Debugging already done:
    • none

    Possible fix:
    • not provided

  2. #2
    Sencha User
    Join Date
    Nov 2010
    Posts
    11

    Default

    On a sidenote: why is it not possible to do a simple .refresh() on a Ext.List component after changing the template? This is possible on Ext.DataView, and I would assume the same approach should be used on Ext.List. On Ext.List you have to do a .initComponent() in addition to .refresh()

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    21

    Default

    Same error detected in an other context

    Sencha Touch version tested:
    1.1

  4. #4
    Sencha User
    Join Date
    Nov 2010
    Posts
    11

    Default

    Yoann,

    I think the Sencha team would appreciate some more info, such as exactly what context you are experiencing this in. Would make it easier fro them to verify the bug.

    Stian

  5. #5
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862

    Default

    Quote Originally Posted by Totland View Post
    On a sidenote: why is it not possible to do a simple .refresh() on a Ext.List component after changing the template? This is possible on Ext.DataView, and I would assume the same approach should be used on Ext.List. On Ext.List you have to do a .initComponent() in addition to .refresh()
    If you look at the code, they do some really bizarre stuff with itemTpl/groupTpl/tpl in the initComponent for List. I think a lot of it should be rewritten, frankly. I understand that you don't want to re-process all the templates on every refresh(), since you do that for other reasons. But it could be broken out into another function that is called by initComponent and the user's code. Or their could bet setItemTpl/setGroupTpl/setGrouped functions that cause it to refresh.

  6. #6
    Sencha User Surykat's Avatar
    Join Date
    Jul 2011
    Location
    BIALYSTOK, Poland
    Posts
    58

    Default

    Error like that also raised during execute method: 'bindStore()' or simple 'refresh()' of list component. The couse of that always is selecting the node at the list. If node is not selected every method execute properly.

  7. #7
    Sencha User Surykat's Avatar
    Join Date
    Jul 2011
    Location
    BIALYSTOK, Poland
    Posts
    58

    Default

    I found a solution for that problem.

    All you need is change code in sencha/sencha-debug in two methods: 'onItemSelect' and 'onItemDeselect' in dataView like I show in code below:

    Code:
    onItemSelect: function(record) {
            var node = this.getNode(record);
            if(node) {
            	Ext.fly(node).addCls(this.selectedItemCls);
            }
        },
    
    
        // invoked by the selection model to maintain visual UI cues
        onItemDeselect: function(record) {
            var node = this.getNode(record);
            if(node) {
            	Ext.fly(node).removeCls(this.selectedItemCls);
            }
        },

  8. #8

    Default

    Rather than changing template (and thereby avoiding having to use initcomponent), the following worked for me:
    http://www.sencha.com/forum/showthre...iew-at-runtime

Similar Threads

  1. List breaks after value is set in the store
    By blessan in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 14 Sep 2010, 2:09 AM
  2. List design breaks inside nestedlist.
    By blessan in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 25 Aug 2010, 9:31 PM
  3. Replies: 0
    Last Post: 1 Jul 2010, 4:50 AM
  4. [2.2]dropdown list breaks if draggable set to true on Portlet object
    By Musical Shore in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 22 Jul 2009, 9:15 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •