1. #1
    Sencha User
    Join Date
    Sep 2012
    Location
    Cirebon, Indonesia
    Posts
    4
    Vote Rating
    0
    agus.saputra is on a distinguished road

      0  

    Default How to Communicate Between West Region and Center Region

    How to Communicate Between West Region and Center Region


    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

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi,

    you can try following code :

    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'
            }
        }]
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User Legolas's Avatar
    Join Date
    Apr 2010
    Location
    Brazil/MG
    Posts
    58
    Vote Rating
    3
    Legolas is on a distinguished road

      0  

    Default


    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:
    Code:
    ,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.
    I am sorry my english, I am learning yet
    Portuguese blog: http://wessdevel.blogspot.com.br/
    Twitter: @wlegolas

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Location
    Cirebon, Indonesia
    Posts
    4
    Vote Rating
    0
    agus.saputra is on a distinguished road

      0  

    Default Thanks for response

    Thanks for response


    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...

  5. #5
    Sencha User Legolas's Avatar
    Join Date
    Apr 2010
    Location
    Brazil/MG
    Posts
    58
    Vote Rating
    3
    Legolas is on a distinguished road

      0  

    Default


    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.
    I am sorry my english, I am learning yet
    Portuguese blog: http://wessdevel.blogspot.com.br/
    Twitter: @wlegolas

  6. #6
    Sencha User
    Join Date
    Sep 2012
    Location
    Cirebon, Indonesia
    Posts
    4
    Vote Rating
    0
    agus.saputra is on a distinguished road

      0  

    Default This is my code

    This is my code


    hy, this is my code for split pages between Treestore and grid.. any solutions?
    Code:
    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..

  7. #7
    Sencha User
    Join Date
    Sep 2012
    Location
    Cirebon, Indonesia
    Posts
    4
    Vote Rating
    0
    agus.saputra is on a distinguished road

      0  

    Default this is my code

    this is my code


    hy, this is my code for split pages between Treestore and grid.. any solutions so that can be communicate?
    Code:
    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..

  8. #8
    Sencha User Legolas's Avatar
    Join Date
    Apr 2010
    Location
    Brazil/MG
    Posts
    58
    Vote Rating
    3
    Legolas is on a distinguished road

      0  

    Default


    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:
    PHP 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".
    I am sorry my english, I am learning yet
    Portuguese blog: http://wessdevel.blogspot.com.br/
    Twitter: @wlegolas

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