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.

  1. #1
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    8
    Vote Rating
    0
    SachinN is on a distinguished road

      0  

    Default Unanswered: slow performance of container during layout updation

    Unanswered: slow performance of container during layout updation


    /***************************************************************************
    Below code will create sub panels(lets say 200 or more ) inside main outer container at run time. now when users scroll the main outer container "subpanel" which is visible to user & within the region of main container is loaded with new data("html" or other)

    Now, the problem is that when "subpanel" childs( let say panel, 3 level nested ) perfom any updation ( expand | collapse or other ) it takes too much time to perform layout updation.

    Please, provide any suitable solution.
    *****************************************************************************/



    Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.panel.Panel',


    autoRender: true,
    autoShow: true,
    height: 800,
    id: 'mypnl',
    autoScroll: true,
    title: 'My Panel',


    initComponent: function() {
    var me = this;


    me.addEvents(
    'scroll'
    );


    Ext.applyIf(me, {
    listeners: {
    afterrender: {
    fn: me.onPanelAfterRender,
    scope: me
    },
    scroll: {
    fn: me.onMypnlScroll,
    scope: me
    }
    }
    });


    me.callParent(arguments);
    },


    onPanelAfterRender: function(abstractcomponent, options) {
    var LMe = this;


    this.getTargetEl().on( 'scroll', function( e, t, opt ){
    this.fireEvent( 'scroll', function( LMe, e, t, opts){} );
    }, this);
    Ext.Container.prototype.bufferResize = false;
    abstractcomponent.load( abstractcomponent );


    },


    onMypnlScroll: function(eventOptions) {
    /*this.getTargetEl().on( 'scroll', function( e, t, opt ){
    console.log( "scrolled" );
    fireEvent( String eventName, Object... args ) :
    }, this);*/
    },


    load: function(abstractcomponent ) {
    var LMe = this;


    var LDATA = '<pre><code>.video {' +
    'position: relative;'
    +'padding-bottom: 56.25%;'
    +'height: 0;'
    +'overflow: hidden;'
    +'}'
    +'.video iframe, '
    +'.video object, '
    +'.video embed {'
    +'position: absolute;'
    +'top: 0;'
    +'left: 0;'
    +'width: 100%;'
    +'height: 100%;'
    +'}</code></pre>';


    //Get Region
    var LViewPortRegion = LMe.getEl().getRegion( );
    console.log( LViewPortRegion );


    var LMainRegion = Ext.get('mypnl').getRegion( );
    console.log( LMainRegion );


    Ext.suspendLayouts();


    for( var i=0; i< 100; i++ ){


    var LRecPanel = Ext.create('Ext.panel.Panel', {
    title: 'Hello' + i,
    data: LDATA,
    collapsible: true,
    width:600,
    titleCollapse: true,
    id: i,
    html: '<p>World!</p>' + i,
    listeners:{
    afterrender:function( panel, eopts ){
    var LTempRegion = panel.getEl().getRegion( );


    console.log( panel.title + "::" + LMainRegion.contains( LTempRegion ) );
    panel.on( 'onvisible', function( ){
    //LRecPanel.setTitle( "dddddddddd" );
    LMe.unregisterChild( 'onvisible', panel );
    panel.update( "<div>skajkdaj kldask dkasj dklaskd jaskdjk asjdklajsd asjkdjas kjdasjdjas kjas jasjd</div>" );
    //alert("visible");
    } );


    }
    }
    });


    LRecPanel = LMe.GetPanel();


    LRecPanel.addEvents( 'onvisible' );
    LMe.registerChild( 'onvisible', LRecPanel );
    abstractcomponent.add( LRecPanel );








    }
    Ext.resumeLayouts( true );


    LMe.on( 'scroll', function( e, t, opt ){
    Ext.Object.each( LMe.registeredChild, function( p_key, p_obj, regChiilds ){
    console.log( p_key + "::" + p_obj.title );
    p_obj.fireEvent( 'onvisible', p_obj, LMe );
    } );
    } );
    /*
    this.getTargetEl().on( 'scroll', function( e, t, opt ){


    console.log( "*************************************************************************************" );
    abstractcomponent.items.each( function( p1, p2, p3 ){
    console.log( p1 + "::" + p2 + "::" + p3 );
    var LTempRegion = p1.getEl().getRegion( );


    console.log( p1.title + "::" + LMainRegion.contains( LTempRegion ) );
    } );
    }, this);
    */
    },


    constructor: function() {
    this.registeredChild = {};
    this.callParent( arguments );
    },


    registerChild: function(p_Event, p_Panel) {
    var LMe = this;


    LMe.registeredChild[ p_Panel.id ] = p_Panel;
    },


    unregisterChild: function(p_Child) {
    var LMe = this;


    p_Child.removeListener( 'onvisible', function(){} );
    delete( LMe.registeredChild[ p_Child.id ] );
    },


    GetPanel: function(GetPanel) {
    var me = this;
    return Ext.create( 'Ext.panel.Panel', {
    style: {
    border: '1px solid #00dcdd',
    margin: "10"
    },
    border: 1,
    width: 600,
    margin: '20 10',
    layout: {
    align: 'stretch',
    type: 'hbox'
    },
    items: [
    {
    xtype: 'container',
    width: 100,
    autoScroll: true,
    layout: {
    align: 'stretch',
    type: 'vbox'
    }
    },
    {
    xtype: 'panel',
    flex: 1,
    border: 1,
    style: {
    border: '1px solid #00dcdd'
    },
    layout: {
    align: 'stretch',
    type: 'vbox'
    },
    animCollapse: false,
    manageHeight: false,
    items: [
    {
    xtype: 'container',
    flex: 1,
    minHeight: 50,
    style: {
    border: '1px solid #00dcdd'
    }
    },
    {
    xtype: 'container',
    flex: 1,
    minHeight: 50,
    style: {
    border: '1px solid #00dcdd'
    }
    },
    {
    xtype: 'container',
    flex: 1,
    minHeight: 50,
    style: {
    border: '1px solid #00dcdd'
    }
    },
    {
    xtype: 'panel',
    flex: 1,
    minHeight: 100,
    style: {
    border: '1px solid #00dcdd'
    },
    animCollapse: false,
    collapsible: true,
    title: 'My Panel',
    titleCollapse: true
    }
    ]
    }
    ]
    });
    }


    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,519
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Your code isn't legible, can you use BBCode CODE tags so it keeps the indention so I can read it easier?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    8
    Vote Rating
    0
    SachinN is on a distinguished road

      0  

    Default reposted using BBCode

    reposted using BBCode



    HTML Code:
     /*
    Below  code will create sub panels(lets say 200 or more ) inside main outer  container at run time. now when users scroll the main outer container  "subpanel" which is visible to user & within the region of main  container is loaded with new data("html" or other)
    
    Now, the  problem is that when "subpanel" childs( let say panel, 3 level nested )  perfom any updation ( expand | collapse or other ) it takes too much  time to perform layout updation.In brief,
    
    Please, provide any suitable solution.
    */
    
    Ext.define('MyApp.view.MyPanel', {
        extend: 'Ext.panel.Panel',
    
        autoRender: true,
        autoShow: true,
        height: 800,
        id: 'mypnl',
        autoScroll: true,
        title: 'My Panel',
    
        initComponent: function() {
            var me = this;
    
            me.addEvents(
                'scroll'
            );
    
            Ext.applyIf(me, {
                listeners: {
                    afterrender: {
                        fn: me.onPanelAfterRender,
                        scope: me
                    },
                    scroll: {
                        fn: me.onMypnlScroll,
                        scope: me
                    }
                }
            });
    
            me.callParent(arguments);
        },
    
        onPanelAfterRender: function(abstractcomponent, options) {
            var LMe = this;
    
            this.getTargetEl().on( 'scroll', function( e, t, opt ){   
                this.fireEvent( 'scroll', function( LMe, e, t, opts){} );     
            }, this);
            Ext.Container.prototype.bufferResize = false;
            abstractcomponent.load( abstractcomponent );
    
        },
    
        onMypnlScroll: function(eventOptions) {
            /*this.getTargetEl().on( 'scroll', function( e, t, opt ){ 
            console.log( "scrolled" );   
            fireEvent( String eventName, Object... args ) :
            }, this);*/
        },
    
        load: function(abstractcomponent ) {
            var LMe = this;
    
            var LDATA = '<pre><code>.video {' +
                'position: relative;'
                +'padding-bottom: 56.25%;'
                +'height: 0;'
                +'overflow: hidden;'
            +'}'
            +'.video iframe,  '
            +'.video object,  '
            +'.video embed {'
                +'position: absolute;'
                +'top: 0;'
                +'left: 0;'
                +'width: 100%;'
                +'height: 100%;'
            +'}</code></pre>';
    
            //Get Region
            var LViewPortRegion = LMe.getEl().getRegion( );
            console.log( LViewPortRegion );
    
            var LMainRegion = Ext.get('mypnl').getRegion( );
            console.log( LMainRegion );
    
            Ext.suspendLayouts();
    
            for( var i=0; i< 100; i++ ){
    
                var LRecPanel = Ext.create('Ext.panel.Panel', {
                    title: 'Hello' + i,
                    data: LDATA,
                    collapsible: true,
                    width:600,
                    titleCollapse: true,
                    id: i,
                    html: '<p>World!</p>' + i,
                    listeners:{
                        afterrender:function( panel, eopts ){
                            var LTempRegion = panel.getEl().getRegion( );
    
                            console.log( panel.title + "::" + LMainRegion.contains( LTempRegion ) );  
                            panel.on( 'onvisible', function( ){       
                                //LRecPanel.setTitle( "new title" );
                                LMe.unregisterChild( 'onvisible', panel ); 
                                 panel.update( "<div>this is updatred data....</div>" ); 
                                //alert("visible");        
                            } );
    
                        }
                    }
                });
                LRecPanel = LMe.GetPanel();
                LRecPanel.addEvents( 'onvisible' );
                LMe.registerChild( 'onvisible', LRecPanel );
                abstractcomponent.add( LRecPanel ); 
            }
            Ext.resumeLayouts( true );
    
            LMe.on( 'scroll', function( e, t, opt ){ 
                Ext.Object.each( LMe.registeredChild, function( p_key, p_obj, regChiilds ){
                    console.log( p_key + "::" +  p_obj.title );
                    p_obj.fireEvent( 'onvisible', p_obj, LMe );  
                } );      
            } );   
            /*
            this.getTargetEl().on( 'scroll', function( e, t, opt ){ 
            abstractcomponent.items.each( function( p1, p2, p3 ){       
            var LTempRegion = p1.getEl().getRegion( );
            console.log( p1.title + "::" + LMainRegion.contains( LTempRegion ) );   
            } );   
            }, this);
            */
        },
    
        constructor: function() {
            this.registeredChild = {};
            this.callParent( arguments );
        },
    
        registerChild: function(p_Event, p_Panel) {
            var LMe = this;
    
            LMe.registeredChild[ p_Panel.id ] = p_Panel;
        },
    
        unregisterChild: function(p_Child) {
            var LMe = this;
    
            p_Child.removeListener( 'onvisible', function(){} );
            delete( LMe.registeredChild[ p_Child.id ] );
        },
    
        GetPanel: function(GetPanel) {
            var me = this;
            return Ext.create( 'Ext.panel.Panel', {
                style: {
                    border: '1px solid #00dcdd',
                    margin: "10"
                }, 
                border: 1,
                width: 600,
                margin: '20 10',
                layout: {
                    align: 'stretch',
                    type: 'hbox'
                },
                items: [
                {
                    xtype: 'container',
                    width: 100,
                    autoScroll: true,
                    layout: {
                        align: 'stretch',
                        type: 'vbox'
                    }
                },
                {
                    xtype: 'panel',
                    flex: 1,
                    border: 1,
                    style: {
                        border: '1px solid #00dcdd'
                    },
                    layout: {
                        align: 'stretch',
                        type: 'vbox'
                    },
                    animCollapse: false,
                    manageHeight: false,
                    items: [
                    {
                        xtype: 'container',
                        flex: 1,
                        minHeight: 50,
                        style: {
                            border: '1px solid #00dcdd'
                        }
                    },
                    {
                        xtype: 'container',
                        flex: 1,
                        minHeight: 50,
                        style: {
                            border: '1px solid #00dcdd'
                        }
                    },
                    {
                        xtype: 'container',
                        flex: 1,
                        minHeight: 50,
                        style: {
                            border: '1px solid #00dcdd'
                        }
                    },
                    {
                        xtype: 'panel',
                        flex: 1,
                        minHeight: 100,
                        style: {
                            border: '1px solid #00dcdd'
                        },
                        animCollapse: false,
                        collapsible: true,
                        title: 'My Panel',
                        titleCollapse: true
                    }
                    ]
                }
                ]
            });
        }
    
    });
    ContainerImg.png

Thread Participants: 1

Tags for this Thread