Page 4 of 5 FirstFirst ... 2345 LastLast
Results 31 to 40 of 42

Thread: Ext JS 4.1 - Layout and Rendering Performance

  1. #31
    Sencha User edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939

    Default

    Quote Originally Posted by Shyru View Post
    Originally a beta of 4.1 was said to be expected in september. Is this still realistic? We are in the process of porting our application to ExtJS 4.x and have so far had big problems with grids in 4.0.x (including 4.0.6) and since reading this thread I am sure 4.1 will fix many problems we encountered. So we are eager to try out 4.1 and don't want to implement grid workarounds/fixes based on 4.0.x since 4.1 is around the corner.
    So any ETA on 4.1?
    It's likely to push into early October now. Layouts are a tricky thing and we want to get them right before sending anything out. There is a private alpha list for preliminary builds - if you want access to it just drop me an email ([email protected])
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  2. #32
    Sencha User
    Join Date
    Mar 2011
    Posts
    208

    Default

    Hi Ed,

    Is that early alpha version given to some specific members ? I am even interested to go for 4.1a coz I faced many problem while migrating from ext3.x to ext4.0.2a. I used many overrides. I want to see ext4.1 if in case I can get. please let me know .

  3. #33
    Sencha User
    Join Date
    Mar 2010
    Location
    Bay Area
    Posts
    152

    Default

    We'll have a full blog update on the 4.1 release this week.

  4. #34
    Ext JS Premium Member
    Join Date
    Oct 2008
    Posts
    33

    Default

    Looking forward to the blog posting

  5. #35
    Sencha User
    Join Date
    Mar 2011
    Posts
    208

    Default

    Thx. Looking forward

  6. #36
    Sencha User
    Join Date
    Jan 2011
    Posts
    17

    Default

    http://www.sencha.com/blog/ext-js-4-1-update/
    Quote Originally Posted by Sencha blog
    Releasing 4.0.7 to General Community
    Were disappointed about not being able to bring you 4.1 in the time frame we promised. As a result, we will be making our 4.0.7 release normally only available to commercial support subscribers available to the entire community in the next week. 4.0.7 contains almost two hundred bug releases subsequent to 4.0.2a, and we want you to have them on an accelerated time-table.
    After the disappointing news that 4.1 is another month away, I for one am very happy to hear this. Looking forward to it.

  7. #37
    Sencha User edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939

    Default

    Quote Originally Posted by Rob Hogan View Post
    http://www.sencha.com/blog/ext-js-4-1-update/

    After the disappointing news that 4.1 is another month away, I for one am very happy to hear this. Looking forward to it.
    Me too, 4.0.7 is a lot better than 4.0.2a. I think 4.1.0 will make you pretty happy too though, we just want to get it right before we send it out
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  8. #38
    Touch Premium Member
    Join Date
    Jun 2008
    Location
    Germany, Dortmund
    Posts
    249

    Default Experiences Migrating complex Portal Solution from 3.x to 4.x

    Hallo Ed,
    currently i found the time to start migrating parts of my ext js based portal framework to Ext 4.

    Beside the common problems of migration (many thankx to compat layer), the main reasons not to
    switch right know are:

    1) I need more time to migrate 3rd Party ux that does not support 4.x right now
    I hope, Sencha will not start completely redesign the API with each new release.
    I like the new constructs like mixins, but the total costs for migration does not reflect the business benefit. Please pay attention on downward compatibilty for further development

    2) Starting with 4.0.6 and Bugs
    A lot of the needed functionality is buggy right know.
    Some of the bugs has been addressed before (ex. Tabs with 16x16 icons does not render correctly) and other bugs has been reported by me. I also reported bugs with 4.0 but knowbody pay attention on this!?! They even did not get a state insided forum.

    I found out a lot of issues/open questions using the compat layer and inspecting the 4.x source.
    For example does the locale/de.js files prototype things on root level that have been moved to a special listConfig object and the compat layer is throwing compat issues for the framework itself!?!

    3) Magic Refs and performance
    The main entry of accessing child components in former devs has been the REF property (also pointed out by your Sencha Designer Tutorials) as the prefered way of accessing sub components.
    Right know i have to declare pointers onInit like
    me.Comp1 = me.down(#itemId)
    me.Comp2 = me.down(#itemId2)

    i did not investigate time to find out the performance diffs between down, up, query and child,
    but lot of event handlers find used component on each event!
    Is this feature really performant and should used this way, if thousands of queries to find components (maybe via complex selectors) are fired very often.

    Why not to bring back REF property (only on root level of components, not "../") that automatically creates a object reference onInit to quick access such components? This would be an easy way of optimizing overall performance.

    4) Scrolling
    The main painpoint is the umcomfortable behavior of scrolling inside Grids. It does not feel native and in complex szenarios there is a delay between dragging scroller and reaction of the grid.
    If i understood right, this topic is addressed for 4.1 called native scrolling.

    5) General Performance
    I mainly migrated and tested under current Firefox and Chrome but also on this modern browsers the overall performance is always slower than 3.x (especially feeled performance for scrolling).
    Opening simple Windows that use Templates feels also delayed (time from action click till rendering).
    It feels, that there is always a delay of xxx ms.

    6) User Experience for Desktop and Mobile
    Some weeks ago, i played around with Sencha Touch.
    I like the way of native user experience without the need of app store.
    With touch i can easily add mobile support to my portal framework.
    Right know, the main pain points are the different libs, but with Touch, it will get closer to Ext 4.

    What i really need will is a global Ext JS Namespace so i can use Ext JS 4 and Touch Hand-in-Hand.
    For example Touch 1.0 does not had a TaskManager, so i added the EXT JS Taskmanager to my touch project. Why not to use the business logic and store globally for js and touch and only have views and controllers device specific? Right know i have to use such things redundant (especially touch 1 does not support the new classloader/ extend methods). Are there any plans to define a global Sencha component namespace? A lot of component are in common and all other components are desktop or mobile specific.

    Resumee:
    I like the overwholed architecture (esp. mixins) and also the new theming possibilities, but not on the cost of performance that leads to a bad user experience (especially if the users know the same 3.x app).

    Currently i hope, lot's of this pain points will be addressed in 4.1 and the support for Ext 3 will remain till we are able to migrate and use Ext 4 for productive projects on the same quality standard of Ext 3.

    With 4.1 and the new announced performance messurement tools i will bring my portal framework online for further investigations.

    It would be nice to get a comment on this.

    Cheers Holger

  9. #39
    Sencha User
    Join Date
    Jan 2008
    Location
    Mumbai
    Posts
    33

    Default Layout seems to be comprimised

    It seems when we render lot of controls, layouts get compromised.

    Like I am rendering around 400 controls in a two column layout inside a viewport. Each column is of .5 width. I should never get a horizontal scroll.

    I am pasting the code here, which works fine on ExtJs 4.0 but on 4.1 preview release you will notice a horizontal scroll. It happens on both IE8 and FF3.x

    To test this example, you can simply create any html file and refer to this js. Make sure you are pointing to correct bootstrap.js

    Code:
    Ext.require([
        'Ext.*'
    ]);
    
    Ext.onReady(function(){
    
       Ext.tip.QuickTipManager.init();
        var items1 = [];
        var items2 = [];
    
            // The data for all states
        var states = [
            {"abbr":"AL","name":"Alabama","slogan":"The Heart of Dixie"},
            {"abbr":"AK","name":"Alaska","slogan":"The Land of the Midnight Sun"}
        ];
    
            // simple array store
         // Define the model for a State
        Ext.define('State', {
            extend: 'Ext.data.Model',
            fields: [
                {type: 'string', name: 'abbr'},
                {type: 'string', name: 'name'},
                {type: 'string', name: 'slogan'}
            ]
        });
    
    for(var i = 0; i < 100; i++) {
    
    
        // The data store holding the states; shared by each of the ComboBox examples below
        var store = Ext.create('Ext.data.Store', {
            model: 'State',
            data: states
        });
    
        items1.push({
                        xtype:'textfield',
                        fieldLabel: 'First Name',
                        name: 'first'
                    });
        items1.push({
                        xtype:'combo',
                        fieldLabel: 'State',
                        hiddenName: 'state',
                        store: store,
                        displayField:'state',
                        valueField: 'abbr',
                        typeAhead: true,
                        mode: 'local',
                        forceSelection: true,
                        triggerAction: 'all',
                        value: 'OK',
                        selectOnFocus:true
                    });
    
        items2.push({
                        xtype:'textfield',
                        fieldLabel: 'Last Name',
                        name: 'last',
                        value: 'abaf'
                    });
        items2.push({
                        xtype:'datefield',
                        fieldLabel: 'Date',
                        name: 'date',
                        value: '10/14/2001'
                    });
        }
        
        var viewport = Ext.create('Ext.Viewport', {
            layout: 'border',
            items: [
            Ext.create('Ext.Panel', {
                region: 'center', 
                autoScroll: true,
                layout: 'anchor',
                items: Ext.create('Ext.form.Panel', {
                    frame:true,
                    title: 'Multi Column, Nested Layouts and Anchoring',
                    bodyStyle:'padding:5px 5px 0',
                    items: [{
                        xtype: 'container',
                        layout:'column',
                        items:[{
                            columnWidth: 0.5,
                                xtype: 'container',
                            layout: 'anchor',
                            defaults: {
                                value: '',
                                anchor: '100%'
                            },
                            items: items1
                        },{
                            columnWidth: 0.5,
                                xtype: 'container',
                            layout: 'anchor',
                            defaults: {
                                value: '',
                                anchor: '100%'
                            },
                            items: items2
                        }]
                    }]
                })
            })]
        });
    });
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Dynamic Forms built with JavaScript</title>
    
        <!-- ExtJS -->
        <link rel="stylesheet" type="text/css" href="<path to resources/css/ext-all.css>" />
        <script type="text/javascript" src="<path to bootstrap.js>"></script>
    
        <script type="text/javascript" src="<path to the above js>"></script>
    </head>
    <body>
    </body>
    </html>
    Perhaps changing in logic is causing this because in old flow at times there used to be two pass to render all the items. Correctness of the layouts need to be looked into.

    Otherwise as claimed I am seeing 3x improvement in the performance.

    Thanks
    Sachin

  10. #40
    Touch Premium Member
    Join Date
    Jul 2011
    Location
    Poland
    Posts
    63

Page 4 of 5 FirstFirst ... 2345 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
  •