1. #1
    Sencha User cntop@msn.com's Avatar
    Join Date
    Sep 2012
    Location
    Anhui, China
    Posts
    18
    Vote Rating
    0
    cntop@msn.com is on a distinguished road

      0  

    Default Answered: if a component in layout of border can't be deleted and rebuilded dynamic

    Answered: if a component in layout of border can't be deleted and rebuilded dynamic


    i'm new to extjs and want to delete and rebuild a component in layout of border, code below:

    var eastPanel_before = new Ext.Panel({
    id: 'eastPanel_before',
    title: 'east comp',
    region: 'east',
    html: "prepare to delete",
    collapsible: true,
    width: 100
    });
    var eastPanel_now = new Ext.Panel({
    id: 'eastPanel_now',
    title: 'east comp',
    region: 'east',
    html: "want to add",
    collapsible: true,
    width: 100
    });
    Ext.create('Ext.Panel', {
    id: 'myPanel',
    title: 'myPanel',
    renderTo: document.body,
    width: 400,
    height: 300,
    layout: 'border',
    defaults: {
    split: true,
    collapsible: true,
    bodyStyle: 'padding:15px'
    },
    items: [{
    region: 'north',
    title: 'north',
    xtype: "panel",
    html: "north",
    height: 70
    },
    {
    region: 'west',
    title: 'west',
    xtype: "panel",
    html: "west",
    width: 100
    },
    {
    region: 'center',
    title: 'center',
    xtype: "panel",
    html: "center",
    items: [{
    xtype: 'button',
    text: 'delete and rebuild',
    handler: function() {
    eastPanel_before.destroy();
    Ext.getCmp("myPanel").items.add(eastPanel_now);
    Ext.getCmp("myPanel").doLayout();
    }
    }]
    },
    {
    region: 'south',
    title: 'south',
    xtype: "panel",
    html: "south",
    height: 70
    },
    eastPanel_before]
    });

    in this code, i'can delete the east component but can't rebuild it. I owner you a lot for help.

  2. Note that you need 4.1.x to be able to dynamically modify a border layout:

    Code:
    Ext.require('*');
    
    Ext.onReady(function() {
        var eastPanel_before = new Ext.Panel({
            id: 'eastPanel_before',
            title: 'east comp',
            region: 'east',
            html: "prepare to delete",
            collapsible: true,
            width: 100
        });
        var eastPanel_now = new Ext.Panel({
            id: 'eastPanel_now',
            title: 'east comp',
            region: 'east',
            html: "want to add",
            collapsible: true,
            width: 100
        });
        Ext.create('Ext.Panel', {
            id: 'myPanel',
            title: 'myPanel',
            renderTo: document.body,
            width: 400,
            height: 300,
            layout: 'border',
            defaults: {
                split: true,
                collapsible: true,
                bodyStyle: 'padding:15px'
            },
            items: [{
                region: 'north',
                title: 'north',
                xtype: "panel",
                html: "north",
                height: 70
            }, {
                region: 'west',
                title: 'west',
                xtype: "panel",
                html: "west",
                width: 100
            }, {
                region: 'center',
                title: 'center',
                xtype: "panel",
                html: "center",
                items: [{
                    xtype: 'button',
                    text: 'delete and rebuild',
                    handler: function() {
                        eastPanel_before.destroy();
                        Ext.getCmp("myPanel").add(eastPanel_now);
                    }
                }]
            }, {
                region: 'south',
                title: 'south',
                xtype: "panel",
                html: "south",
                height: 70
            }, eastPanel_before]
        });
    });

  3. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    I did run the sample, whats the problem. It works. It deletes and the new panel it set

    Code:
    Ext.onReady(function() {
        Ext.QuickTips.init();
    
        var eastPanel_before = new Ext.Panel({
            id: 'eastPanel_before',
            title: 'east comp',
            region: 'east',
            html: "prepare to delete",
            collapsible: true,
            width: 100
        });
        var eastPanel_now = new Ext.Panel({
            id: 'eastPanel_now',
            title: 'east comp',
            region: 'east',
            html: "want to add",
            collapsible: true,
            width: 100
        });
        Ext.create('Ext.Panel', {
            id: 'myPanel',
            title: 'myPanel',
            renderTo: document.body,
            width: 400,
            height: 300,
            layout: 'border',
            defaults: {
                split: true,
                collapsible: true,
                bodyStyle: 'padding:15px'
            },
            items: [{
                region: 'north',
                title: 'north',
                xtype: "panel",
                html: "north",
                height: 70
            },
    {
        region: 'west',
        title: 'west',
        xtype: "panel",
        html: "west",
        width: 100
    },
    {
        region: 'center',
        title: 'center',
        xtype: "panel",
        html: "center",
        items: [{
            xtype: 'button',
            text: 'delete and rebuild',
            handler: function() {
                eastPanel_before.destroy();
                Ext.getCmp("myPanel").items.add(eastPanel_now);
                Ext.getCmp("myPanel").doLayout();
            }
    }]
        },
    {
        region: 'south',
        title: 'south',
        xtype: "panel",
        html: "south",
        height: 70
    },
    eastPanel_before]
        });
    
    });

  4. #3
    Sencha User cntop@msn.com's Avatar
    Join Date
    Sep 2012
    Location
    Anhui, China
    Posts
    18
    Vote Rating
    0
    cntop@msn.com is on a distinguished road

      0  

    Default


    the code delete the east panel, but it does not create the new east panel.

  5. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,797
    Answers
    452
    Vote Rating
    602
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Note that you need 4.1.x to be able to dynamically modify a border layout:

    Code:
    Ext.require('*');
    
    Ext.onReady(function() {
        var eastPanel_before = new Ext.Panel({
            id: 'eastPanel_before',
            title: 'east comp',
            region: 'east',
            html: "prepare to delete",
            collapsible: true,
            width: 100
        });
        var eastPanel_now = new Ext.Panel({
            id: 'eastPanel_now',
            title: 'east comp',
            region: 'east',
            html: "want to add",
            collapsible: true,
            width: 100
        });
        Ext.create('Ext.Panel', {
            id: 'myPanel',
            title: 'myPanel',
            renderTo: document.body,
            width: 400,
            height: 300,
            layout: 'border',
            defaults: {
                split: true,
                collapsible: true,
                bodyStyle: 'padding:15px'
            },
            items: [{
                region: 'north',
                title: 'north',
                xtype: "panel",
                html: "north",
                height: 70
            }, {
                region: 'west',
                title: 'west',
                xtype: "panel",
                html: "west",
                width: 100
            }, {
                region: 'center',
                title: 'center',
                xtype: "panel",
                html: "center",
                items: [{
                    xtype: 'button',
                    text: 'delete and rebuild',
                    handler: function() {
                        eastPanel_before.destroy();
                        Ext.getCmp("myPanel").add(eastPanel_now);
                    }
                }]
            }, {
                region: 'south',
                title: 'south',
                xtype: "panel",
                html: "south",
                height: 70
            }, eastPanel_before]
        });
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #5
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Yes works with me, so the diference is

    Code:
    Ext.getCmp("myPanel").add(eastPanel_now);
    instead of

    Code:
    Ext.getCmp("myPanel").items.add(eastPanel_now);
    and no updateLayout call needed.

  7. #6
    Sencha User cntop@msn.com's Avatar
    Join Date
    Sep 2012
    Location
    Anhui, China
    Posts
    18
    Vote Rating
    0
    cntop@msn.com is on a distinguished road

      0  

    Default


    woooow~, the code does not works in extjs4.0, but it works in extjs4.1 perfect!
    i want to upgrade 4.0 to 4.1 in my project, does extjs support backword-compatible?
    thanks a lot to evant and tvanzoelen.

Thread Participants: 2

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi