Change xtype dynamically according to the bind value

[jmpipah]

Hi guys i need help with this code: Change xtype dynamically according to the bind value in extjs, please i need help thank! bless!. so when i select any item from the treelist i need Main,js (Region: center) change automatic to the value from my bind sended sorry for the english im new thank you all.

Main.js

Ext.define('Genesis.view.main.Main', {
    extend: 'Ext.panel.Panel',
    xtype: 'app-main',
    
    requires: [
        'Ext.layout.container.Border',
        'Genesis.view.tree.TreeListModel',
        'Genesis.view.correctivos.PanelCorrectivos'
    ],    


    width: 500,
    height: 450,
    title: 'TreeList',


    iconCls: 'x-fa fa-gears',    
    layout: 'border',
    
    viewModel: {
        type: 'tree-list'
    },


    bodyBorder: false,


    defaults: {
        collapsible: true,
        split: true,
        bodyPadding: 10
    },


     header: {
        items: [{
            xtype: 'button',
            text: 'Options',
            menu: [{
                text: 'Expander Only',
                checked: true,
                handler: 'onToggleConfig',
                config: 'expanderOnly'
            }, {
                text: 'Single Expand',
                checked: false,
                handler: 'onToggleConfig',
                config: 'singleExpand'
            }]
        },{
            xtype: 'button',
            text: 'Nav',
            enableToggle: true,
            reference: 'navBtn',
            toggleHandler: 'onToggleNav'
        },{
            xtype: 'button',
            text: 'Micro',
            enableToggle: true,
            toggleHandler: 'onToggleMicro'
        }]
    },


    items: [
        {
            title: 'Footer',
            region: 'south',
            height: 100,
            minHeight: 75,
            maxHeight: 150,
            html: '<p>Footer content</p>'
        },
        {
            title: 'Navigation',
            //floatable: false,
            margin: '2 0 0 0',
            //width: 125,
            minWidth: 125,
            maxWidth: 200,
            region: 'west',
            width: 140,
            split: true,
            //reference: 'treelistContainer',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            border: false,
            scrollable: 'y',        
            items: [{
                xtype: 'treelist',
                reference: 'treelist',
                bind: '{navItems}'
            }]
        },
        {
            title: 'Main Content',
            collapsible: false,
            region: 'center',
            margin: '2 0 0 0',
            xtype: '{selectionText}'
        }
    ]
});

TreeListModel.js

Ext.define('Genesis.view.tree.TreeListModel',{
    extend: 'Ext.app.ViewModel',


    alias: 'viewmodel.tree-list',


    formulas: {
        selectionText: function(get) {
            var region;
            var selection = get('treelist.selection'),
                path;
            if (selection) {
                path = selection.getPath('text');
                path = path.replace(/^\/Root/, '');
                //alert(path);
                if(path==='/Correctivos/Tagged')
                    {
                        region = 'panelcorrectivos';
                    }
                else
                    {
                        region = '';
                    }
                return region;


            } else {
                region = 'panelusuarios';
                return region;
            }
        }
    },


    stores: {
        navItems: {
            type: 'tree',
            root: {
                expanded: true,
                children: [{
                    text: 'Home',
                    iconCls: 'x-fa fa-home',
                    children: [{
                        text: 'Messages',
                        iconCls: 'x-fa fa-inbox',
                        leaf: true
                    },{
                        text: 'Archive',
                        iconCls: 'x-fa fa-database',
                        children: [{
                            text: 'First',
                            iconCls: 'x-fa fa-sliders',
                            leaf: true
                        },{
                            text: 'No Icon',
                            iconCls: null,
                            leaf: true
                        }]
                    },{
                        text: 'Music',
                        iconCls: 'x-fa fa-music',
                        leaf: true
                    },{
                        text: 'Video',
                        iconCls: 'x-fa fa-film',
                        leaf: true
                    }]
                },{
                    text: 'Correctivos',
                    iconCls: 'ion-ios-build',                    
                    children: [{
                        text: 'Tagged',
                        iconCls: 'x-fa fa-tag',
                        leaf: true
                },{
                        text: 'Inactive',
                        iconCls: 'x-fa fa-trash',
                        leaf: true
                    }]
                },{
                    text: 'Users',
                    iconCls: 'x-fa fa-user',                    
                    children: [{
                        text: 'Tagged',
                        iconCls: 'x-fa fa-tag',
                        leaf: true                    
                    },{
                        text: 'Inactive',
                        iconCls: 'x-fa fa-trash',
                        leaf: true
                    }]
                },{
                    text: 'Groups',
                    iconCls: 'x-fa fa-group',
                    leaf: true
                },{
                    text: 'Settings',
                    iconCls: 'x-fa fa-wrench',
                    children: [{
                        text: 'Sharing',
                        iconCls: 'x-fa fa-share-alt',
                        leaf: true
                    },{
                        text: 'Notifications',
                        iconCls: 'x-fa fa-flag',
                        leaf: true
                    },{
                        text: 'Network',
                        iconCls: 'x-fa fa-signal',
                        leaf: true
                    }]
                }]
            }
        }
    }


});

PanelCorrectivos.js

Ext.define('Genesis.view.correctivos.PanelCorrectivos',{
    extend: 'Ext.Panel',


    xtype: 'panelcorrectivos',    


    requires: [
 
        'Genesis.view.correctivos.form.FormCorrectivos',
        //'Genesis.view.usuarios.form.ComboUsuarios', 
        'Genesis.store.correctivos.StoreCorrectivos',
        'Genesis.view.correctivos.GridCorrectivos',
        'Genesis.view.correctivos.CorrectivosController'
    ],


    controller: 'correctivosctrl',


    layout: 'border',
    frame: true,


    items: [{
        region: 'center',
        collapsible: false,
        layout: 'fit',
        xtype: 'tabpanel',
        items:[{
            title: 'Consolidado Correctivos',
            icon: 'resources/icons/application_view_list.png',
            xtype: 'gridcorrectivos',
            reference: 'gridlistado',
            listeners: {
                itemClick: 'ShowTicketCorrectivo'
            }
        }]
    },{
        height: 50,
        region: 'south',        
        bodyPadding: 10,
        reference: 'paneldetalle',
        resizable: true,
        //closable: true,
        tpl: '<div><span style="font-size: 11px; color: #000000;">Ultima acción: {p_accion}</span></div>'


    }]
});

[jmpipah]

Anyone can help me please! thanks!

[tangix]

xtype isn't a bindable config.
You need to find another solution, like a card panel containing the different items and then bind the activeItem config.