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

Thread: 'afterlayout' event

  1. #1

    Default 'afterlayout' event

    Hello,

    Is there an analog of "afterlayout" event in ST2? I need to update the internals of my component when the size of container gets changed. For that I need to make some calculations, based on the current width and height of the container.

    What will be a recommended way to do that?

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450

    Default

    There are heightchange and widthchange events. I know they are trying to create a standard for events but ones that we have relied upon for a long time now are still useful.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159

    Default

    Backwards compatibility for this will be added in before GA.

    You can, however, use the 'painted' event.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450

    Default

    Will 'painted' get called after a layout or a resize happens?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  5. #5
    Ext JS Premium Member Brendan Carroll's Avatar
    Join Date
    May 2007
    Location
    Balmer, MD.
    Posts
    139

    Default Painted

    It doesn't look like painted is complete yet in PR2. Source code has placeholder but that's about it.
    -BC ...

  6. #6
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159

    Default

    Sorry, I miss read the question.

    We cannot add backwards compatibility for `afterlayout`.

    Sencha Touch 2 now uses CSS, completely, for our layout system. This means we do not know when any sizes change. In most cases, you should not be listening to size change events anyway, as all the styling of your component should be doing using CSS, and should be flexible.

    If you really need to do this (which we really do not recommend because of the performance issues), you should look at the Ext.util.SizeMonitor class. There is no documentation for this class right now, but if you search the source code, you can find some examples of this.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  7. #7

    Default

    Using CSS for layout is a very good approach, very performant etc, I guess its ideal for iPhones, where the interfaces are usually simple. But complex widgets (targeting iPad and tablets in general) sometimes requires the knowledge about the current sizing of the component. This seems like a big limitation for me. Any plans to add support for old-style layouts to ST2?

  8. #8
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159

    Default

    As I say, if you want to know when the size changes, you can use a SizeMonitor to know when that happens. We use this throughout the framework when it is needed, for example, when a container needs to be scrollable.

    Using this approach means we get the performance of using only CSS in most situations, and then we fallback to the SizeMonitor when we need it, which is obviously not as performant.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  9. #9

    Default

    Am I correct, that SizeMonitor should be added to the element, only after the 'painted' event? In the posted test case - see that only monitors 2, 3 actually works.

    Also, I thought, that "painted" event should be fired only once in this example?

    Code:
    Ext.setup({
        
        onReady: function () {
    
            var container = new Ext.Container({
                xtype               : 'Ext.Container',
                
                listeners           : {
                    painted     : function () {
                        
                        console.log('painted')
                        
                        var sizeMonitor3 = new Ext.util.SizeMonitor({
                            element     : container.innerElement,
                            callback    : function () {
                                console.log('size change from 3')
                            }
                        })
                    }
                }
            });
            
            var sizeMonitor1 = new Ext.util.SizeMonitor({
                element     : container.innerElement,
                callback    : function () {
                    console.log('size change from 1')
                }
            })
            
            Ext.Viewport.add(container)
            
            var sizeMonitor2 = new Ext.util.SizeMonitor({
                element     : container.innerElement,
                callback    : function () {
                    console.log('size change from 2')
                }
            })
        }
    });
    I'm using st2.0.0-pr2

  10. #10
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159

    Default

    Here is a simple example of a SizeMonitor:

    Code:
    //Simple view which has a sizemonitor
    Ext.define('MyView', {
        extend: 'Ext.Container',
    
        //require the sizemonitor
        requires: ['Ext.util.SizeMonitor'],
    
        config: {
            //set the default html configuration
            html: 'This has a SizeMonitor. Resize the window to see it in action!<br />',
    
            //make this container scrollable
            scrollable: true
        },
    
        //initialize is called once, when the component is initialized, and by the point, the 
        //components this.element exists
        initialize: function() {
            //listen to the painted event
            this.on('painted', 'onPainted');
    
            //setup the sizemonitor
            this.sizeMonitor = new Ext.util.SizeMonitor({
                element: this.element, //the element we want to monitor the size of
                callback: this.onSizeChange, //the callback to be called when the size changes
                scope: this //the scope of the callback..
            });
        },
    
        //when the component is painted, we need to refresh the sizemonitor so it knows, from now on,
        //if the element changes size
        onPainted: function() {
            this.sizeMonitor.refresh();
        },
    
        //callback for the size monitor
        onSizeChange: function() {
            this.setHtml(this.getHtml() + '<br />Size changed!');
        }
    });
    
    Ext.application({
        name: 'Sencha',
    
        launch: function() {
            this.main = Ext.create("MyView", {
                fullscreen: true
            });
        }
    });
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

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
  •