Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #141
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    46
    Vote Rating
    3
    kbow is on a distinguished road

      0  

    Default


    Quote Originally Posted by karlsnyder0 View Post
    Ok, some progress on this. It appears that injecting suspendLayout, (un)suspendLayout and doLayout make IE7 and IE8 work much faster. So far we've only done this for our "field picker" component that is basically 2 TreePanels beside each other.

    Before: Approximately 40 seconds
    After: Approximately 1 second

    Yeah, a big difference!

    I'm creating a test case and sending this through Sencha Premium Support for some extra love. We're guessing that the adding of nodes is the problem here... which we'll encounter this on every one of our grids, too!
    Can you give an example of how you applied suspendLayout for performance gain?

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

      0  

    Default


    Quote Originally Posted by karlsnyder0 View Post
    Can we not confuse the issue here? The issue was reported as "[4.x] Serious performance issues under IE 8" and was describe as an application lag, NOT a load lag.

    It's nice to hear that the Sencha Build Tools are out there and that someone is using them but this isn't what this thread is about. This first post in this thread talks about application performance not initing Ext.
    Have you read the first post it says LOAD TIME.

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

      0  

    Default


    Quote Originally Posted by MrSparks View Post
    Originally posted here earlier today : http://www.sencha.com/forum/showthre...ues-under-IE-8

    Update, using EXTJS Example "EXTJS Theme" as the test case.


    I’m seeing serious performance issues under IE 8 using 4.0.0

    Using Chrome, EXTJS is lightning fast! (much faster than in EXTJS 3.3)

    Using FF 3.6, performance is not far off Chrome but I’m seeing a little performance degradation when layouts get more complex.

    Using IE 8, large layouts/apps are basically unusable.

    I've tried other Machines (VM's and Physical) and I'm still seeing the same performance problems under IE 8.

    See attached video...
    Part 1: EXTJS Theme running under 3.3 (8 seconds load time)
    Part 2: EXTJS Theme running under 4.0.0 (33 seconds load time)

    Hope this helps.
    Pretty sure that says load time. So how am I confusing the issues here? Plus you will need both load/init time with app performance time the suspendLayouts, and etc.

  4. #144
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    352
    Vote Rating
    14
    rich02818 is on a distinguished road

      0  

    Default


    This thread has mentioned both load and render performance problems. As I posted several weeks ago,:

    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.

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

      0  

    Default


    Quote Originally Posted by rich02818 View Post
    This thread has mentioned both load and render performance problems. As I posted several weeks ago,:

    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.
    Have you tried the suspendLayouts in 4.1 with that example to see what the difference is?

  6. #146
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    352
    Vote Rating
    14
    rich02818 is on a distinguished road

      0  

    Default


    Quote Originally Posted by aw1zard2 View Post
    Have you tried the suspendLayouts in 4.1 with that example to see what the difference is?
    No. I posted the code and would have hoped that Sencha would show us how to best use their new version in a attempt to get acceptable performance. They have the stated responsibility to improve performance until it is better than v3.4.

  7. #147
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,294
    Vote Rating
    121
    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


    As specific examples of this general category of performance can be produced, please spin off new threads for them.

    While we are still looking very hard at the overall performance question, sometimes these specific scenarios have specific solutions or workarounds. Rather than wait for general solutions in the framework, we can help solve use-case-specific problems here ... if focused examples can be created that illustrate the problem.

    What we have seen working with many customer examples is that most of the time their specific use case can be tuned to achieve acceptable performance. Often, though, this may require some external assistance or expertise.

    So, while there are performance optimizations needed in the framework and we continue to invest heavily to improve performance in general for 4.2, in the meantime, applications are not powerless to improve their situation in many cases.

    This is why we created the performance optimization guide and page analyzer. For further reading, please head over to http://www.sencha.com/blog/optimizin...-applications/ and try using the Page Analyzer (discussed in that blog post) to find places where suspend/resumeLayouts will be most helpful. As can be seen by a previous post in this thread, proper use of those calls can make a world of difference.

    Please keep posting examples where performance is suffering and we will continue to look for trends and patterns as well as help out where we can.
    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. #148
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    352
    Vote Rating
    14
    rich02818 is on a distinguished road

      0  

    Default


    @don Then perhaps you could look into the simple coded examples in this thread:

    http://www.sencha.com/forum/showthread.php?136886-Very-slow-Tab-Panel-performance-vs-3.4

    which document both loading and post-loading performance problems. Thanks.

    Quote Originally Posted by dongryphon View Post
    As specific examples of this general category of performance can be produced, please spin off new threads for them.

    While we are still looking very hard at the overall performance question, sometimes these specific scenarios have specific solutions or workarounds. Rather than wait for general solutions in the framework, we can help solve use-case-specific problems here ... if focused examples can be created that illustrate the problem.

    What we have seen working with many customer examples is that most of the time their specific use case can be tuned to achieve acceptable performance. Often, though, this may require some external assistance or expertise.

    So, while there are performance optimizations needed in the framework and we continue to invest heavily to improve performance in general for 4.2, in the meantime, applications are not powerless to improve their situation in many cases.

    This is why we created the performance optimization guide and page analyzer. For further reading, please head over to http://www.sencha.com/blog/optimizin...-applications/ and try using the Page Analyzer (discussed in that blog post) to find places where suspend/resumeLayouts will be most helpful. As can be seen by a previous post in this thread, proper use of those calls can make a world of difference.

    Please keep posting examples where performance is suffering and we will continue to look for trends and patterns as well as help out where we can.

  9. #149
    Sencha Premium Member karlsnyder0's Avatar
    Join Date
    Mar 2010
    Location
    Maryland, USA
    Posts
    82
    Vote Rating
    12
    karlsnyder0 is on a distinguished road

      0  

    Default


    FYI- Folks a new performance blog post by The Animal, check it out! http://www.sencha.com/blog/ext-js-4-1-performance

  10. #150
    Ext JS Premium Member
    Join Date
    Jul 2010
    Location
    UK
    Posts
    524
    Vote Rating
    29
    MrSparks has a spectacular aura about MrSparks has a spectacular aura about

      1  

    Default


    Ok so I've ran the numbers on the latest nightly build. Here are the results and the test app I've used to obtain them.

    There's been a lot of talk concerning how to optimise extjs 4.1 applications. The following simple app contains no custom code, everything is out of the box. I can't see how this can be optimised, especially as the same code runs much faster on 3.4.0 without any optimisations?

    Regards
    MrSparks

    EXTJS 4.1-20120703

    IE 8
    Run1 10.063 seconds : 125,180Kb
    Run2 13.609 seconds : 130,412Kb
    Run3 14.047 seconds : 131,816Kb
    Run4 13.219 seconds : 132,540Kb
    Run5 13.578 seconds : 132,364Kb

    Chrome 20.0.1132
    Run1 4.535 seconds : 66,444Kb
    Run2 2.496 seconds : 82,676Kb
    Run3 2.127 seconds : 95,860Kb
    Run4 2.202 seconds : 90,376Kb
    Run5 2.196 seconds : 90,612Kb

    EXTJS 3.4.0

    IE 8
    Run1 3.844 seconds : 75,692Kb
    Run2 3.703 seconds : 76,664Kb
    Run3 4.406 seconds : 78,052Kb
    Run4 4.438 seconds : 82,112Kb
    Run5 5.312 seconds : 82,488Kb

    Chrome 20.0.1132
    Run1 3.02 seconds : 66,812Kb
    Run2 1.075 seconds : 68,440Kb
    Run3 1.282 seconds : 67,740Kb
    Run4 1.245 seconds : 69,980Kb
    Run5 1.127 seconds : 70,292Kb

    Code:
    <html>
    <head>
    <title>Simple App EXTJS 4.1.1 RC2</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-RC2/resources/css/ext-all.css" />
    <style type="text/css">
    p {
        margin:5px;
    }
    .settings {
        background-image:url(/ext-4.1-RC2/examples/shared/icons/fam/folder_wrench.png);
    }
    .nav {
        background-image:url(/ext-4.1-RC2/examples/shared/icons/fam/folder_go.png);
    }
    .info {
        background-image:url(/ext-4.1-RC2/examples/shared/icons/fam/information.png);
    }
    </style>
    <script type="text/javascript" src="/ext-4.1-RC2/ext-all.js"></script>
    <script type="text/javascript" src="/ext-4.1-RC2/examples/shared/states.js"></script>
    
    
    <script type="text/javascript">
        Ext.require(['*']);
    
    
        Ext.onReady(function() {
    
    
            Ext.QuickTips.init();
    
    
            // NOTE: This is an example showing simple state management. During development,
            // it is generally best to disable state management as dynamically-generated ids
            // can change across page loads, leading to unpredictable results.  The developer
            // should ensure that stable state ids are set for stateful components in real apps.
            Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
            Ext.BLANK_IMAGE_URL = '/ext-4.1-RC2/resources/images/default/s.gif';
    
    
            var northTb = new Ext.create('Ext.toolbar.Toolbar', {
            region: 'north',
            xtype: 'button', 
                items: [
                        {
                            text: 'Button 1',
                            scale: 'medium',
                            width: 100,
                            handler: function(){
                                    Ext.getCmp('card-panel').getLayout().setActiveItem('tabPanel1');
                            }
                        },        
                        {
                            text: 'Button 2',
                            scale: 'medium',
                            width: 100,
                            handler: function(){
                                    Ext.getCmp('card-panel').getLayout().setActiveItem('tabPanel2');
                            }
                        },                
                        {
                            text: 'Button 3',
                            scale: 'medium',
                            width: 100,
                            handler: function(){
                                    Ext.getCmp('card-panel').getLayout().setActiveItem('tabPanel3');
                            }
                        },        
                        {
                            text: 'Button 4',
                            scale: 'medium',
                            width: 100,
                            handler: function(){
                                    Ext.getCmp('card-panel').getLayout().setActiveItem('tabPanel4');
                            }
                        },                
                        {
                            text: 'Button 5',
                            scale: 'medium',
                            width: 100,
                            handler: function(){
                                    Ext.getCmp('card-panel').getLayout().setActiveItem('tabPanel5');
                            }
                        },                
                        {
                            text: 'Button 6',
                            scale: 'medium',
                            width: 100,
                            handler: function(){
                                    Ext.getCmp('card-panel').getLayout().setActiveItem('tabPanel6');
                            }
                        },                
                        {
                            text: 'Button 7',
                            scale: 'medium',
                            width: 100,
                            handler: function(){
                                    Ext.getCmp('card-panel').getLayout().setActiveItem('tabPanel7');
                            }
                        }
                ]
            })
    
    
    
    
            var tstore1 = Ext.create('Ext.data.TreeStore', {
                proxy: {
                    type: 'ajax',
                    url: '/ext-4.1-RC2/examples/tree/check-nodes.json'
                },
                sorters: [{
                    property: 'leaf',
                    direction: 'ASC'
                }, {
                    property: 'text',
                    direction: 'ASC'
                }]
            });
        
            var tree1 = Ext.create('Ext.tree.Panel', {
                store: tstore1,
                rootVisible: false,
                useArrows: true,
                frame: true,
                title: 'Check Tree',
                width: 200,
                height: 250,
                dockedItems: [{
                    xtype: 'toolbar',
                    items: {
                        text: 'Get checked nodes',
                        handler: function(){
                            var records = tree.getView().getChecked(),
                                names = [];
                            
                            Ext.Array.each(records, function(rec){
                                names.push(rec.get('text'));
                            });
                            
                            Ext.MessageBox.show({
                                title: 'Selected Nodes',
                                msg: names.join('<br />'),
                                icon: Ext.MessageBox.INFO
                            });
                        }
                    }
                }]
            });
    
    
            var tstore2 = Ext.create('Ext.data.TreeStore', {
                proxy: {
                    type: 'ajax',
                    url: '/ext-4.1-RC2/examples/tree/check-nodes.json'
                },
                sorters: [{
                    property: 'leaf',
                    direction: 'ASC'
                }, {
                    property: 'text',
                    direction: 'ASC'
                }]
            });
        
            var tree2 = Ext.create('Ext.tree.Panel', {
                store: tstore2,
                rootVisible: false,
                useArrows: true,
                frame: true,
                title: 'Check Tree',
                width: 200,
                height: 250,
                dockedItems: [{
                    xtype: 'toolbar',
                    items: {
                        text: 'Get checked nodes',
                        handler: function(){
                            var records = tree.getView().getChecked(),
                                names = [];
                            
                            Ext.Array.each(records, function(rec){
                                names.push(rec.get('text'));
                            });
                            
                            Ext.MessageBox.show({
                                title: 'Selected Nodes',
                                msg: names.join('<br />'),
                                icon: Ext.MessageBox.INFO
                            });
                        }
                    }
                }]
            });
    
    
            
            var tstore3 = Ext.create('Ext.data.TreeStore', {
                proxy: {
                    type: 'ajax',
                    url: '/ext-4.1-RC2/examples/tree/check-nodes.json'
                },
                sorters: [{
                    property: 'leaf',
                    direction: 'ASC'
                }, {
                    property: 'text',
                    direction: 'ASC'
                }]
            });
        
            var tree3 = Ext.create('Ext.tree.Panel', {
                store: tstore3,
                rootVisible: false,
                useArrows: true,
                frame: true,
                title: 'Check Tree',
                width: 200,
                height: 250,
                dockedItems: [{
                    xtype: 'toolbar',
                    items: {
                        text: 'Get checked nodes',
                        handler: function(){
                            var records = tree.getView().getChecked(),
                                names = [];
                            
                            Ext.Array.each(records, function(rec){
                                names.push(rec.get('text'));
                            });
                            
                            Ext.MessageBox.show({
                                title: 'Selected Nodes',
                                msg: names.join('<br />'),
                                icon: Ext.MessageBox.INFO
                            });
                        }
                    }
                }]
            });
    
    
            var tstore4 = Ext.create('Ext.data.TreeStore', {
                proxy: {
                    type: 'ajax',
                    url: '/ext-4.1-RC2/examples/tree/check-nodes.json'
                },
                sorters: [{
                    property: 'leaf',
                    direction: 'ASC'
                }, {
                    property: 'text',
                    direction: 'ASC'
                }]
            });
        
            var tree4 = Ext.create('Ext.tree.Panel', {
                store: tstore4,
                rootVisible: false,
                useArrows: true,
                frame: true,
                title: 'Check Tree',
                width: 200,
                height: 250,
                dockedItems: [{
                    xtype: 'toolbar',
                    items: {
                        text: 'Get checked nodes',
                        handler: function(){
                            var records = tree.getView().getChecked(),
                                names = [];
                            
                            Ext.Array.each(records, function(rec){
                                names.push(rec.get('text'));
                            });
                            
                            Ext.MessageBox.show({
                                title: 'Selected Nodes',
                                msg: names.join('<br />'),
                                icon: Ext.MessageBox.INFO
                            });
                        }
                    }
                }]
            });
    
    
    
    
            var tstore5 = Ext.create('Ext.data.TreeStore', {
                proxy: {
                    type: 'ajax',
                    url: '/ext-4.1-RC2/examples/tree/check-nodes.json'
                },
                sorters: [{
                    property: 'leaf',
                    direction: 'ASC'
                }, {
                    property: 'text',
                    direction: 'ASC'
                }]
            });
        
            var tree5 = Ext.create('Ext.tree.Panel', {
                store: tstore5,
                rootVisible: false,
                useArrows: true,
                frame: true,
                title: 'Check Tree',
                width: 200,
                height: 250,
                dockedItems: [{
                    xtype: 'toolbar',
                    items: {
                        text: 'Get checked nodes',
                        handler: function(){
                            var records = tree.getView().getChecked(),
                                names = [];
                            
                            Ext.Array.each(records, function(rec){
                                names.push(rec.get('text'));
                            });
                            
                            Ext.MessageBox.show({
                                title: 'Selected Nodes',
                                msg: names.join('<br />'),
                                icon: Ext.MessageBox.INFO
                            });
                        }
                    }
                }]
            });
    
    
    
    
            Ext.define('Book1',{
                extend: 'Ext.data.Model',
                fields: [
                    // set up the fields mapping into the xml doc
                    // The first needs mapping, the others are very basic
                    {name: 'Author', mapping: 'ItemAttributes > Author'},
                    'Title', 'Manufacturer', 'ProductGroup'
                ]
            });
        
            // create the Data Store
            var store1 = Ext.create('Ext.data.Store', {
                model: 'Book1',
                autoLoad: true,
                proxy: {
                    // load using HTTP
                    type: 'ajax',
                    url: '/ext-4.1-RC2/examples/grid/sheldon.xml',
                    // the return will be XML, so lets set up a reader
                    reader: {
                        type: 'xml',
                        // records will have an "Item" tag
                        record: 'Item',
                        idProperty: 'ASIN',
                        totalRecords: '@total'
                    }
                }
            });
        
            // create the grid
            var grid1 = Ext.create('Ext.grid.Panel', {
                store: store1,
                height: 500,
                columns: [
                    {text: "Author", flex: 1, dataIndex: 'Author', sortable: true},
                    {text: "Title", width: 180, dataIndex: 'Title', sortable: true},
                    {text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
                    {text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
                ]
            });
    
    
            
            Ext.define('Book2',{
                extend: 'Ext.data.Model',
                fields: [
                    // set up the fields mapping into the xml doc
                    // The first needs mapping, the others are very basic
                    {name: 'Author', mapping: 'ItemAttributes > Author'},
                    'Title', 'Manufacturer', 'ProductGroup'
                ]
            });
        
            // create the Data Store
            var store2 = Ext.create('Ext.data.Store', {
                model: 'Book2',
                autoLoad: true,
                proxy: {
                    // load using HTTP
                    type: 'ajax',
                    url: '/ext-4.1-RC2/examples/grid/sheldon.xml',
                    // the return will be XML, so lets set up a reader
                    reader: {
                        type: 'xml',
                        // records will have an "Item" tag
                        record: 'Item',
                        idProperty: 'ASIN',
                        totalRecords: '@total'
                    }
                }
            });
        
            // create the grid
            var grid2 = Ext.create('Ext.grid.Panel', {
                store: store2,
                height: 500,
                columns: [
                    {text: "Author", flex: 1, dataIndex: 'Author', sortable: true},
                    {text: "Title", width: 180, dataIndex: 'Title', sortable: true},
                    {text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
                    {text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
                ]
            });
            
    
    
    
    
            Ext.define('Book3',{
                extend: 'Ext.data.Model',
                fields: [
                    // set up the fields mapping into the xml doc
                    // The first needs mapping, the others are very basic
                    {name: 'Author', mapping: 'ItemAttributes > Author'},
                    'Title', 'Manufacturer', 'ProductGroup'
                ]
            });
        
            // create the Data Store
            var store3 = Ext.create('Ext.data.Store', {
                model: 'Book3',
                autoLoad: true,
                proxy: {
                    // load using HTTP
                    type: 'ajax',
                    url: '/ext-4.1-RC2/examples/grid/sheldon.xml',
                    // the return will be XML, so lets set up a reader
                    reader: {
                        type: 'xml',
                        // records will have an "Item" tag
                        record: 'Item',
                        idProperty: 'ASIN',
                        totalRecords: '@total'
                    }
                }
            });
        
            // create the grid
            var grid3 = Ext.create('Ext.grid.Panel', {
                store: store3,
                height: 500,
                columns: [
                    {text: "Author", flex: 1, dataIndex: 'Author', sortable: true},
                    {text: "Title", width: 180, dataIndex: 'Title', sortable: true},
                    {text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
                    {text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
                ]
            });
            
            
            Ext.define('Book4',{
                extend: 'Ext.data.Model',
                fields: [
                    // set up the fields mapping into the xml doc
                    // The first needs mapping, the others are very basic
                    {name: 'Author', mapping: 'ItemAttributes > Author'},
                    'Title', 'Manufacturer', 'ProductGroup'
                ]
            });
        
            // create the Data Store
            var store4 = Ext.create('Ext.data.Store', {
                model: 'Book4',
                autoLoad: true,
                proxy: {
                    // load using HTTP
                    type: 'ajax',
                    url: '/ext-4.1-RC2/examples/grid/sheldon.xml',
                    // the return will be XML, so lets set up a reader
                    reader: {
                        type: 'xml',
                        // records will have an "Item" tag
                        record: 'Item',
                        idProperty: 'ASIN',
                        totalRecords: '@total'
                    }
                }
            });
        
            // create the grid
            var grid4 = Ext.create('Ext.grid.Panel', {
                store: store4,
                height: 500,
                columns: [
                    {text: "Author", flex: 1, dataIndex: 'Author', sortable: true},
                    {text: "Title", width: 180, dataIndex: 'Title', sortable: true},
                    {text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
                    {text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
                ]
            });
    
    
    
    
    
    
            var bd = Ext.getBody();
            // sample static data for the store
            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'],
                ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
                ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
                ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
                ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
                ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
                ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
                ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
                ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
                ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
                ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
                ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
                ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
                ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
                ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
                ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
                ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
                ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
                ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
                ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
            ];
        
            var ds = 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'},
                    // Rating dependent upon performance 0 = best, 2 = worst
                    {name: 'rating', type: 'int', convert: function(value, record) {
                        var pct = record.get('pctChange');
                        if (pct < 0) return 2;
                        if (pct < 1) return 1;
                        return 0;
                    }}
                ],
                data: myData
            });
        
        
            // example of custom renderer function
            function change(val){
                if(val > 0){
                    return '<span style="color:green;">' + val + '</span>';
                }else if(val < 0){
                    return '<span style="color:red;">' + val + '</span>';
                }
                return val;
            }
            // example of custom renderer function
            function pctChange(val){
                if(val > 0){
                    return '<span style="color:green;">' + val + '%</span>';
                }else if(val < 0){
                    return '<span style="color:red;">' + val + '%</span>';
                }
                return val;
            }
            
            // render rating as "A", "B" or "C" depending upon numeric value.
            function rating(v) {
                if (v == 0) return "A";
                if (v == 1) return "B";
                if (v == 2) return "C";
            }
        
        
            bd.createChild({tag: 'h2', html: 'Using a Grid with a Form'});
        
            /*
             * Here is where we create the Form
             */
            var gridForm = Ext.create('Ext.form.Panel', {
                id: 'company-form',
                frame: true,
                title: 'Company data',
                bodyPadding: 5,
                width: 750,
                layout: 'column',    // Specifies that the items will now be arranged in columns
        
                fieldDefaults: {
                    labelAlign: 'left',
                    msgTarget: 'side'
                },
        
                items: [{
                    columnWidth: 0.60,
                    xtype: 'gridpanel',
                    store: ds,
                    height: 400,
                    title:'Company Data',
        
                    columns: [
                        {
                            id       :'company',
                            text   : 'Company',
                            flex: 1,
                            sortable : true,
                            dataIndex: 'company'
                        },
                        {
                            text   : 'Price',
                            width    : 75,
                            sortable : true,
                            dataIndex: 'price'
                        },
                        {
                            text   : 'Change',
                            width    : 75,
                            sortable : true,
                            renderer : change,
                            dataIndex: 'change'
                        },
                        {
                            text   : '% Change',
                            width    : 75,
                            sortable : true,
                            renderer : pctChange,
                            dataIndex: 'pctChange'
                        },
                        {
                            text   : 'Last Updated',
                            width    : 85,
                            sortable : true,
                            renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                            dataIndex: 'lastChange'
                        },
                        {
                            text: 'Rating',
                            width: 30,
                            sortable: true,
                            renderer: rating,
                            dataIndex: 'rating'
                        }
                    ],
        
                    listeners: {
                        selectionchange: function(model, records) {
                            if (records[0]) {
                                this.up('form').getForm().loadRecord(records[0]);
                            }
                        }
                    }
                }, {
                    columnWidth: 0.4,
                    margin: '0 0 0 10',
                    xtype: 'fieldset',
                    title:'Company details',
                    defaults: {
                        width: 240,
                        labelWidth: 90
                    },
                    defaultType: 'textfield',
                    items: [{
                        fieldLabel: 'Name',
                        name: 'company'
                    },{
                        fieldLabel: 'Price',
                        name: 'price'
                    },{
                        fieldLabel: '% Change',
                        name: 'pctChange'
                    },{
                        xtype: 'datefield',
                        fieldLabel: 'Last Updated',
                        name: 'lastChange'
                    }, {
                        xtype: 'radiogroup',
                        fieldLabel: 'Rating',
                        columns: 3,
                        defaults: {
                            name: 'rating' //Each radio has the same name so the browser will make sure only one is checked at once
                        },
                        items: [{
                            inputValue: '0',
                            boxLabel: 'A'
                        }, {
                            inputValue: '1',
                            boxLabel: 'B'
                        }, {
                            inputValue: '2',
                            boxLabel: 'C'
                        }]
                    }]
                }]
               
            });
    
    
    
    
    
    
    
    
    
    
    
    
            Ext.define('example.contact1', {
                extend: 'Ext.data.Model',
                fields: [
                    {name: 'first', mapping: 'name > first'},
                    {name: 'last', mapping: 'name > last'},
                    'company', 'email', 'state',
                    {name: 'dob', type: 'date', dateFormat: 'm/d/Y'}
                ]
            });
        
            Ext.define('example.fielderror1', {
                extend: 'Ext.data.Model',
                fields: ['id', 'msg']
            });
        
            var formPanel1 = Ext.create('Ext.form.Panel', {
                frame: true,
                title:'XML Form',
                width: 340,
                bodyPadding: 5,
                waitMsgTarget: true,
        
                fieldDefaults: {
                    labelAlign: 'right',
                    labelWidth: 85,
                    msgTarget: 'side'
                },
        
                // configure how to read the XML data
                reader : Ext.create('Ext.data.reader.Xml', {
                    model: 'example.contact1',
                    record : 'contact',
                    successProperty: '@success'
                }),
        
                // configure how to read the XML errors
                errorReader: Ext.create('Ext.data.reader.Xml', {
                    model: 'example.fielderror1',
                    record : 'field',
                    successProperty: '@success'
                }),
        
                items: [{
                    xtype: 'fieldset',
                    title: 'Contact Information',
                    defaultType: 'textfield',
                    defaults: {
                        width: 280
                    },
                    items: [{
                            fieldLabel: 'First Name',
                            emptyText: 'First Name',
                            name: 'first'
                        }, {
                            fieldLabel: 'Last Name',
                            emptyText: 'Last Name',
                            name: 'last'
                        }, {
                            fieldLabel: 'Company',
                            name: 'company'
                        }, {
                            fieldLabel: 'Email',
                            name: 'email',
                            vtype:'email'
                        }, {
                            xtype: 'combobox',
                            fieldLabel: 'State',
                            name: 'state',
                            store: Ext.create('Ext.data.ArrayStore', {
                                fields: ['abbr', 'state'],
                                data : Ext.example.states // from states.js
                            }),
                            valueField: 'abbr',
                            displayField: 'state',
                            typeAhead: true,
                            queryMode: 'local',
                            emptyText: 'Select a state...'
                        }, {
                            xtype: 'datefield',
                            fieldLabel: 'Date of Birth',
                            name: 'dob',
                            allowBlank: false,
                            maxValue: new Date()
                        }
                    ]
                }],
        
                buttons: [{
                    text: 'Load',
                    handler: function(){
                        formPanel1.getForm().load({
                            url: '/ext-4.1-RC2/examples/form/xml-form-data.xml',
                            waitMsg: 'Loading...'
                        });
                    }
                }, {
                    text: 'Submit',
                    disabled: true,
                    formBind: true,
                    handler: function(){
                        this.up('form').getForm().submit({
                            url: 'xml-form-errors.xml',
                            submitEmptyText: false,
                            waitMsg: 'Saving Data...'
                        });
                    }
                }]
            });
    
    
    
    
            
            Ext.define('example.contact2', {
                extend: 'Ext.data.Model',
                fields: [
                    {name: 'first', mapping: 'name > first'},
                    {name: 'last', mapping: 'name > last'},
                    'company', 'email', 'state',
                    {name: 'dob', type: 'date', dateFormat: 'm/d/Y'}
                ]
            });
        
            Ext.define('example.fielderror2', {
                extend: 'Ext.data.Model',
                fields: ['id', 'msg']
            });
        
            var formPanel2 = Ext.create('Ext.form.Panel', {
                frame: true,
                title:'XML Form',
                width: 340,
                bodyPadding: 5,
                waitMsgTarget: true,
        
                fieldDefaults: {
                    labelAlign: 'right',
                    labelWidth: 85,
                    msgTarget: 'side'
                },
        
                // configure how to read the XML data
                reader : Ext.create('Ext.data.reader.Xml', {
                    model: 'example.contact2',
                    record : 'contact',
                    successProperty: '@success'
                }),
        
                // configure how to read the XML errors
                errorReader: Ext.create('Ext.data.reader.Xml', {
                    model: 'example.fielderror2',
                    record : 'field',
                    successProperty: '@success'
                }),
        
                items: [{
                    xtype: 'fieldset',
                    title: 'Contact Information',
                    defaultType: 'textfield',
                    defaults: {
                        width: 280
                    },
                    items: [{
                            fieldLabel: 'First Name',
                            emptyText: 'First Name',
                            name: 'first'
                        }, {
                            fieldLabel: 'Last Name',
                            emptyText: 'Last Name',
                            name: 'last'
                        }, {
                            fieldLabel: 'Company',
                            name: 'company'
                        }, {
                            fieldLabel: 'Email',
                            name: 'email',
                            vtype:'email'
                        }, {
                            xtype: 'combobox',
                            fieldLabel: 'State',
                            name: 'state',
                            store: Ext.create('Ext.data.ArrayStore', {
                                fields: ['abbr', 'state'],
                                data : Ext.example.states // from states.js
                            }),
                            valueField: 'abbr',
                            displayField: 'state',
                            typeAhead: true,
                            queryMode: 'local',
                            emptyText: 'Select a state...'
                        }, {
                            xtype: 'datefield',
                            fieldLabel: 'Date of Birth',
                            name: 'dob',
                            allowBlank: false,
                            maxValue: new Date()
                        }
                    ]
                }],
        
                buttons: [{
                    text: 'Load',
                    handler: function(){
                        formPanel2.getForm().load({
                            url: '/ext-4.1-RC2/examples/form/xml-form-data.xml',
                            waitMsg: 'Loading...'
                        });
                    }
                }, {
                    text: 'Submit',
                    disabled: true,
                    formBind: true,
                    handler: function(){
                        this.up('form').getForm().submit({
                            url: 'xml-form-errors.xml',
                            submitEmptyText: false,
                            waitMsg: 'Saving Data...'
                        });
                    }
                }]
            });
    
    
    
    
            var tabPanel1 = Ext.create('Ext.tab.Panel', {
                    id: 'tabPanel1',
                    html: 'Panel 1',
                    deferredRender: false,
                    activeTab: 0,     // first tab initially active
                    items: [
                        {
                            title: 'Close Me',
                            closable: true,
                            html: 'Panel 1',
                            autoScroll: true,
                            items:[
                                gridForm
                            ]
                        },
                        {
                            title: 'Center Panel 1',
                            autoScroll: true,
                            items:[
                                grid1
                            ]
                        },
                        {
                            title: 'Center Panel 2',
                            autoScroll: true,
                            items:[
                                formPanel1
                            ]
                        },
                        {
                            title: 'Center Panel 3',
                            autoScroll: true,
                            items:[
                                grid2
                            ]
                        },
                        {
                            title: 'Center Panel 4',
                            autoScroll: true,
                            items:[
                                grid3
                            ]
                        },
                        {
                            title: 'Center Panel 5',
                            autoScroll: true,
                            items:[
                                grid4
                            ]
                        },
                        {
                            title: 'Center Panel 6',
                            autoScroll: true,
                            items:[
                                formPanel2
                            ]
                        },
                        {
                            title: 'Center Panel 7',
                            autoScroll: true,
                            items:[
                                {
                                    contentEl: 'center7'
                                }
                            ]
                        }
                    ]
                });
                
            var tabPanel2 = Ext.create('Ext.tab.Panel', {
                    id: 'tabPanel2',
                    
                    deferredRender: true,
                    activeTab: 0,     // first tab initially active
                    items: [
                        {
                            title: 'Close Me',
                            closable: true,
                            layout: 'border',
                            html: 'Panel 2',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center p 2'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        },
                        {
                            title: 'Center Panel 1',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 2',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 3',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 4',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 5',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 6',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 7',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        }
                    ]
                });
    
    
            var tabPanel3 = Ext.create('Ext.tab.Panel', {
                    id: 'tabPanel3',
                    deferredRender: true,
                    activeTab: 0,     // first tab initially active
                    items: [
                        {
                            title: 'Close Me',
                            closable: true,
                            html: 'Panel 3',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center p 3'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 1',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 2',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 3',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 4',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 5',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 6',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 7',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        }
                    ]
                });
            
            var tabPanel4 = Ext.create('Ext.tab.Panel', {
                    id: 'tabPanel4',
                    deferredRender: true,
                    activeTab: 0,     // first tab initially active
                    items: [
                        {
                            title: 'Close Me',
                            closable: true,
                            html: 'Panel 4',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center p 4'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 1',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 2',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 3',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 4',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 5',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 6',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 7',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        }
                    ]
                });
                
            var tabPanel5 = Ext.create('Ext.tab.Panel', {
                    id: 'tabPanel5',
                    deferredRender: true,
                    activeTab: 0,     // first tab initially active
                    items: [
                        {
                            title: 'Close Me',
                            closable: true,
                            html: 'Panel 5',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center p 5'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 1',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 2',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 3',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 4',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 5',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                                
                            ]
                        },
                        {
                            title: 'Center Panel 6',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        },
                        {
                            title: 'Center Panel 7',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        }
                    ]
                });
            
            var tabPanel6 = Ext.create('Ext.tab.Panel', {
                    id: 'tabPanel6',
                    deferredRender: true,
                    activeTab: 0,     // first tab initially active
                    items: [
                        {
                            title: 'Close Me',
                            closable: true,
                            html: 'Panel 6',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center p 6'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        },
                        {
                            title: 'Center Panel 1',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        },
                        {
                            title: 'Center Panel 2',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        },
                        {
                            title: 'Center Panel 3',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        },
                        {
                            title: 'Center Panel 4',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        },
                        {
                            title: 'Center Panel 5',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        },
                        {
                            title: 'Center Panel 6',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        },
                        {
                            title: 'Center Panel 7',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        }
                    ]
                });
                
            var tabPanel7 = Ext.create('Ext.tab.Panel', {
                    id: 'tabPanel7',
                    deferredRender: true,
                    activeTab: 0,     // first tab initially active
                    items: [
                        {
                            title: 'Close Me',
                            closable: true,
                            html: 'Panel 7',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center p 7'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        },
                        {
                            title: 'Center Panel 1',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        },
                        {
                            title: 'Center Panel 2',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        },
                        {
                            title: 'Center Panel 3',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        },
                        {
                            title: 'Center Panel 4',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        },
                        {
                            title: 'Center Panel 5',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        },
                        {
                            title: 'Center Panel 6',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        },
                        {
                            title: 'Center Panel 7',
                            autoScroll: true,
                            items:[
                                {
                                    xtype: 'panel',
                                    region: 'north',
                                    html: 'north'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'test',
                                    region: 'center',
                                    html: 'center'
                                
                                },
                                {
                                    xtype: 'panel',
                                    region: 'south',
                                    html: 'south'
                                }
                            ]
                        }
                    ]
                });
            
            var cardPanel = Ext.create('Ext.Panel', {
                region: 'center',
                id: 'card-panel',
                layout: 'card',
                border: false,
                margins: '0 0 0 2',
                activeItem: 0,
                layout: 'card',
                name: 'test',
                items:[
                    tabPanel1,
                    tabPanel2,
                    tabPanel3,
                    tabPanel4,
                    tabPanel5,
                    tabPanel6,
                    tabPanel7
                    
                ]
            
            })
            
            
            var viewport = Ext.create('Ext.Viewport', {
                id: 'border-example',
                layout: 'border',
                items: [
                   {
                        region: 'north',
                        height: 38,
                        items:[
                            northTb
                        ]    
                }, {
                    // lazily created panel (xtype:'panel' is default)
                    region: 'south',
                    split: true,
                    height: 100,
                    minSize: 100,
                    maxSize: 200,
                    collapsible: true,
                    collapsed: true,
                    title: 'South',
                    margins: '0 0 0 0'
                }, {
                    xtype: 'tabpanel',
                    region: 'east',
                    title: 'East Side',
                    dockedItems: [{
                        dock: 'top',
                        xtype: 'toolbar',
                        items: [ '->', {
                           xtype: 'button',
                           text: 'test',
                           tooltip: 'Test Button'
                        }]
                    }],
                    animCollapse: true,
                    collapsible: true,
                    split: true,
                    width: 225, // give east and west regions a width
                    minSize: 175,
                    maxSize: 400,
                    margins: '0 5 0 0',
                    activeTab: 2,
                    tabPosition: 'bottom',
                    items: [{
                        html: '<p>A TabPanel component can be a region.</p>',
                        title: 'A Tab',
                        autoScroll: true
                    },{
                        html: '<p>A TabPanel component can be a region.</p>',
                        title: 'A Tab',
                        autoScroll: true
                    }, Ext.create('Ext.grid.PropertyGrid', {
                            title: 'Property Grid',
                            closable: true,
                            source: {
                                "(name)": "Properties Grid",
                                "grouping": false,
                                "autoFitColumns": true,
                                "productionQuality": false,
                                "created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
                                "tested": false,
                                "version": 0.01,
                                "borderWidth": 1
                            }
                        })]
                }, {
                    region: 'west',
                    stateId: 'navigation-panel',
                    id: 'west-panel', // see Ext.getCmp() below
                    title: 'West',
                    split: true,
                    width: 200,
                    minWidth: 175,
                    maxWidth: 400,
                    collapsible: true,
                    animCollapse: true,
                    margins: '0 0 0 5',
                    layout: 'accordion',
                    items: [{
                        title: 'Navigation',
                        iconCls: 'nav',
                        items:[
                            tree1
                        ]
                    }, {
                        title: 'Settings',
                        iconCls: 'settings',
                        items:[
                            tree2
                        ]
                    }, {
                        title: 'Advanced',
                         iconCls: 'settings',
                        items:[
                            tree3
                        ]
                    }, {
                        title: 'Misc',
                        iconCls: 'settings',
                        items:[
                            tree4
                        ]
                    }, {
                        title: 'Admin',
                        iconCls: 'settings',
                        items:[
                            tree5
                        ]
                    }
                    
                    ]
                },
                    cardPanel
               ]
            });
           
                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);
            
            
        });
        </script>
    </head>
    <body>
        <div id="center7" class="x-hide-display">
            <a id="hideit" href="#">Toggle the west region</a>
            <p>My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>
            <p>The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
            <p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
            <p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
            <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
            <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
            <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
            <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
        </div>
       
    </body>
    </html>