Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-1619 in a recent build.
  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    2
    Vote Rating
    0
    lebbers is on a distinguished road

      0  

    Default [PR4] Scrolling a list doesn't work with 'id' property defined

    [PR4] Scrolling a list doesn't work with 'id' property defined


    Version tested:
    • ST2 PR4

    Browser versions tested against:
    • Google Chrome

    Description:
    After migrating from ST2 PR3 to PR4 I run in to a problem with scrolling a list. The list doesn't scroll when I set the 'id' property of the list in my own defined relationslist class (extending from Ext.dataview.list).
    Without the 'id' property, scrolling the list works fine.


    Test Case:


    Code:
    
    
    /** app.js **/
    Ext.Loader.setConfig({ enabled: true });
    
    
    Ext.application({
        name: 'CrmTouch',             //namespace and global variable
    
    
        models: [                
                'CrmRelationsModel' 
        ], 
        controllers: [                 
                'CrmRelationsController'
        ],       
       views: [    
                'CrmRelationsListView'
       ],                                  
        stores: [                
                'CrmRelationsDataStore'
        ],
    
        launch: function() {
             console.log('App launch');
    
              Ext.create('Ext.Container', {
              fullscreen: true,
                    layout: 'fit',
                    items: [
                    {
                        xtype: 'CrmRelations'
                    }]
            });           
        }  
    });
    
    
    /** CrmRelationsListView.js **/
    Ext.define('CrmTouch.view.CrmRelationsListView', {
        extend: 'Ext.dataview.List',
            xtype: 'CrmRelations', 
    
            config: {
                id: 'CrmRelationsList', //<!-- causing the list scroll problem
                store: 'CrmRelationsDataStore',
                cls: 'CrmRelationsList',
                itemTpl: '<div class="CrmRelationsListItem"> <span class="FirstItem">{name}</span><span class="SecondItem">{location}</span> </div>',
                styleHtmlContent: true,
                mode: 'SINGLE'        
            }
        }
    });

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    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 test case and report.

    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
    18
    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 in the next release, but this pattern is not something we ever recommend. You should be passing an id at instantiation not baking it into a base class like this.

    Sencha Inc

    Jamie Avins

    @jamieavins

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    2
    Vote Rating
    0
    lebbers is on a distinguished road

      0  

    Default


    I understand that it is not a good pattern to use and also not needed in my application. It's just something easily overlooked. Before I found out it was the id property I tested with different layout configs, reading a lot documentation and eventually stripping my code to the minimum. So hopefully the docs will also get a note about how to use the id property's properly

    Thanks for the fix!

  5. #5
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    239
    Vote Rating
    2
    stephen.friedrich will become famous soon enough

      0  

    Default


    Still, if there is only ever a single instance of a component, the definition is a better place for the id I think.
    For example if I designed a custom modal warning window, it may come with specific CSS that expects a certain id. Why should the client of the window be bothered with that?
    ExtJS 4 plugins:
    varheaders - short/normal/long column header
    clearbutton - mouseover clear button in text field
    Blog: fit4dev
    ExtJS User Group Hamburg

Thread Participants: 2

Tags for this Thread