Results 1 to 3 of 3

Thread: CardLayout example: function not defined.

  1. #1

    Default CardLayout example: function not defined.

    Hi, I am getting a problem 'function is not defined' in the following piece of code. I tweaked the example from a card layout tutorial.

    Code:
    Ext.ns('App.views');
    var Card1 = new Ext.Panel({
      id: 'card1',
      fullscreen: true,
      html: 'This is card1',
      dockedItems: [
      {
        xtype: 'toolbar',
        title: 'Card1',
        items:[
            {xtype: 'spacer'},
            {text:'Card2', ui:'forward',
              handler: function(){
                App.views.CardPanel.setActiveItem('card2');
    	  },
            },
        ],
      }
      ],
    });
    
    
    var Card2 = new Ext.Panel({
      id: 'card2',
      fullscreen: true,
      html: 'This is card2',
      dockedItems:[
      {
        xtype: 'toolbar',
        title: 'Card2',
        items:[
            {text:'Card1', ui:'back',
              handler: function(){
                App.views.CardPanel.setActiveItem('card1');
              },
            },
        ],  
      },
      ],
    });
    
    
    
    
    App.views.CardPanel = Ext.extend(Ext.Panel, {
      id: 'cardpanel',
      layout: 'card',
      fullscreen: true,
      items: [
        Card1,Card2
      ],
    });
    
    
    Ext.reg('App.views.CardPanel', App.views.CardPanel);
    And I instantiate it in my app.js file like this :-

    Code:
    Ext.regApplication('App', {
      fullscreen: true,
      launch: function(){
        this.views = new App.views.CardPanel();  //error appears here
     },
    });
    Need guidance in this. Thanks.

  2. #2
    Sencha Premium Member
    Join Date
    May 2008
    Location
    Pasadena, California
    Posts
    172
    Answers
    27

    Default

    I tried a test and was able to get this to load successfully, without errors. There were alot of js syntax errors due to extra commas, so perhaps that was it. I removed those...

    Code:
    Ext.ns('App.views');var Card1 = new Ext.Panel({
        id: 'card1',
        fullscreen: true,
        html: 'This is card1',
        dockedItems: [
            {
                xtype: 'toolbar',
                title: 'Card1',
                items:[
                    {xtype: 'spacer'},
                    {text:'Card2', ui:'forward',
                        handler: function() {
                            App.views.CardPanel.setActiveItem('card2');
                        }
                    }
                ]
            }
        ]
    });
    
    
    
    
    var Card2 = new Ext.Panel({
        id: 'card2',
        fullscreen: true,
        html: 'This is card2',
        dockedItems:[
            {
                xtype: 'toolbar',
                title: 'Card2',
                items:[
                    {text:'Card1', ui:'back',
                        handler: function() {
                            App.views.CardPanel.setActiveItem('card1');
                        }
                    }
                ]
            }
        ]
    });
    
    
    
    
    App.views.CardPanel = Ext.extend(Ext.Panel, {
        id: 'cardpanel',
        layout: 'card',
        fullscreen: true,
        items: [
            Card1,Card2
        ]
    });
    
    
    
    
    Ext.reg('App.views.CardPanel', App.views.CardPanel);

  3. #3

    Default

    I copy-pasted your code and still it didn't work. Maybe the directory structure has something to do with it.

    My application is in the 'app' directory. Following is the structure:-
    The CardPanel.js file is under views folder.
    app
    -- controllers
    -- models
    -- stores
    -- views
    ----> CardPanel.js
    -- app.js

Posting Permissions

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