1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    4
    Vote Rating
    0
    dganoff is on a distinguished road

      0  

    Default Unanswered: Subclass Panel with Card layout: How to switch cards in code?

    Unanswered: Subclass Panel with Card layout: How to switch cards in code?


    I've recently upgraded from 1.1 to 2.0 and am trying to get used to the new subclasses using Ext.define.

    One of my views is a simple subclass that extends a Panel and has a card layout. The issue I am having is when I try to programmatically switch the current card.

    Here's the code for the view I am trying to manipulate:
    Code:
    Ext.define('Hardhat.view.Home', {
        extend: 'Ext.Panel',
        xtype: 'homepanel',
        id: 'hometab',
    
    
        config: {
            title: 'Home',
            iconCls: 'home',
            html: homeContent, // declared at the top.
            layout: {
                type: 'card'
            },
    
    
            items: [
                {
                    xtype: 'productspage' // carousel
                },
                {
                    xtype: 'blogpage' // list
                }
            ]
        }
    });
    Since I have defined the view as "Hardhat.view.Home" I assumed I would be able to use .setActiveItem() on this view to switch the current card. Alas when I do this: "Hardhat.view.Home.setActiveItem()", I get an error in the javascript console saying Object function () { return this.constructor.apply(this, arguments); } has no method 'setActiveItem'.

    How can I set the current/active item in this card layout?

    Thanks in advance!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,546
    Vote Rating
    873
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You are trying to use setActiveItem on the class definition but you need to do it on the instance.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    4
    Vote Rating
    0
    dganoff is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    You are trying to use setActiveItem on the class definition but you need to do it on the instance.
    Thanks mitchellsimoens.

    I'm still learning the framework... Could you give me an example of what the 'instance' would be for this particular class?

    Thanks!

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,546
    Vote Rating
    873
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    It depends on your app, an instance is what you create
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    4
    Vote Rating
    0
    dganoff is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    It depends on your app, an instance is what you create
    I now understand how to create an instance of a class, but I'm not sure where to put this code. I've tried creating the instance in my app.js file inside Ext.application as you can see below:

    Code:
    Ext.application({
        name: 'Hardhat',
    
    
        controllers: ['Main'],
    
    
        views: ['Home', 'Products', 'Blog', 'Contact'],
    
    
        launch: function() {
            Ext.create('Hardhat.view.Viewport');
            var homepage = Ext.create('Hardhat.view.Home');
            homepage.setActiveItem(1);
        }
    });
    This doesn't seem to work.

    Seeing the viewport code might also be helpful:
    Code:
    Ext.define('Hardhat.view.Viewport',{
        extend: 'Ext.TabPanel',
    
    
        config: {
            fullscreen: true,
            tabBarPosition: 'bottom',
    
    
            items: [
                {
                    xtype: 'homepanel' //normal panel
                },
                {
                    xtype: 'productspage' // carousel
                },
                {
                    xtype: 'blogpage' // list
                },
                {
                    xtype: 'contactpage' // form
                }
            ]
        }
    });
    I just want to create an instance of Hardhat.view.Home and be able to change the active item on it... this seems like it would be so simple, yet I'm completely missing something...

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    4
    Vote Rating
    0
    dganoff is on a distinguished road

      0  

    Default


    Also, this is an MVC app. Perhaps I'm going about this solution all wrong? The goal is to create a series of panels that step through 3 options for the user to choose from. The the user steps through each panel by tapping a button labeled next (or previous).

    Is there a more common way to solve this?

    Thanks.

Thread Participants: 1