Results 1 to 4 of 4

Thread: Load appropriate grid via the menu item in viewport

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

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
  •