Results 1 to 3 of 3

Thread: Change xtype dynamically according to the bind value

  1. #1
    Sencha User
    Join Date
    May 2019
    Posts
    2

    Default Change xtype dynamically according to the bind value

    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

    Code:
    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

    Code:
    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

    Code:
    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>'
    
    
        }]
    });

  2. #2
    Sencha User
    Join Date
    May 2019
    Posts
    2

    Default

    Anyone can help me please! thanks!

  3. #3
    Ext JS Premium Member tangix's Avatar
    Join Date
    Mar 2010
    Location
    Stockholm, Sweden
    Posts
    735
    Answers
    10

    Default

    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •