Results 1 to 4 of 4

Thread: Card navigation is not happening

  1. #1
    Sencha User
    Join Date
    May 2010

    Default Card navigation is not happening

    I am new to extjs 4.0. I am very much familiar how things work in extjs 3.4. The MVC is giving me a tough time to grasp. Here is my problem:
    I have view which have the multiple cards with the top toolbar. I need to implement the top toolbar handlers that will make the switching in the cards. Can anybody put any light into it? I have tried many methods but I am not been able to make it do the switch. I even tried to make two seperate views, one for cards and the other one for the toolbar. And in viewport I have added them one on each other. I am not sure how will all this fit into the new MVC. Can anybody give any hint about any kind of such problems? What is the best practise to do this? The examples are not following the MVC for the card layout so I didnt get help from it. Here is my code:

        name: 'BPR',
        appFolder: '../app',
        controllers: ['Main'],
        launch: function() {
            Ext.create('Ext.container.Viewport', {
                title: 'Viewport',
                layout: {
                    type: 'hbox',
                    pack: 'center',
                    align: 'top'
                items: [{xtype: 'cardmain'}]
    view > card > Main.js

    Ext.define('BPR.view.main.Cards', {
        extend: 'Ext.panel.Panel',
        alias : 'widget.maincards',
        title : 'Main cards of the application',
        layout: 'card',
        height: 500,
        width: 800,
        activeItem    : 0,
        tbar: [{
                xtype: 'splitbutton',
                scale: 'medium',
                    width: 160,
                    iconCls: 'picIcon',
                    text: '<strong>Current User</strong>',
                menu : {
                    width: 160,
                    items: [{
                            iconCls: 'accountIcon',
                            action: 'edit'
                            iconCls: 'changepwdIcon',
                            action: 'changepwd'
        initComponent: function() {
            this.items = [
                {title: 'Main', html: 'Main page of the app', layout: 'fit'}
                ,{title: 'Edit User', html: 'edit user profile', layout: 'fit'}
                ,{title: 'Change Password', html: 'change password', layout: 'fit'}

    controller > Main.js
    Ext.define('BPR.controller.Main', {
        extend: '',
        views: ['main.Cards'],    
       init: function() {
                'maincards': {
                    render: function(){
              'rendering maincards');
                }, 'maincards splitbutton > #editProfile': {
                        click: function(button){
                  'I am here');
                           var c = button.up('panel');
                  ; // nothin happens
                  ; // nothin happens

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL


    you are able to get the clicking of the menu?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:

  3. #3
    Sencha User
    Join Date
    May 2010


    Yes clicking has happened but I am not been able to set the active item from any of the method which change the active item. Can you please also confirm that I am doing the things in a correct sequence?

  4. #4
    Sencha User
    Join Date
    Jun 2011


    Shouldn't it be:


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts