Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Problem with Ext.Component - Bug?

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-15736 in 6.0.2.437.
  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    752

    Default Problem with Ext.Component - Bug?

    Hi there,

    in my application i use a complex layout with some grids. When i try to locked a column i get an exception in Ext.Component.

    I try to debug this and found following in the source of Ext.Component:

    Code:
        onBoxReady: function(width, height) {
            var me = this,
                scroller = me.scrollable;
    
            if (me.resizable) {
                me.initResizable(me.resizable);
            }
    
            // Draggability must be initialized after resizability
            // Because if we have to be wrapped, the resizer wrapper must be dragged as a pseudo-Component
            if (me.draggable) {
                me.initDraggable();
            }
    
            if (scroller) {
                if (me.touchScroll) {
                    scroller.setInnerElement(me.getScrollerEl());
                }
                scroller.setElement(me.getOverflowEl());   // <-- here
            }
    
            if (me.hasListeners.boxready) {
                me.fireEvent('boxready', me, width, height);
            }
        }
    In some grid, where the locked column needs a scrollbar, the "scroller" is not an object but a boolean with value true.

    so i changed this part to:

    Code:
            if (scroller) {
                if (me.touchScroll) {
                    scroller.setInnerElement(me.getScrollerEl());
                }
                if(Ext.isFunction(scroller.setElement)){
                    scroller.setElement(me.getOverflowEl());
                }
                //scroller.setElement(me.getOverflowEl());
            }
    Is this a bug in Ext.Component or in my application? I think its a bug in Ext.Component


    Bye, Dumbledore

  2. #2
    Sencha User
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    Hi,

    I'd like to test along with you to see if I get the same error. Can you post a test case either inline here or at https://fiddle.sencha.com?
    Also, what version of the framework are you working with where you're seeing the issue?

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    752

    Default

    Hi,

    sorry, it seems that the problem is in the last nightly. After going back to 5.0.2.1312 it runs fine.

    Sorry,

    Dumbledore

  4. #4
    Sencha User
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    Hi,

    To clarify, the issue exists in the latest Nightly build or is fixed by the latest Nightly build?

    If it's introduced in the latest Nightly, but ok in older versions we definitely need a test case + steps to reproduce the issue to ensure we get the issue reported up to engineering before 5.0.2 is released.

  5. #5
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    752

    Default

    Hi,

    the issue exists in the latest nightly! I will try to make a testcase...

    Bye, Dumbledore

  6. #6
    Sencha User
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    Yes, definitely. We want to safeguard against bugs between releases as much as possible. Thank you for taking the time to share a test case and report the bug!

  7. #7
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    752

    Default

    Sorry for the delay...

    I hope to have a fiddle tomorrow...

  8. #8
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    752

    Default

    so - after some debugging i found the reason. I change a grid with autoScroll:true to a grid with a locked column. And then you get an error inside Ext.Component when using the nightly...

    https://fiddle.sencha.com/fiddle/ci2

    Hmm... how do i embed fiddle here


    Code:
    Ext.define('overrides.Ext.Component', {
        override : 'Ext.Component',
    
        /**
         * Invoked when this component has first achieved size. Occurs after the
         * {@link #componentLayout} has completed its initial run.
         *
         * This method is not called on components that use {@link #liquidLayout}, such as
         * {@link Ext.button.Button Buttons} and {@link Ext.form.field.Base Form Fields}.
         *
         * @param {Number} width The width of this component
         * @param {Number} height The height of this component
         *
         * @template
         * @protected
         */
        onBoxReady: function(width, height) {
            var me = this,
                scroller = me.scrollable;
    
            if (me.resizable) {
                me.initResizable(me.resizable);
            }
    
            // Draggability must be initialized after resizability
            // Because if we have to be wrapped, the resizer wrapper must be dragged as a pseudo-Component
            if (me.draggable) {
                me.initDraggable();
            }
    
            if (scroller) {
                if (me.touchScroll) {
                    scroller.setInnerElement(me.getScrollerEl());
                }
                if(Ext.isFunction(scroller.setElement)){
                    scroller.setElement(me.getOverflowEl());
                } else {
                    console.warn("Houston, we have a problem...");
                }
                //scroller.setElement(me.getOverflowEl());
            }
    
            if (me.hasListeners.boxready) {
                me.fireEvent('boxready', me, width, height);
            }
        }
    })
    
    Ext.application({
        name : 'Fiddle',
    
        requires : [
            'overrides.Ext.Component'
        ],
        
        launch : function() {
            
            Ext.create('Ext.data.Store', {
                storeId:'simpsonsStore',
                fields:['name', 'email', 'phone'],
                data:{'items':[
                    { 'name': 'Lisa',  "email":"[email protected]",  "phone":"555-111-1224"  },
                    { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
                    { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
                    { 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254"  }
                ]},
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        rootProperty: 'items'
                    }
                }
            });
            
    
            Ext.create('Ext.panel.Panel', {
                height 	: 600,
                width  	: 800,
                title	: 'Sample',
                items	: [{
                    xtype 	: 'grid',  
                    height	: 400,
                    width	: 600,
                    autoScroll : true,
                    store	: Ext.data.StoreManager.lookup('simpsonsStore'),
                    columns	: [
                        { text: 'Name',  dataIndex: 'name', hideable : false, width: 35, locked:true},
                        { text: 'Email', dataIndex: 'email', flex: 1 },
                        { text: 'Phone', dataIndex: 'phone' },
                        { text: 'Phone', dataIndex: 'phone' },
                        { text: 'Phone', dataIndex: 'phone' },
                        { text: 'Phone', dataIndex: 'phone' },
                        { text: 'Phone', dataIndex: 'phone' },
                        { text: 'Phone', dataIndex: 'phone' },
                        { text: 'Phone', dataIndex: 'phone' },
                        { text: 'Phone', dataIndex: 'phone' },
                        { text: 'Phone', dataIndex: 'phone' },
                        { text: 'Phone', dataIndex: 'phone' },
                        { text: 'Phone', dataIndex: 'phone' },
                        { text: 'Phone', dataIndex: 'phone' }
                    ]  
                }],
                renderTo: Ext.getBody()
            });
        }
    });

  9. #9
    Sencha User
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

    BTW, you can embed a fiddle using the fiddle ID (ci2) wrapped in [ FIDDLE ] open and closing tags (collapse the spaces in the example tags when you use them for real).

  10. #10
    Sencha Premium User
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    122

    Default

    Instead of excluding the setElement() part, if it's not a function like this
    Code:
    if (Ext.isFunction(scroller.setElement)) {
         scroller.setElement(me.getOverflowEl());
    }
    it helps to use the getter for the 'scrollable' property. Replace
    Code:
    scroller = me.scrollable;
    with
    Code:
    scroller = me.getScrollable();
    instead.

    EDIT: I just noticed that getScrollable() returns null, so it's not really different or better to your solution, my bad.


Page 1 of 2 12 LastLast

Posting Permissions

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