How to Communicate Between West Region and Center Region

[agus.saputra]

Hi everyone,

I'm new in EXTJS 4, I have a problem.. I made a template for the admin with full ExtJS..
I use the Ext.Viewport to split pages per side, inside contains two regions, namely West and Center Region..

the West region contains menus, such as Home, Profile, About, etc
and the Center Region used for the main content accordance to clickable menu from the West Region..

and the problem is how to communicate between West and Center Region a response based on menus clicked..?
or maybe any of you who may have a simple tutorial on the above issues?..

Thanks,
Regards

[sword-it]

Hi,

you can try following code :

var view=Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Page Title</h1>',
        border: false,
        margins: '0 0 5 0'
    }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        width: 150
        , xtype:'form'
        , items:[
        	{
                xtype:'button'
                , text:'click me'
                , handler:function(){
                    Ext.getCmp('tabpanel').add({title:'Hello', html:'welcome'})
                }
            }
        ]
       
    }, {
        region: 'south',
        title: 'South Panel',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }, {
        region: 'east',
        title: 'East Panel',
        collapsible: true,
        split: true,
        width: 150
    }, {
        region: 'center',
        xtype: 'tabpanel',
        id:'tabpanel',
        activeTab: 0,      // First tab active by default
        items: {
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
    }]
});

[Legolas]

agus.saputra, you can use the ComponentQuery methods for rescue the component, for example. In MVC architecture in my controller I inform a listeners for my buttons in toolbar, as code below:

,init: function() {
    var me = this;


    me.control({
        'viewport button[action=list-users]': {
            click: me.showListUsers 
        }
        ...
    });
}

/**
 * Method which will show the user list
 * @param {Ext.button.Button} btn The selected button
 */
,showListUsers: function(btn, evt, opt) {
    var me = this,
        tabpanel = btn.up('viewport').down('#center-tabpanel'),
        activeTab; 
    
    activeTab = tabpanel.items.findBy(function( aba ){
        return aba.title === btn.text;
    });
                
    if(!activeTab){
        activeTab = tabpanel.add({
             title: btn.text
            ,closable: true
            ,layout: 'fit'
            ,autoDestroy: true
            ,items: [{
                xtype: 'userlist'
            }]
        });
    }
    
    tabpanel.setActiveTab(activeTab);
}

Where "center-tabpanel" is the value of attribute "itemId" of region center.

[agus.saputra]

Thanks for your responses..

I've tried both the script above,
and so great, everything works... but for the code given by sword-it, is to add tabs to the center region.. and then the content can only be opened by clicking on the tab we just added..

So how if we do not want to add a tab in the center region?..

Thanks...

[Legolas]

agus.saputra, when you say: "So how if we do not want to add a tab in the center region?" means you want to open a new component in center area, like Grid?
You can use the layout card for add a new component to center region. See the example in API DOC.

[agus.saputra]

hy, this is my code for split pages between Treestore and grid.. any solutions?

Ext.application({
    name: 'AM',
 
    appFolder: 'app',
    
    controllers: [
        'Users',
        'Menus'
    ],
    
    stores: ['Menus'],
    
    

    launch: function() {
        var view=Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'north',
            html: 'Indosystem Global',
            height: '100',
            border: false,
            margins: '0 0 5 0'
        }, {
            region: 'west',
            collapsible: true,
            title: 'Navigation',
            width: 200, 
            xtype:'form', 
            items:
                [
                Ext.create('Ext.tree.Panel', {
                    title: 'Main Menu',
                    width: 200,
                    height: 200,
                    store: Ext.create('Ext.data.TreeStore', {
                        autoLoad:true,
                        proxy: {
                            type: 'ajax',
                            url: 'menus_bu.php'
                        }
                    }),

                    rootVisible: false,
                    renderTo: Ext.getBody()
                }),
                Ext.create('Ext.menu.Menu', {
                    width: 200,
                    height: 100,
                    margin: '0 0 10 0',
                    floating: false,  // usually you want this set to True (default)
                    renderTo: Ext.getBody(),  // usually rendered by it's containing component
                    items: [{
                        text: 'Home',
                        handler:function(){
                            Ext.getCmp('tabpanel').add({
                                title:'Hello', html:'welcome'
                            })
                        }
                    },{
                        text: 'Profile',    
                        handler:function(){
                            Ext.getCmp('tabpanel').add({title:'Hello', html:'welcome'})
                        }
                    },{
                        text: 'Logout',
                        handler:function(){
                            Ext.getCmp('tabpanel').add({title:'Hello', html:'welcome'})
                        }
                    }]
                })
            ]
           
        }, {
            region: 'center',
            xtype: 'tabpanel',
            id:'tabpanel',
            activeTab: 0,      // First tab active by default
            items: {
                xtype: 'menulist'
            }
        }]
    });
    }
});

Thanks..

[agus.saputra]

hy, this is my code for split pages between Treestore and grid.. any solutions so that can be communicate?

Ext.application({
    name: 'AM',
 
    appFolder: 'app',
    
    controllers: [
        'Users',
        'Menus'
    ],
    
    stores: ['Menus'],
    
    

    launch: function() {
        var view=Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'north',
            html: 'Indosystem Global',
            height: '100',
            border: false,
            margins: '0 0 5 0'
        }, {
            region: 'west',
            collapsible: true,
            title: 'Navigation',
            width: 200, 
            xtype:'form', 
            items:
                [
                Ext.create('Ext.tree.Panel', {
                    title: 'Main Menu',
                    width: 200,
                    height: 200,
                    store: Ext.create('Ext.data.TreeStore', {
                        autoLoad:true,
                        proxy: {
                            type: 'ajax',
                            url: 'menus_bu.php'
                        }
                    }),

                    rootVisible: false,
                    renderTo: Ext.getBody()
                }),
                Ext.create('Ext.menu.Menu', {
                    width: 200,
                    height: 100,
                    margin: '0 0 10 0',
                    floating: false,  // usually you want this set to True (default)
                    renderTo: Ext.getBody(),  // usually rendered by it's containing component
                    items: [{
                        text: 'Home',
                        handler:function(){
                            Ext.getCmp('tabpanel').add({
                                title:'Hello', html:'welcome'
                            })
                        }
                    },{
                        text: 'Profile',    
                        handler:function(){
                            Ext.getCmp('tabpanel').add({title:'Hello', html:'welcome'})
                        }
                    },{
                        text: 'Logout',
                        handler:function(){
                            Ext.getCmp('tabpanel').add({title:'Hello', html:'welcome'})
                        }
                    }]
                })
            ]
           
        }, {
            region: 'center',
            xtype: 'tabpanel',
            id:'tabpanel',
            activeTab: 0,      // First tab active by default
            items: {
                xtype: 'menulist'
            }
        }]
    });
    }
});

Thanks..

[Legolas]

agus.saputra, do you want communicate between treepanel with center area or only communicate between your menu with center area?
You already communicate between your menu with center area by code:

Ext.getCmp('tabpanel').add({
    title:'Hello', html:'welcome'
}); 

If you want to communicate between treepanel with center area, you can use the event "itemclick".