Results 1 to 4 of 4

Thread: Load appropriate grid via the menu item in viewport

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Nov 2016
    Posts
    7
    Answers
    1

    Default Answered: Load appropriate grid via the menu item in viewport

    I have a viewport with border layout with two components 1)toolbar - with Menu on the north region 2)container with card Layout on the center region - have 3 grid panels.

    I want to load the appropriate Grid Panel via a Menu Item in the viewport.
    Viewport View:

    Ext.define('ContainerCardGrid.view.MyViewport', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.myviewport',


    requires: [
    'ContainerCardGrid.view.MyViewportViewModel',
    'ContainerCardGrid.view.MyContainer',
    'ContainerCardGrid.view.MyToolbar',
    'Ext.toolbar.Toolbar'
    ],


    viewModel: {
    type: 'myviewport'
    },
    layout: 'border',


    items: [
    {
    xtype: 'mycontainer',
    region: 'center'
    },
    {
    xtype: 'mytoolbar',
    region: 'north'
    }
    ]


    });

    ---------
    Container View

    Ext.define('ContainerCardGrid.view.MyContainer', {
    extend: 'Ext.container.Container',
    alias: 'widget.mycontainer',


    requires: [
    'ContainerCardGrid.view.MyContainerViewModel',
    'ContainerCardGrid.view.MyGridPanel',
    'ContainerCardGrid.view.MyGridPanel1',
    'Ext.grid.Panel'
    ],


    viewModel: {
    type: 'mycontainer'
    },
    height: 250,
    layout: 'card',


    items: [
    {
    xtype: 'mygridpanel'
    },
    {
    xtype: 'mygridpanel1'
    }
    ]


    });
    ------------------------------------
    Toolbar View:

    Ext.define('ContainerCardGrid.view.MyToolbar', {
    extend: 'Ext.toolbar.Toolbar',
    alias: 'widget.mytoolbar',


    requires: [
    'ContainerCardGrid.view.MyToolbarViewModel',
    'Ext.button.Button',
    'Ext.menu.Menu',
    'Ext.menu.Item'
    ],


    viewModel: {
    type: 'mytoolbar'
    },


    items: [
    {
    xtype: 'button',
    text: 'MyButton',
    menu: {
    xtype: 'menu',
    itemId: 'changeType',
    items: [
    {
    xtype: 'menuitem',
    itemId: 'gridone',
    text: 'Menu Item 1'
    },
    {
    xtype: 'menuitem',
    itemId: 'gridtwo',
    text: ' Menu 2'
    }
    ]
    }
    }
    ]


    });
    -------------------------------
    Controller Code

    Ext.define('ContainerCardGrid.controller.MyController', {
    extend: 'Ext.app.Controller',


    control: {
    "mytoolbar menu#changeType menuitem": {
    click: 'onMenuitemClick'
    }
    },


    onMenuitemClick: function(item, e, eOpts) {
    var pan = item.up('mycontainer');
    if(item.itemId == 'gridone'){
    pan.getLayout().setActiveItem(0);
    }else if(item.itemId == 'gridtwo'){
    pan.getLayout().setActiveItem(1);
    }
    }


    });
    It is giving me the following error
    MyController.js?_dc=1480516286075:28 Uncaught TypeError: Cannot read property 'setActiveItem' of undefined


    Please help me

  2. okay I removed the width config. I am using Sencha Architect 4 - Toolbox - Ext 6.2x Classic.
    If I add the listener in the Viewport view itself I am able to do it. But I want to control it using the controller.

  3. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    I moved this thread from the Community Discussion forum. Which specific version of Ext JS are you using? You have set width for your north region, but north or south regions in a border layout should only have height configs.

  4. #3
    Sencha User
    Join Date
    Nov 2016
    Posts
    7
    Answers
    1

    Default

    I fixed it using Ext.getCmp('id') in the view controller

    Controller Code

    Ext.define('ContainerCardGrid.controller.MyController', {
    extend: 'Ext.app.Controller',


    control: {
    "mytoolbar menu#changeType menuitem": {
    click: 'onMenuitemClick'
    }
    },


    onMenuitemClick: function(item, e, eOpts) {
    var pan = Ext.getCmp('mycontainer');
    if(item.itemId == 'gridone'){
    pan.getLayout().setActiveItem(0);
    }else if(item.itemId == 'gridtwo'){
    pan.getLayout().setActiveItem(1);
    }
    }


    });

  5. #4
    Sencha User
    Join Date
    Nov 2016
    Posts
    7
    Answers
    1

    Default

    okay I removed the width config. I am using Sencha Architect 4 - Toolbox - Ext 6.2x Classic.
    If I add the listener in the Viewport view itself I am able to do it. But I want to control it using the controller.

Similar Threads

  1. Replies: 5
    Last Post: 6 May 2013, 4:17 PM
  2. Load a full jsp page into Ext.Viewport item [Very important]
    By mannuk in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 1 Sep 2011, 2:03 AM
  3. Replies: 5
    Last Post: 29 Aug 2011, 6:46 PM
  4. Can we load menu items dynamically or disable menu item
    By vamshigurudu in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 26 Apr 2011, 9:00 AM
  5. How to pre-populate a Select menu UI item on Load of the Card (View)
    By mailboxo71 in forum Sencha Touch 1.x: Discussion
    Replies: 8
    Last Post: 25 Mar 2011, 7:30 AM

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
  •