1. #1
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,349
    Vote Rating
    134
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default API Changes in Ext JS 4.1

    API Changes in Ext JS 4.1


    ** UPDATE: The content of this thread has been summarized in the following Guide. If we've missed anything, please start a new thread to let us know. And thanks for all your help! **

    http://docs.sencha.com/ext-js/4-1/#!/guide/upgrade_41


    This thread is intended to capture all the breaking changes as we encounter them. It was our goal to avoid breaking or changing our API as much as possible in this release, despite the scope of the internal changes. In many cases then, if the API has changed in 4.1, this could be a bug that we need to address. In some cases, the API change may be necessary.

    I will try to keep the running list up to date in this post as folks reply with their findings.

    API Change Resoluton
    Component render Only called on top-most components In previous releases, the render method was used to render all components in a top-down traversal. In 4.1, rendering is performed in memory as markup which is then written to the DOM. This means that the render method of child components is not called. Code in the render method should most likely move to either beforeRender (new to 4.1) or afterRender. For best performance, it is desirable to make style or add/removeCls adjustments in beforeRender so that these values will be generated in the initial markup and not made to the DOM element as it would be in afterRender.
    Component onRender Elements now exist in DOM at time of call In previous releases, the component's primary element ("el") was created when the parent class method was called. This is no longer possible due to bulk rendering. Any logic that was performed prior to calling the parent method can be moved to the new beforeRender method
    Component renderTpl Render Templates now call helper methods As part of bulk rendering, a renderTpl now calls helper methods on the template instance to inject content and container items. This can be best seen in the default renderTpl for Components:
    PHP Code:
        renderTpl'{%this.renderContent(out,values)%}' 
    and Containers:
    PHP Code:
        renderTpl'{%this.renderContainer(out,values)%}' 
    callParent in override calls overridden method This was changed as part of formalizing Ext.define/override. In 4.1, it is now possible to name and require overrides just as you would a normal class:
    PHP Code:
        Ext.define('My.patch.Grid', {
            
    override'Ext.grid.Panel',

            
    foo: function () {
                
    this.callParent(); // calls Ext.grid.Panel.foo
            
    }
        }); 
    The above code in 4.0 would have called the base class "foo" method instead. The callOverridden method was needed to do the above. To bypass the overriden method, you just need to do this:
    PHP Code:
        Ext.define('My.patch.Grid', {
            
    override'Ext.grid.Panel',

            
    foo: function () {
                
    Ext.grid.Panel.superclass.foo.call(this);
            }
        }); 
    It is possible for a class to even "require" its own overrides. This enables breaking up a large class into independent parts expressed as overrides (a better approach than "AbstractFoo" and "Foo").
    FocusManager subscribe For details, see http://www.sencha.com/forum/showthre...l=1#post678781
    Component doComponentLayout This method can still be called to perform a layout of the component, but its internals are quite different. As a component author, this method can no longer be overridden to perform a custom layout since it will not be called internally. Instead you can override afterComponentLayout which is given the new size and old size as parameters or you can respond to the resize event. If you are writing a derived component, the method override should be preferred - just don't forget to callParent.

    One other note: the size of the component should not be changed by this method. The size has been determined already. If the size is changed again, this could lead to infinite recursion at worst (since afterComponentLayout will be called again) or just wrong layout.
    config setters are called to set default values In 4.0, the config mechanism in Ext.define would create getter and setter methods, but the default value would bypass the setter. In this build, we have a partial solution that uses initter methods but that will change to sync with Touch 2 and will simply call the setter. This can effect the timing of the first call to the setter method but is needed because setters were designed to enable transformation-on-set semantics. In Beta 1, this timing is much closer to 4.0.
    Ext.data.Model The model store property is now an array of stores. A single record can belong to more than 1 store, especially in the case of a tree. As such, we need to track a list of all the stores that the model belongs to
    Ext.layout.container.Border Split components are added to the container When configuring components with split: true, the layout will now insert extra splitter components as siblings of the current components. This allows for the layout to be much less complicated and also allows the ability to dynamically modify regions.







    Fixed in Beta 1

    API Change Resoluton
    Component style config CSS names cannot be 'camelCase' This is a bug in the bulk rendering mechanism. We need to de-camelize these names into proper CSS names.
    Last edited by dongryphon; 12 May 2012 at 1:34 PM. Reason: Added stores for model
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"
    -->

  2. #2
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,329
    Vote Rating
    118
    LesJ is a name known to all LesJ is a name known to all LesJ is a name known to all LesJ is a name known to all LesJ is a name known to all LesJ is a name known to all

      0  

    Default Component style config - CSS names cannot be 'camelCase'

    Component style config - CSS names cannot be 'camelCase'


    Don, by my understanding, marginTop in the example below should be changed to 'margin-top'.

    Is this correct?

    Code:
    Ext.define('MyPanel', {
        extend: 'Ext.form.Panel',
        ...
        style: {
            marginTop: 5,
            padding: '4 0 0 0'
        },
        ...
    -->

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2011
    Posts
    48
    Vote Rating
    1
    stahlman is on a distinguished road

      0  

    Default


    @LesJ - It was my understanding that this is not so much an intentional change but a bug (which hopefully will be fixed). See the following thread:
    http://www.sencha.com/forum/showthre...s-style-object
    -->

  4. #4
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,329
    Vote Rating
    118
    LesJ is a name known to all LesJ is a name known to all LesJ is a name known to all LesJ is a name known to all LesJ is a name known to all LesJ is a name known to all

      0  

    Default


    >>> We need to de-camelize these names into proper CSS names.

    Well, then fix it

    I misunderstood that this is an action item for me (as a developer) and that my current code that uses camel case will no longer work.
    -->

  5. #5
    Ext JS Premium Member aenigmatic's Avatar
    Join Date
    Feb 2011
    Location
    Milwaukee, WI
    Posts
    9
    Vote Rating
    0
    aenigmatic is on a distinguished road

      0  

    Default Ext.foo.override()

    Ext.foo.override()


    I have encountered problems with previously overridden methods. The Ext.foo.override() method is listed as depracated, but it seems all out broken to me. I have had good luck switching to Ext.define, and there is good documentation, but just something to add to the list potentially.
    -->

  6. #6
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,349
    Vote Rating
    134
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    @LesJ

    Sorry for the confusion. It is a bug in the framework and will be fixed ASAP since it is a critical compatibility problem. If you need this to test PR1, sadly, you will need to change your code or just ignore the visual problems it creates.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"
    -->

  7. #7
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,349
    Vote Rating
    134
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    @aenigmatic

    While that form is deprecated it is fully supported in 4.x and may or may not remain beyond that. What seems to be broken about it? Perhaps an example would illustrate.

    fyi... the reason we deprecated it is because it cannot be "managed" as part of a build or by the loader (hence the switch to Ext.define for overrides).
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"
    -->

  8. #8
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,349
    Vote Rating
    134
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    Added comments to 1st post about overrides of the render method...
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"
    -->

  9. #9
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,349
    Vote Rating
    134
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    Quote Originally Posted by LesJ View Post
    >>> We need to de-camelize these names into proper CSS names.

    Well, then fix it

    I misunderstood that this is an action item for me (as a developer) and that my current code that uses camel case will no longer work.
    Just a note that this is fixed and will be in the next build of 4.1.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"
    -->

  10. #10
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Don, thanks for taking the time to write this. definitely helpful for my writing efforts
    -->