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,118
    Answers
    85
    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
    17,000
    Answers
    464
    Vote Rating
    650
    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,118
    Answers
    85
    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