Thank you for reporting this bug. We will make it our priority to review this report.
  1. #121
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    359
    Vote Rating
    16
    rich02818 will become famous soon enough

      0  

    Default


    Ok, I removed the few additional elements created in the v4 themes example so that the rendered components are the same as the v3 themes example. Here are the results:

    Chrome: 4.1.0 is 28% slower than v3.4.0
    IE8: 4.1.0 is 48% slower than v3.4.0

  2. #122
    Sencha User maysam_tayyeb's Avatar
    Join Date
    Nov 2007
    Location
    Australia, Melbourne
    Posts
    2
    Vote Rating
    0
    maysam_tayyeb is on a distinguished road

      0  

    Default The dynamic callParent()

    The dynamic callParent()


    Congratulations on performance improvements of v4.1.

    However there is a newly created issue I think, The dynamic callParent().
    In every method, it's a really good idea to help ExtJS users call the superclass one, easier and shortly.
    But it can loose the performance and get longer and harder to deal call stacks.

    According to my experiments in similar situations I believe that the previous way of referencing parent methods in earlier versions(3.x and before) was more effective in gaining lightness because of straight calls without any delegators.

    So callParent() is just a good tool to use with beginners.
    It'll be a good idea to use the old way in your own codes (ExtJS team generated Components) which will be result in a higher performance.
    ______________
    S.M.Tayyeb
    Ext JS Developer

  3. #123
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    359
    Vote Rating
    16
    rich02818 will become famous soon enough

      0  

    Default


    Here is the code I used for the themes comparison. Other than some minor size differences for some of the panels, they look identical when rendered. I will happily examine any other benchmarks provided. I truly want this framework to become usable for a complex RIA.


    v3.4.0 - themes.html
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Ext JS 3.4.0 Themes Example</title>
        <script>
            //alert("start");
            var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
            var now = new Date();
            var starthours = now.getHours();
            var startminutes = now.getMinutes();
            var startseconds = now.getSeconds();
            var startmilli = now.getMilliseconds();
            var date1 = new Date(2011,06,05,starthours,startminutes,startseconds,startmilli)
        </script>
    
    
        <!-- Standard includes -->
    <!--     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> -->
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all-notheme.css" />
    <!--     <link rel="stylesheet" type="text/css" href="../../resources/css/xtheme-blue.css" />  -->
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all-debug.js"></script>
    
    
        <!-- Theme includes -->
        <link rel="stylesheet" type="text/css" title="blue"      href="../../resources/css/xtheme-blue.css" /> 
        <link rel="stylesheet" type="text/css" title="gray"      href="../../resources/css/xtheme-gray.css" />
        <link rel="stylesheet" type="text/css" title="access"    href="../../resources/css/xtheme-access.css" />
        <link rel="stylesheet" type="text/css" title="yourtheme" href="../../resources/css/yourtheme.css" />
        <!-- 
            By default, yourtheme.css is an exact copy of x-themeblue.css. 
            Customize your theme by editing yourtheme.css and customize your 
            own images in the images/yourtheme/ directory. 
        -->
    
    
        <script type="text/javascript" src="themes.js"></script>
        <script type="text/javascript" src="styleswitcher.js"></script>
             
        <style type="text/css">
        
            .x-viewport, .x-viewport body {
            }
    
    
            body {
                font-family: Helvetica, Arial, sans-serif;
                font-size: 12px;
            }
            
            h1 a:link, h1 a:visited {
                color: #046BCA;
            }
            
            h1 a:hover, h1 a:focus, h1 a:active {
                color: #1C417C;
            }
            
            div#header {
                height: 65px;
                width: 1090px;
                padding: 25px 0 10px 0;
                margin: 0 50px;
            }
            div#header h1 {
                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 24px;
                font-weight: 600;
            }
            .x-viewport body {
                overflow: auto;
            }
            form#styleswitcher {
                background-color: #f3f3f3;
                background-color: rgba(243,243,243,.333);
                border: 1px solid #ddd;
                border-color: rgba(221,221,221,.333);
                border-radius:         8px;
                -moz-border-radius:    8px;
                -ms-border-radius:     8px;
                -o-border-radius:      8px;
                -webkit-border-radius: 8px;
                
                float: right;
                padding: 8px 10px;
                
                width: auto;
            }
            form#styleswitcher select {
                font-size: 13px;
                line-height: 13px;
            }
            div#header h1 span {
                color: inherit;
                font-family: Helvetica, Arial, sans-serif;
                font-size: 13px;
                font-weight: normal;
                line-height: 30px;
                padding-left: 25px;
            }
        </style>
    </head>
    
    
    <body>
        <div id="header">
            <form id="styleswitcher">
                <label for="styleswitcher_select">Choose Theme: </label>
                <select name="styleswitcher_select" id="styleswitcher_select">
                    <option value="blue" selected="true">Blue Theme</option>
                    <option value="gray">Gray Theme</option>
                    <option value="access">Accessibility Theme</option>
                    <option value="yourtheme">Your Theme</option>
                </select>
            </form>
            <h1>Ext JS Themes <span>View and test every Ext component against bundled <a href="http://www.extjs.com/products/js/themes.php">Ext Themes</a>, or, your own custom themes.</span></h1>
        </div>
    </body>
    </html>
    v3.4.0 themes.js
    Code:
    /*!
     * Ext JS Library 3.4.0
     * Copyright(c) 2006-2011 Sencha Inc.
     * licensing@sencha.com
     * http://www.sencha.com/license
     */
    
    
    Ext.onReady(function(){
        var items = [];
        
        Ext.QuickTips.init();
        
        //=============================================================
        // Layout grid toggle button
        //=============================================================
    //    items.push({
    //        xtype: 'panel',
    //        border: false,
    //        width: 120,
    //        x: 50, y: 20,
    //        items: {
    //            xtype: 'button',
    //            text: 'Toggle Layout Grid',
    //            handler: function(){
    //                Ext.getBody().toggleClass('x-layout-grid');
    //            }
    //        }
    //    });
        
        //=============================================================
        // Panel / Window
        //=============================================================
        items.push({
            xtype: 'panel',
            width: 150,
            height: 150,
            title: 'Basic Panel',
            bodyStyle: {padding: '5px'},
            html: 'Some content',
            collapsible: true,
            x: 50, y: 100
        });
        
        items.push({
            xtype: 'panel',
            width: 150,
            height: 150,
            title: 'Masked Panel',
            x: 210, y: 100,
            bodyStyle: {padding: '5px'},
            html: 'Some content',
            collapsible: true,
            listeners: {
                'render': function(p){
                    p.body.mask('Loading...');
                },
                delay: 50
            }
        });
        
        items.push({
            xtype: 'panel',
            width: 150,
            height: 150,
            title: 'Framed Panel',
            html: 'Some content',
            frame: true,
            collapsible: true,
            x: 370, y: 100
        });
        
        new Ext.Window({
            width: 150,
            height: 150,
            title: 'Window',
            bodyStyle: {padding: '5px'},
            html: 'Click Submit for Confirmation Msg.',
            collapsible: true,
            closable: false,
            draggable: false,
            shadow: false,
            resizable: false,
            x: 530, y: 100,
            tbar: [{
                text: 'Toolbar'
            }],
            buttons: [{
                text: 'Submit',
                id: 'message_box',
                cls: 'x-icon-btn',
                iconCls: 'x-icon-btn-ok',
                handler: function(){
                    Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');
                }
            }]
        }).show();
        
        //=============================================================
        // Toolbar / Menu
        //=============================================================
        var menu = new Ext.menu.Menu({
            items: [{
                text: 'Menu item'
            },{
                text: 'Check 1',
                checked: true
            },{
                text: 'Check 2',
                checked: false
            }, '-', {
                text: 'Option 1',
                checked: true,
                group: 'opts'
            },{
                text: 'Option 2',
                checked: false,
                group: 'opts'
            }, '-', {
                text: 'Sub-items',
                menu: new Ext.menu.Menu({
                    items: [{text: 'Item 1'},{text: 'Item 2'}]
                })
            }]
        });
        items.push({
            xtype: 'panel',
            width: 450,
            height: 150,
            title: 'Basic Panel With Toolbars',
            x: 690, y: 100,
            tbar: ['Toolbar &amp; Menus', ' ', '-', {
                text: 'Button'
            },{
                text: 'Menu Button',
                id: 'menu-btn',
                menu: menu
            },{
                xtype: 'tbsplit',
                text: 'Split Button',
                menu: new Ext.menu.Menu({
                    items: [{text: 'Item 1'},{text: 'Item 2'}]
                })
            },{
                xtype: 'button',
                enableToggle: true,
                pressed: true,
                text: 'Toggle Button'
            }],
            bbar: [{
                text: 'Bottom Bar'
            }]
        });
        
        //=============================================================
        // Form widgets
        //=============================================================
        items.push({
            xtype: 'form',
            id: 'form-widgets',
            title: 'Form Widgets',
            width: 630,
            height: 700,
            frame: true,
            x: 50, y: 260,
            tools: [
                {id:'toggle'},{id:'close'},{id:'minimize'},{id:'maximize'},{id:'restore'},{id:'gear'},{id:'pin'},
                {id:'unpin'},{id:'right'},{id:'left'},{id:'up'},{id:'down'},{id:'refresh'},{id:'minus'},{id:'plus'},
                {id:'help'},{id:'search'},{id:'save'},{id:'print'}
            ],
            bodyStyle: {
                padding: '10px 20px'
            },
            defaults: {
                anchor: '98%',
                msgTarget: 'side',
                allowBlank: false
            },
            items: [{
                xtype: 'label',
                text: 'Plain Label'
            },{
                fieldLabel: 'TextField',
                xtype: 'textfield',
                emptyText: 'Enter a value',
                itemCls: 'x-form-required'
            },{
                fieldLabel: 'ComboBox',
                xtype: 'combo',
                store: ['Foo', 'Bar'],
                itemCls: 'x-form-required',
                resizable: true
            },{
                fieldLabel: 'DateField',
                itemCls: 'x-form-required',
                xtype: 'datefield'
            },{
                fieldLabel: 'TimeField',
                itemCls: 'x-form-required',
                xtype: 'timefield'
            },{
                fieldLabel: 'NumberField',
                emptyText: '(This field is optional)',
                allowBlank: true,
                xtype: 'numberfield'
            },{
                fieldLabel: 'TextArea',
                //msgTarget: 'under',
                itemCls: 'x-form-required',
                xtype: 'textarea',
                cls: 'x-form-valid',
                value: 'This field is hard-coded to have the "valid" style (it will require some code changes to add/remove this style dynamically)'
            },{
                fieldLabel: 'Checkboxes',
                xtype: 'checkboxgroup',
                columns: [100,100],
                items: [{boxLabel: 'Foo', checked: true},{boxLabel: 'Bar'}]
            },{
                fieldLabel: 'Radios',
                xtype: 'radiogroup',
                columns: [100,100],
                items: [{boxLabel: 'Foo', checked: true, name: 'radios'},{boxLabel: 'Bar', name: 'radios'}]
            },{
                hideLabel: true,
                xtype: 'htmleditor',
                value: 'Mouse over toolbar for tooltips.<br /><br />The HTMLEditor IFrame requires a refresh between a stylesheet switch to get accurate colors.',
                height: 110,
                handler: function(){
                    Ext.get('styleswitcher').on('click', function(e){
                        Ext.getCmp('form-widgets').getForm().reset();
                    });
                }
            },{
                title: 'Plain Fieldset',
                xtype: 'fieldset',
                height: 50
            },{
                title: 'Collapsible Fieldset',
                xtype: 'fieldset',
                collapsible: true,
                height: 50
            },{
                title: 'Checkbox Fieldset',
                xtype: 'fieldset',
                checkboxToggle: true,
                height: 50
            }],
            buttons: [{
                text:'Toggle Enabled',
                cls: 'x-icon-btn',
                iconCls: 'x-icon-btn-toggle',
                handler: function(){
                    Ext.getCmp('form-widgets').getForm().items.each(function(ctl){
                        ctl.setDisabled(!ctl.disabled);
                    });
                }
            },{
                text: 'Reset Form',
                cls: 'x-icon-btn',
                iconCls: 'x-icon-btn-reset',
                handler: function(){
                    Ext.getCmp('form-widgets').getForm().reset();
                }
            },{
                text:'Validate',
                cls: 'x-icon-btn',
                iconCls: 'x-icon-btn-ok',
                handler: function(){
                    Ext.getCmp('form-widgets').getForm().isValid();
                }
            }]
        });
        
        //=============================================================
        // BorderLayout
        //=============================================================
        items.push({
            xtype: 'panel',
            width: 450,
            height: 350,
            title: 'BorderLayout Panel',
            x: 690, y: 260,
            layout: 'border',
            defaults: {
                collapsible: true,
                split: true
            },
            items: [{
                title: 'North',
                region: 'north',
                html: 'North',
                ctitle: 'North',
                margins: '5 5 0 5',
                height: 70
            },{
                title: 'South',
                region: 'south',
                html: 'South',
                collapseMode: 'mini',
                margins: '0 5 5 5',
                height: 70
            },{
                title: 'West',
                region: 'west',
                html: 'West',
                collapseMode: 'mini',
                margins: '0 0 0 5',
                width: 100
            },{
                title: 'East',
                region: 'east',
                html: 'East',
                margins: '0 5 0 0',
                width: 100
            },{
                title: 'Center',
                region: 'center',
                collapsible: false,
                html: 'Center'
            }]
        });
        
        //=============================================================
        // Grid
        //=============================================================
        var myData = [
            ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
            ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
            ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
            ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
            ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
            ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
            ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
            ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
            ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am']
        ];
        var store = new Ext.data.SimpleStore({
            fields: [
               {name: 'company'},
               {name: 'price', type: 'float'},
               {name: 'change', type: 'float'},
               {name: 'pctChange', type: 'float'},
               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
            ],
            sortInfo: {
                field: 'company', direction: 'ASC'
            }
        });
        var pagingBar = new Ext.PagingToolbar({
            pageSize: 5,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}'
        });
        store.loadData(myData);
        
        items.push({
            xtype: 'grid',
            store: store,
            columns: [
                {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
                {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
                {header: "Change", width: 75, sortable: true, dataIndex: 'change'},
                {header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'},
                {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ],
            stripeRows: true,
            autoExpandColumn: 'company',
            loadMask: true,
            height: 200,
            width: 450,
            x: 690, y: 620,
            title:'GridPanel',
            bbar: pagingBar,
            tbar: [
                { text: 'Toolbar' },'->',
                new Ext.form.TwinTriggerField({
                    xtype: 'twintriggerfield',
                    trigger1Class: 'x-form-clear-trigger',
                    trigger2Class: 'x-form-search-trigger'
                })
             ]
        });
    
    
        //=============================================================
        // ListView
        //=============================================================
    
    
        var listView = new Ext.list.ListView({
            store: store,
            multiSelect: true,
            emptyText: 'No images to display',
            reserveScrollOffset: true,
    
    
            columns: [
                {id:'company',header: "Company", width: .5, sortable: true, dataIndex: 'company'},
                {header: "Price", width: .25, sortable: true, tpl: '{price:usMoney}', dataIndex: 'price'},
                {header: "Change", width: .25, sortable: true, dataIndex: 'change'}
            ]
        });
        
        items.push({
            xtype:'panel',
            id:'images-view',
            width:250,
            height:182,
            x: 430, y: 1130,
            collapsible:false,
            layout:'fit',
            title:'Simple ListView', // <i>(0 items selected)</i>
            items: listView
            
        });
        
        //=============================================================
        // Accordion / Tree
        //=============================================================
        var tree = new Ext.tree.TreePanel({
            title: 'TreePanel',
            autoScroll: true,
            enableDD: true
        });
    
    
        var root = new Ext.tree.TreeNode({
            text: 'Root Node',
            expanded: true
        });
        tree.setRootNode(root);
    
    
        root.appendChild(new Ext.tree.TreeNode({text: 'Item 1'}));
        root.appendChild(new Ext.tree.TreeNode({text: 'Item 2'}));
        var node = new Ext.tree.TreeNode({text: 'Folder'});
        node.appendChild(new Ext.tree.TreeNode({text: 'Item 3'}));
        root.appendChild(node);
        
        var accConfig = {
            title: 'Accordion and TreePanel',
            layout: 'accordion',
            x: 690, y: 830,
            width: 450,
            height: 240,
            bodyStyle: {
                'background-color': '#eee'
            },
            defaults: {
                border: false
            },
            items: [tree, {
                title: 'Item 2',
                html: 'Some content'
            },{
                title: 'Item 3',
                html: 'Some content'
            }]
        }
    
    
        items.push(accConfig);
        
        //=============================================================
        // Tabs
        //=============================================================
        var tabCfg = {
            xtype: 'tabpanel',
            activeTab: 0,
            width: 310,
            height: 150,
            defaults: {
                bodyStyle: 'padding:10px;'
            },
            items: [{
                title: 'Tab 1',
                html: 'Free-standing tab panel'
            },{
                title: 'Tab 2',
                closable: true
            },{
                title: 'Tab 3',
                closable: true
            }]
        };
        
        items.push(Ext.applyIf({
            x: 50, y: 970,
            enableTabScroll: true,
            items: [{
                title: 'Tab 1',
                html: 'Tab panel for display in a border layout'
            },{
                title: 'Tab 2',
                closable: true
            },{
                title: 'Tab 3',
                closable: true
            },{
                title: 'Tab 4',
                closable: true
            },{
                title: 'Tab 5',
                closable: true
            },{
                title: 'Tab 6',
                closable: true
            },{
                title: 'Tab 7',
                closable: true
            }]  // enable 4 through 7 to see tab scrolling
        }, tabCfg));
        
        items.push(Ext.apply({
            plain: true,
            x: 370, y: 970
        }, tabCfg));
        
        
        //=============================================================
        // DatePicker
        //=============================================================
        items.push({
            xtype: 'panel',
            border: false,
            width: 180,
            x: 50, y: 1130,
            items: {
                xtype: 'datepicker'
            }
        });
        
        //=============================================================
        // Resizable
        //=============================================================
        var rszEl = Ext.DomHelper.append(Ext.getBody(), {
            style: 'background: transparent;', html: '<div style="padding:20px;">Resizable handles</div>'
        }, true);
        rszEl.position('absolute', 1, 240, 1130);
        rszEl.setSize(180, 180);
        new Ext.Resizable(rszEl, {
            handles: 'all',
            pinned: true
        });
        
        //=============================================================
        // ProgressBar / Slider
        //=============================================================
        items.push({
            xtype: 'panel',
            title: 'ProgressBar / Slider',
            x: 690, y: 1080,
            width: 450,
            height: 200,
            bodyStyle: {padding: '15px'},
            items: [{
                xtype: 'progress',
                value: .5,
                text: 'Progress text...'
            },{
                xtype: 'slider',
                value: 50
            },{
                xtype: 'slider',
                vertical: true,
                value: 50,
                height: 100
            }]
        });
        
        
        //=============================================================
        // Render everything!
        //=============================================================
        new Ext.Viewport({
            layout: 'absolute',
            //cls: 'x-layout-grid',
            autoScroll: true,
            items: items
        });
        
        Ext.getCmp('menu-btn').showMenu();
        
        //=============================================================
        // Stylesheet Switcher
        //=============================================================
        Ext.get('styleswitcher_select').on('change',function(e,select){
            var name = select[select.selectedIndex].value;
            setActiveStyleSheet(name);
        });
        
        var cookie = readCookie("style");
        var title = cookie ? cookie : getPreferredStyleSheet();
        Ext.get('styleswitcher_select').dom.value=title;
    
    
        var end = new Date();
        var endhours = now.getHours();
        var endminutes = end.getMinutes();
        var endseconds = end.getSeconds();
        var endmilli = end.getMilliseconds();
        var date2 = new Date(2011,06,05,endhours,endminutes,endseconds,endmilli)
        var diffDays = Math.abs((date1.getTime() - date2.getTime())/1000);
        alert("Total Load and layout Time"+' ' +diffDays);
    
    
    });
    v4.1.0 themes-test-4.1.html (notice the commented out sections...)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Ext JS 4 Themes</title>
    
    
        <script>
            //alert("start");
            var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
            var now = new Date();
            var starthours = now.getHours();
            var startminutes = now.getMinutes();
            var startseconds = now.getSeconds();
            var startmilli = now.getMilliseconds();
            var date1 = new Date(2011,06,05,starthours,startminutes,startseconds,startmilli)
        </script>
    
    
    
    
            <link rel="stylesheet" type="text/css" href="ext-4.1.0/resources/css/ext-all.css" />
            <script type="text/javascript" src="ext-4.1.0/ext-all.js"></script>
            <script type="text/javascript" src="themes.js"></script>
            <style>
                .add16 {
                   background-image: url(icons/add.png);
                }
                h1 a:link, h1 a:visited {
                    color: #046BCA;
                }
    
    
                h1 a:hover, h1 a:focus, h1 a:active {
                    color: #1C417C;
                }
    
    
                div#header {
                    height: 65px;
                    width: 1090px;
                    padding: 25px 0 10px 0;
                    margin: 0 50px;
                }
                div#header h1 {
                    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                    font-size: 24px;
                    font-weight: 600;
                }
                form#styleswitcher {
                    background-color: #f3f3f3;
                    background-color: rgba(243,243,243,.333);
                    border: 1px solid #ddd;
                    border-color: rgba(221,221,221,.333);
                    border-radius:         8px;
                    -moz-border-radius:    8px;
                    -ms-border-radius:     8px;
                    -o-border-radius:      8px;
                    -webkit-border-radius: 8px;
    
    
                    float: right;
                    padding: 8px 10px;
    
    
                    width: auto;
                }
                form#styleswitcher select {
                    font-size: 13px;
                    line-height: 13px;
                }
                div#header h1 span {
                    color: inherit;
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 13px;
                    font-weight: normal;
                    line-height: 30px;
                    padding-left: 25px;
                }
                body {
                    padding-bottom:10px;
                }
            </style>
        </head>
        <body>
            <div id="header">
                <form id="styleswitcher">
                    <label for="styleswitcher_select">Choose Theme: </label>
                    <select name="styleswitcher_select" id="styleswitcher_select">
                        <option value="index.html" selected="true">Classic Theme</option>
                        <option value="index-gray.html">Gray Theme</option>
                        <option value="index-access.html">Accessibility Theme</option>
                    </select>
                </form>
                <h1>Ext JS Themes <span>View and test every Ext component against bundled <a href="http://www.sencha.com/products/extjs/themes/">Ext Themes</a>, or, your own custom themes.</span></h1>
            </div>
        </body>
    </html>
    v4.1.0 themes.js
    Code:
    Ext.require([
        'Ext.window.Window',
        'Ext.panel.Panel',
        'Ext.toolbar.*',
        'Ext.tree.Panel',
        'Ext.container.Viewport',
        'Ext.container.ButtonGroup',
        'Ext.form.*',
        'Ext.tab.*',
        'Ext.slider.*',
        'Ext.layout.*',
        'Ext.button.*',
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
    
    
        'Ext.perf.Monitor'
    ]);
    
    
    function hasOption (name) {
        return window.location.search.indexOf(name) >= 0;
    }
    
    
    var useDeferRender = true,
        rtl = hasOption('rtl');
    
    
    if (hasOption('diag')) {
        Ext.require([
            'Ext.diag.layout.ContextItem',
            'Ext.diag.layout.Context'
        ]);
    }
    
    
    if (rtl) {
        Ext.require([
            'Ext.rtl.Element',
            'Ext.rtl.AbstractComponent'
        ]);
    }
    
    
    function getBasicPanel () {
        return {
            xtype: 'panel',
    
    
            x: 50, y: 80,
    
    
            width : 150,
            height: 90,
            rtl: rtl,
    
    
            title: 'Basic Panel',
            animCollapse: true,
            bodyPadding: 5,
            html       : 'Some content'
        };
    }
    
    
    function getCollapsedPanel () {
        return {
            xtype: 'panel',
    
    
            x: 50, y: 180,
    
    
            width : 150,
            height: 70,
            rtl: rtl,
    
    
            title: 'Collapsed Panel',
            animCollapse: true,
            bodyPadding: 5,
            html       : 'Some content',
            collapsible: true,
            collapsed: true
        };
    }
    
    
    function getMaskedPanel (rtl) {
        return Ext.createWidget({
            xtype: 'panel',
    
    
            x: 210, y: 80,
    
    
            width : 130,
            height: 170,
            rtl: rtl,
    
    
            title: 'Masked Panel',
    
    
            bodyPadding: 5,
            html       : 'Some content',
            animCollapse: true,
            collapsible: true
        });
    }
    
    
    function getFramedPanel () {
        return {
            xtype: 'panel',
    
    
            x: 350, y: 80,
    
    
            width : 170,
            height: 100,
            rtl: rtl,
    
    
            title: 'Framed Panel',
            animCollapse: true,
    
    
    //        dockedItems: [{
    //            dock: 'top',
    //            xtype: 'toolbar',
    //            items: [{
    //                text: 'test'
    //            }]
    //        }, {
    //            dock: 'right',
    //            xtype: 'toolbar',
    //            items: [{
    //                text: 'test B'
    //            }]
    //        }, {
    //            dock: 'left',
    //            xtype: 'toolbar',
    //            items: [{
    //                text: 'test A'
    //            }]
    //        }],
    
    
            html : 'Some content',
            frame: true
        };
    }
    
    
    function getCollapsedFramedPanel () {
        return {
            xtype: 'panel',
    
    
            x: 350, y: 190,
    
    
            width : 170,
            height: 60,
            rtl: rtl,
    
    
            title: 'Collapsed Framed Panel',
            animCollapse: true,
            bodyPadding: 5,
            bodyBorder: true,
            html       : 'Some content',
            frame      : true,
            collapsible: true,
            collapsed: true
        };
    }
    
    
    function getPanelWithToolbars () {
        /**
         * Toolbar with a menu
         */
        /*var xxxxxxx = Ext.createWidget('menu', {
            items: [
                {text: 'Menu item'},
                {text: 'Check 1', checked: true},
                {text: 'Check 2', checked: false},
                '-',
                {text: 'Option 1', checked: true,  group: 'opts'},
                {text: 'Option 2', checked: false, group: 'opts'},
                '-',
                {
                    text: 'Sub-items',
                    menu: Ext.createWidget('menu', {
                        items: [
                            {text: 'Item 1'},
                            {text: 'Item 2'}
                        ]
                    })
                }
            ]
        });*/
        return {
            xtype: 'panel',
            id: 'panelWithToolbars',
    
    
            x: 690, y: 80,
    
    
            width : 450,
            height: 170,
            rtl: rtl,
    
    
            title: 'Basic Panel With Toolbars',
            collapsible: true,
    
    
    //        tbar: {
    //            id: 'panelWithToolbars_tbar',
    //            items: [{
    //                xtype: 'buttongroup',
    //                title: 'Button Group',
    //                id: 'panelWithToolbars_btngroup',
    //                columns: 2,
    //                defaults: {
    //                    scale: 'small'
    //                },
    //                items: [
    //                    {
    //                        xtype:'splitbutton',
    //                        text: 'Menu Button',
    //                        iconCls: 'add16',
    //                        menu: [{text: 'Menu Button 1'}]
    //                    },
    //                    {
    //                        xtype:'splitbutton',
    //                        text: 'Cut',
    //                        icon: 'icons/cross.gif',
    //                        id: 'panelWithToolbars_splitbtn',
    //                        menu: [{text: 'Cut Menu Item'}]
    //                    }
    //                ]
    //            }]
    //        },
            tbar: {
                id: 'panelWithToolbars_bbar',
                items: [
                    'Toolbar &amp; Menus',
                    ' ',
                    '-',
                    {text: 'Button'},
                    {
                        text: 'Menu Button',
                        id  : 'menu-btn',
                        menu: [
                            {text: 'Menu item'},
                            {text: 'Check 1', checked: true},
                            {text: 'Check 2', checked: false},
                            '-',
                            {text: 'Option 1', checked: true,  group: 'opts'},
                            {text: 'Option 2', checked: false, group: 'opts'},
                            '-',
                            {
                                text: 'Sub-items',
                                menu: Ext.createWidget('menu', {
                                    items: [
                                        {text: 'Item 1'},
                                        {text: 'Item 2'}
                                    ]
                                })
                            }
                        ]
                    },
                    {
                        xtype: 'splitbutton',
                        text : 'Split Button',
                        menu : Ext.createWidget('menu', {
                            items: [
                                {text: 'Item 1'},
                                {text: 'Item 2'}
                            ]
                        })
                    },
                    {
                        xtype       : 'button',
                        enableToggle: true,
                        pressed     : true,
                        text        : 'Toggle Button'
                    }
                ]
    //        },
    //        lbar: {
    //            id: 'panelWithToolbars_lbar',
    //            items: [
    //                { text: 'Left' }
    //            ]
    //        },
    //        rbar: {
    //            id: 'panelWithToolbars_rbar',
    //            items: [
    //                { text: 'Right' }
    //            ]
            }
        };
    }
    
    
    function getFormWidgets () {
        return {
            xtype: 'form',
    
    
            id   : 'form-widgets',
            title: 'Form Widgets',
    
    
            x: 50, y: 260,
    
    
            width : 630,
            height: 700,
            rtl: rtl,
    
    
            frame: true,
            collapsible: true,
    
    
            tools: [
                {type:'toggle'},
                {type:'close'},
                {type:'minimize'},
                {type:'maximize'},
                {type:'restore'},
                {type:'gear'},
                {type:'pin'},
                {type:'unpin'},
                {type:'right'},
                {type:'left'},
                {type:'down'},
                {type:'refresh'},
                {type:'minus'},
                {type:'plus'},
                {type:'help'},
                {type:'search'},
                {type:'save'},
                {type:'print'}
            ],
    
    
            bodyPadding: '10 20',
    
    
            defaults: {
                anchor    : '98%',
                msgTarget : 'side',
                allowBlank: false
            },
    
    
            items: [
                {
                    xtype: 'label',
                    text : 'Plain Label'
                },
                {
                    fieldLabel: 'TextField',
                    xtype     : 'textfield',
                    name      : 'someField',
                    emptyText : 'Enter a value'
                },
                {
                    fieldLabel: 'ComboBox',
                    xtype: 'combo',
                    store: ['Foo', 'Bar']
                },
                {
                    fieldLabel: 'DateField',
                    xtype     : 'datefield',
                    name      : 'date'
                },
                {
                    fieldLabel: 'TimeField',
                    name: 'time',
                    xtype: 'timefield'
                },
                {
                    fieldLabel: 'NumberField',
                    xtype     : 'numberfield',
                    name      : 'number',
                    emptyText : '(This field is optional)',
                    allowBlank: true
                },
                {
                    fieldLabel: 'TextArea',
                    xtype     : 'textareafield',
                    name      : 'message',
                    cls       : 'x-form-valid',
                    value     : 'This field is hard-coded to have the "valid" style (it will require some code changes to add/remove this style dynamically)'
                },
                {
                    fieldLabel: 'Checkboxes',
                    xtype: 'checkboxgroup',
                    columns: [100,100],
                    items: [
                        {boxLabel: 'Foo', checked: true,id:'fooChk',inputId:'fooChkInput'},
                        {boxLabel: 'Bar'}
                    ]
                },
                {
                    fieldLabel: 'Radios',
                    xtype: 'radiogroup',
                    columns: [100,100],
                    items: [{boxLabel: 'Foo', checked: true, name: 'radios'},{boxLabel: 'Bar', name: 'radios'}]
                },
                {
                    hideLabel   : true,
                    id          : 'htmleditor',
                    xtype       : 'htmleditor',
                    name        : 'html',
                    enableColors: false,
                    value       : 'Mouse over toolbar for tooltips.<br /><br />The HTMLEditor IFrame requires a refresh between a stylesheet switch to get accurate colors.',
                    height      : 110
                },
                {
                    xtype : 'fieldset',
                    title : 'Plain Fieldset'
    //                items: [
    //                    {
    //                        hideLabel: true,
    //                        xtype: 'radiogroup',
    //                        items: [
    //                            {boxLabel: 'Radio A', checked: true, name: 'radiogrp2'},
    //                            {boxLabel: 'Radio B', name: 'radiogrp2'}
    //                        ]
    //                    }
    //                ]
                },
                {
                    xtype      : 'fieldset',
                    title      : 'Collapsible Fieldset',
                    collapsible: true
    //                items: [
    //                    { xtype: 'checkbox', boxLabel: 'Checkbox 1' },
    //                    { xtype: 'checkbox', boxLabel: 'Checkbox 2' }
    //                ]
                },
                {
                    xtype         : 'fieldset',
                    title         : 'Checkbox Fieldset',
                    checkboxToggle: true
    //                items: [
    //                    { xtype: 'radio', boxLabel: 'Radio 1', name: 'radiongrp1' },
    //                    { xtype: 'radio', boxLabel: 'Radio 2', name: 'radiongrp1' }
    //                ]
                }
            ],
    
    
            buttons: [
                {
                    text   :'Toggle Enabled',
                    handler: function() {
                        this.up('form').items.each(function(item) {
                            item.setDisabled(!item.disabled);
                        });
                    }
                },
                {
                    text   : 'Reset Form',
                    handler: function() {
                        Ext.getCmp('form-widgets').getForm().reset();
                    }
                },
                {
                    text   : 'Validate',
                    handler: function() {
                        Ext.getCmp('form-widgets').getForm().isValid();
                    }
                }
            ]
        };
    }
    
    
    function getBorderLayout() {
        return {
            xtype: 'panel',
    
    
            width : 450,
            height: 350,
            rtl: rtl,
    
    
            x: 690, y: 260,
    
    
            title : 'BorderLayout Panel',
            layout: {
                type: 'border',
                padding: 5
            },
            collapsible: true,
    
    
            defaults: {
                collapsible: true,
                split      : true
            },
    
    
            items: [
                {
                    title  : 'North',
                    region : 'north',
                    html   : 'North',
                    ctitle : 'North',
                    //margins: '5 5 0 5', // TRBL
                    height : 70
                },
                {
                    title       : 'South',
                    region      : 'south',
                    html        : 'South',
                    collapseMode: 'mini',
                    //margins     : '0 5 5 5', // TRBL
                    height      : 70
                },
                {
                    title       : 'West',
                    region      : 'west',
                    html        : 'West',
                    collapseMode: 'mini',
                    //margins     : '0 0 0 5', // TRBL
                    width       : 100
                },
                {
                    title  : 'East',
                    region : 'east',
                    html   : 'East',
                    //margins: '0 5 0 0', // TRBL
                    width  : 100
                },
                {
                    title      : 'Center',
                    region     : 'center',
                    collapsible: false,
                    html       : 'Center'
                }
            ]
        };
    }
    
    
    function getStore () {
         var myData = [
             ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
             ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
             ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
             ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
             ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
             ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
             ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
             ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
             ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
             ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am']
         ];
    
    
        return Ext.create('Ext.data.ArrayStore', {
            fields: [
               {name: 'company'},
               {name: 'price', type: 'float'},
               {name: 'change', type: 'float'},
               {name: 'pctChange', type: 'float'},
               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
            ],
            sorters: {
                property : 'company',
                direction: 'ASC'
            },
            data: myData,
            pageSize: 8
        });
    }
    
    
    function getGrid () {
        var store = getStore(),
            pagingBar = Ext.createWidget('pagingtoolbar', {
                store      : store,
                displayInfo: true,
                displayMsg : 'Displaying topics {0} - {1} of {2}'
            });
    
    
        return {
            xtype: 'gridpanel',
    
    
            height: 200,
            width : 450,
            rtl: rtl,
    
    
            x: 690, y: 620,
    
    
            title: 'GridPanel',
            collapsible: true,
            deferRowRender: useDeferRender,
    
    
            store: store,
    
    
            columns: [
                {header: "Company",      flex: 1, sortable: true, dataIndex: 'company'},
                {header: "Price",        width: 75,  sortable: true, dataIndex: 'price'},
                {header: "Change",       width: 75,  sortable: true, dataIndex: 'change'},
                {header: "% Change",     width: 75,  sortable: true, dataIndex: 'pctChange'},
                {header: "Last Updated", width: 85,  sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ],
            loadMask: true,
    
    
            viewConfig: {
                stripeRows: true
            },
    
    
            bbar: pagingBar,
            tbar: [
                {text: 'Toolbar'},
                '->',
                {
                    xtype: 'triggerfield',
                    trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
                    trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger'
                }
            ]
        };
    }
    
    
    function getAccordion () {
        var tree = Ext.create('Ext.tree.Panel', {
            title: 'TreePanel',
            deferRowRender: useDeferRender,
            root: {
                text: 'Root Node',
                expanded: true,
                children: [{
                    text: 'Item 1',
                    leaf: true
                }, {
                    text: 'Item 2',
                    leaf: true
                }, {
                    text: 'Folder',
                    children: [{
                        text: 'Item 3',
                        leaf: true
                    }]
                }]
            }
        });
    
    
        return {
            title : 'Accordion and TreePanel',
            collapsible: true,
            layout: 'accordion',
    
    
            x: 690, y: 830,
    
    
            width : 450,
            height: 240,
            rtl: rtl,
    
    
            bodyStyle: {
                'background-color': '#eee'
            },
    
    
            items: [
                tree, {
                    title: 'Item 2',
                    html: 'Some content'
                }, {
                    title: 'Item 3',
                    html : 'Some content'
                }
            ]
        };
    }
    
    
    function getTabs (config) {
        return Ext.apply({
            xtype: 'tabpanel',
    
    
            width : 310,
            height: 150,
            rtl: rtl,
    
    
            activeTab: 0,
    
    
            defaults: {
                bodyStyle: 'padding:10px;'
            },
    
    
            items: [
                {
                    title: 'Tab 1',
                    html : 'Free-standing tab panel'
                },
                {
                    title   : 'Tab 2',
                    closable: true
                },
                {
                    title   : 'Tab 3',
                    closable: true
                }
            ]
        }, config);
    }
    
    
    function getScrollingTabs () {
        return getTabs({
            x: 50, y: 970,
    
    
            enableTabScroll: true,
    
    
            items: [
                {
                    title: 'Tab 1',
                    html : 'Tab panel 1 content'
                },
                {
                    title: 'Tab 2',
                    html : 'Tab panel 2 content',
                    closable: true
                },
                {
                    title: 'Tab 3',
                    html : 'Tab panel 3 content',
                    closable: true
                },
                {
                    title: 'Tab 4',
                    html : 'Tab panel 4 content',
                    closable: true
                },
                {
                    title: 'Tab 5',
                    html : 'Tab panel 5 content',
                    closable: true
                },
                {
                    title: 'Tab 6',
                    html : 'Tab panel 6 content',
                    closable: true
                }
            ]
        });
    }
    
    
    function getPlainTabs () {
        return getTabs({
            plain: true,
            x    : 370, y: 970
        });
    }
    
    
    function getDatePicker () {
        return {
            xtype: 'panel',
    
    
            x: 50, y: 1130,
    
    
            border: false,
            width : 180,
            rtl: rtl,
    
    
            items: {
                xtype: 'datepicker'
            }
        };
    }
    
    
    function getProgressBar () {
        var progressbar = Ext.createWidget('progressbar', {
            value: 0.5
        });
    
    
        if (!hasOption('nopbar')) {
            setTimeout(function() {
                progressbar.wait({
                    text: 'Progress text...'
                });
            }, 7000);
        }
    
    
        return {
            xtype: 'panel',
            title: 'ProgressBar / Slider',
    
    
            x: 690, y: 1080,
    
    
            width: 450,
            height: 200,
            rtl: rtl,
    
    
            bodyPadding: 5,
            layout: {
                type : 'vbox',
                align: 'stretch'
            },
    
    
            items: [
                progressbar,
                {
                    xtype    : 'slider',
                    hideLabel: true,
                    value    : 50,
                    margin   : '5 0 0 0'
                },
                {
                    xtype   : 'slider',
                    vertical: true,
                    value   : 50,
                    height  : 100,
                    margin  : '5 0 0 0'
                }
            ]
        };
    }
    
    
    function getFramedGrid () {
        return {
            width:250,
            height:182,
            x: 430, y: 1130,
            rtl: rtl,
            xtype: 'grid',
            title: 'Framed Grid',
            collapsible: true,
            store: getStore(),
            multiSelect: true,
            emptyText: 'No images to display',
            deferRowRender: useDeferRender,
            frame: true,
            enableColumnMove: false,
            columns: [
                {header: "Company", flex:  1,   sortable: true, dataIndex: 'company'},
                {header: "Price",   width: 75,  sortable: true, dataIndex: 'price'},
                {header: "Change",  width: 75,  sortable: true, dataIndex: 'change'}
            ]
        };
    }
    
    
    function getBasicWindow () {
        return Ext.createWidget('window', {
            id: 'basicWindow',
            x: 530, y: 80,
            hidden: false,
            width   : 150,
            height  : 170,
            minWidth: 150,
            minHeight: 150,
            maxHeight: 170,
            rtl: rtl,
    
    
            title: 'Window',
    
    
            bodyPadding: 5,
            html       : 'Click Submit for Confirmation Msg.',
    
    
            collapsible: true,
            floating   : false,
            closable   : false,
            draggable  : false,
            resizable: { handles: 's' },
            animCollapse: true,
    
    
            tbar: [
                {text: 'Toolbar'}
            ],
            buttons: [
                {
                    text   : 'Submit',
                    id     : 'message_box',
                    handler: function() {
                        Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');
                    }
                }
            ]
        });
    }
    
    
    function addResizer () {
        var rszEl = Ext.getBody().createChild({
            style: 'background: transparent;',
            html: '<div style="padding:20px;">Resizable handles</div>'
        });
    
    
        rszEl.position('absolute', 1, 240, 1130);
        rszEl.setSize(180, 180);
        Ext.create('Ext.resizer.Resizer', {
            id: 'resizer',
            el: rszEl,
            handles: 'all',
            pinned: true
        });
    }
    
    
    function addFormWindow () {
        Ext.createWidget('window', {
            x: 690, y: 1290,
    
    
            width   : 450,
            // height  : 360,
            minWidth: 450,
            rtl: rtl,
    
    
            title: 'Window',
    
    
            bodyPadding: '5 5 0 5',
    
    
            collapsible: true,
            closable   : false,
            draggable  : false,
            resizable: { handles: 's' },
            animCollapse: true,
    
    
            items: [
                {
                    xtype : 'fieldset',
                    title : 'Plain Fieldset',
                    items: [
                        {
                            fieldLabel: 'TextField',
                            xtype     : 'textfield',
                            name      : 'someField',
                            emptyText : 'Enter a value',
                            anchor    : '100%'
                        },
                        {
                            fieldLabel: 'ComboBox',
                            xtype     : 'combo',
                            store     : ['Foo', 'Bar'],
                            anchor    : '100%'
                        },
                        {
                            fieldLabel: 'DateField',
                            xtype     : 'datefield',
                            name      : 'date',
                            anchor    : '100%'
                        },
                        {
                            fieldLabel: 'TimeField',
                            name      : 'time',
                            xtype     : 'timefield',
                            anchor    : '100%'
                        },
                        {
                            fieldLabel: 'NumberField',
                            xtype     : 'numberfield',
                            name      : 'number',
                            emptyText : '(This field is optional)',
                            allowBlank: true,
                            anchor    : '100%'
                        },
                        {
                            fieldLabel: 'TextArea',
                            xtype     : 'textareafield',
                            name      : 'message',
                            cls       : 'x-form-valid',
                            value     : 'This field is hard-coded to have the "valid" style (it will require some code changes to add/remove this style dynamically)',
                            anchor    : '100%'
                        },
                        {
                            fieldLabel: 'Checkboxes',
                            xtype: 'checkboxgroup',
                            columns: [100,100],
                            items: [
                                {boxLabel: 'Foo', checked: true,id:'winFooChk',inputId:'winFooChkInput'},
                                {boxLabel: 'Bar'}
                            ]
                        },
                        {
                            xtype: 'radiogroup',
                            columns: [100,100],
                            fieldLabel: 'Radio Group',
                            items: [
                                {boxLabel: 'Radio A', checked: true, name: 'radiogrp2'},
                                {boxLabel: 'Radio B', name: 'radiogrp2'}
                            ]
                        }
                    ]
                }
            ],
    
    
            buttons: [
                {
                    text   : 'Submit',
                    handler: function() {
                        Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');
                    }
                }
            ]
        }).show();
    }
    
    
    function doThemes (rtl) {
        var time = Ext.perf.getTimestamp(),
            maskedPanel;
    
    
        if (hasOption('nocss3')) {
            Ext.supports.CSS3BorderRadius = false;
            Ext.getBody().addCls('x-nbr x-nlg');
        }
    
    
        var items = [
            getBasicPanel(rtl),
    //        getCollapsedPanel(rtl),
            maskedPanel = getMaskedPanel(rtl),
            getFramedPanel(rtl),
    //        getCollapsedFramedPanel(rtl),
            getBasicWindow(rtl),
            getPanelWithToolbars(rtl),
            getFormWidgets(rtl),
            getBorderLayout(rtl),
            getGrid(rtl),
            getAccordion(rtl),
            getScrollingTabs(rtl),
            getPlainTabs(rtl),
            getDatePicker(rtl),
            getProgressBar(rtl),
            getFramedGrid(rtl)
        ];
    
    
        Ext.create('Ext.container.Viewport', {
            layout: 'absolute',
            autoScroll: true,
            items: items
        });
            
        addResizer();
        //addFormWindow();
    
    
        /**
         * Stylesheet Switcher
         */
        Ext.get('styleswitcher_select').on('change', function(e, select) {
            var name = select[select.selectedIndex].value,
                currentPath = window.location.pathname,
                isCurrent = currentPath.match(name);
            
            if (!isCurrent) {
                window.location = name;
            }
        });
    
    
        setTimeout(function() {
            maskedPanel.body.mask('Loading...');
            if (!hasOption('notips')) {
                Ext.QuickTips.init();
            }
        }, 2000);
    
    
        time = Ext.perf.getTimestamp() - time;
        Ext.log('total time: ' + Math.round(time));
    }
    
    
    Ext.onReady(function() {
        if (!hasOption('perf')) {
            useDeferRender = !hasOption('nodefer');
            if (hasOption('delay')) {
                setTimeout(doThemes, 1000);
            } else {
                doThemes();
            }
        } else {
            setTimeout(function () {
                var a = document.createElement('a');
                a.innerHTML = 'Perf Console';
                a.style.position = "absolute";
                a.style.left = "5px";
                a.style.top = "5px";
                a.href = 'javascript:void(window.open("../perf/perf-console.html","perfcon"))';
                document.body.appendChild(a);
    
    
                useDeferRender = hasOption('defer');
    
    
                Ext.Perf.setup();
                Ext.Perf.monitor('onReady', doThemes);
                Ext.Perf.report();
            }, 1000);
        }
    
    
        var end = new Date();
        var endhours = now.getHours();
        var endminutes = end.getMinutes();
        var endseconds = end.getSeconds();
        var endmilli = end.getMilliseconds();
        var date2 = new Date(2011,06,05,endhours,endminutes,endseconds,endmilli)
        var diffDays = Math.abs((date1.getTime() - date2.getTime())/1000);
        alert("Total Load and layout Time"+' ' +diffDays);
    
    
    });

  4. #124
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    577
    Vote Rating
    32
    aw1zard2 has a spectacular aura about aw1zard2 has a spectacular aura about

      0  

    Default


    First off did you do compares in time from just loading ext-all for 3.4 and 4.1? Also both themes.js isn't loading the same components so of course the time will be slower on 4.1. Ext.perf.Monitor didn't exist for 3.4 so it needs to be removed. And like I said you can't do a direct compare on the 2 cause of all the extra work 4.1 does to give a better flexibility. If you spend the time to get the same components loading with css and rule out the time the library needs to load then compare that, that will be the closer to true results difference between both library versions. Right now your still comparing apples to oranges. Also make sure IE8 is running in IE8 mode since you don't have any meta tags making sure that IE8 is set to standards mode and the IE8 document engine you would have to manually set them.

    Again I understand there is a difference in loading times but still your also loading more to get a better flexibility in 4.1 so it is very hard to do a direct comparison between them.

  5. #125
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    359
    Vote Rating
    16
    rich02818 will become famous soon enough

      0  

    Default


    I removed the performance monitor code from the 4.1 themes.js and ironically, the performance got slightly worse...now 52% slower than 3.4. I suspect that this is due to some deferred rendering occurring with perf monitor in place. At any rate, this appears to have nothing to do with the slowness.


    Again I understand there is a difference in loading times but still your also loading more to get a better flexibility in 4.1 so it is very hard to do a direct comparison between them.

    Saying 4.1 is more flexible does not excuse poor performance. 4.0 was supposed to be *faster* than 3.3 (which is much slower than 2.2) along with providing the new and better features. New features are of no use if the framework is too slow to deploy to end users on IE8. BTW, just to be clear: I truly want this to work. I began migrating my app from v3 to v4 and had to dump it and back up last year due to performance. We all *really* need v4 to be usable.

  6. #126
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    359
    Vote Rating
    16
    rich02818 will become famous soon enough

      0  

    Default


    I looked at the time required just to load ext-all.js and not render any components. v4.1.0 indeed takes almost twice as long as v3.4.0, however, removing this time and comparing just the time to then render the equivalent themes examples still shows 4.1.0 48% slower than 3.4.0. This is on IE8.

  7. #127
    Ext JS Premium Member
    Join Date
    Nov 2010
    Posts
    80
    Vote Rating
    2
    watermark is on a distinguished road

      0  

    Default


    We just spent a week and a half upgrading an app from 3.4 to 4.1 and it's nearly unusable in IE8. In 3.4, IE8 was (obviously) slower than FF and Chrome, but it was usable. Especially with how long this thread has been opened, it seems we have to throw out all of that time and move back to 3.4...

    Also tried the nightly rc snapshot for 4.1.1 and, if it's better, it's not noticeably better.

  8. #128
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    359
    Vote Rating
    16
    rich02818 will become famous soon enough

      0  

    Default


    @watermark How would you say the 4.1.1 snapshot performance compares with 3.4?

  9. #129
    Ext JS Premium Member
    Join Date
    Nov 2010
    Posts
    80
    Vote Rating
    2
    watermark is on a distinguished road

      0  

    Default


    @rich02818: I didn't run any numbers, but performance in 4.1.1 seems to be the same as 4.1...so compared to 3.4, 4.1.1 is unusably slow.

    1 example in particular:

    Tab panel
    - Tab Panel
    - - Tab Panel
    - - - Grid Panel

    That last Grid panel takes about 1-2 seconds to switch to (render) in 3.4, but in 4.1 (and 4.1.1) it takes about 6 seconds. I consider a 6 second wait time for a tab switch to be unusable.

  10. #130
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      1  

    Default


    So do I. There must be some other activity going on in that tab switch.

    Can you post some code?