1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    235
    Vote Rating
    0
    chandan.behura is on a distinguished road

      0  

    Default mvc OnClick

    mvc OnClick


    how to create a container and add it to another container by click of a button in Extjs MVC structure.

    i have a scenario that. Initially i have a viewPort there has 1 north panel and a button is there in north panel. when i will click on the button another 2 panel should added (center and south). How i will achieve that in an MVC structure.

    I have given my View port code bellow.

    Code:
    var northPanel=Ext.create('Ext.panel.Panel',{
            id:'northPanel',
            html:"<img src='Images/donutsmall.png'/><h3>Campaign Portal</h3>",
            height:'15%',
            width:'100%',
            region:'north',
            //header:false,
            //border:false,
        
            tbar:[
                  {
                      xtype:'tbfill'
                  },
                  {
                        xtype: 'button',
                        text:'setting',
                       // icon: 'Images/settings1.png',
                        width:60,
                        handler:Show
                       
                    }
                  ]
        });
    
        southPanel=Ext.create('Ext.panel.Panel',{
            id:'panel2',
            title:'Panel 2',
            height:'80%',
            width:'100%',
            region:'south',
            //autoScroll:true,
            //header:false
            
        });
        centerPanel=Ext.create('Ext.panel.Panel',{
            id:'panel3',
            height:'5%',
            region:'center',
            title:'Panel 3',
            //autoScroll:true,
            //header:false,
            //border:false,
            html:'<h1><b>Settings</b></h1>'
            //items:[{xtype:'label',style:'display:block; padding:5px 10px 0px 5px',text:'Settings'},panel2]
            
        });
        
    
    Ext.define('COP.view.Viewport', {
        extend: 'Ext.container.Viewport',
        layout: 'border',
        
     initComponent: function  () {
        Ext.apply(this, {
            items : [northPanel],       
        });
        
        this.callParent(arguments);
    }});

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Are you creating a new tab for each? You can simply use container.add(newPanel).

    Each view should have their own controller. When you add the new view, their controller will handle that view's actions.

    Scott.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    235
    Vote Rating
    0
    chandan.behura is on a distinguished road

      0  

    Default


    Quote Originally Posted by scottmartin View Post
    Are you creating a new tab for each? You can simply use container.add(newPanel).

    Each view should have their own controller. When you add the new view, their controller will handle that view's actions.

    Scott.
    but above u have mentioned container.add(new panel).

    The container in different view and the the new panel is also in a different view.but in container's controller i have to get both the view and add the new panel to container? But its not working.
    how i will achieve that.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      1  

    Default


    You create a ref to each view and then add:

    controller:

    Code:
    refs : [
        { ref : 'editForm', selector : 'form-user' },
        { ref : 'listForm', selector : 'list-user' },
    ],
    
    // access to view
    var editForm = this.getEditForm();
    Scott.

Thread Participants: 1

Tags for this Thread