setActiveItem() to app.view.XXX

[ChildOTK]

Good Day,

Please see the following code:

Ext.define('app.view.Main', {
    
	extend: 'Ext.Container',
	
	requires: [
		'app.view.Home',
		'app.view.Action',
	],
	
    xtype: 'main',
    
    config: {
		layout: 'card',	
        items: [
            {	xtype: 'homecard'	},
            {	xtype: 'actioncard'	},
        ]
    }
});

I am trying to use the setActiveItem() function to change between the 'homecard' and 'actioncard' items. From the console I can access app.view.Main, but it has no setActiveItem function. How can I switch the active item in this case?

Thank you!

[bricemason]

I took your code sample and created a new app using the Sencha Cmd tools. Here are the details:

app.view.Home:

Ext.define('app.view.Home', {
    extend: 'Ext.Panel',
    xtype: 'homecard',


    config: {
        items: [
            {
                xtype: 'button',
                text: 'go to action card',
                action: 'goToAction'
            }
        ]
    }
});

app.view.Action:

Ext.define('app.view.Action', {
    extend: 'Ext.Panel',
    xtype: 'actioncard'
});

app.view.Main:

Ext.define('app.view.Main', {
    
    extend: 'Ext.Container',
    
    requires: [
        'app.view.Home',
        'app.view.Action',
    ],
    
    xtype: 'main',
    
    config: {
        layout: 'card', 
        items: [
            {   xtype: 'homecard', html: 'HOME'   },
            {   xtype: 'actioncard', html: 'ACTION' },
        ]
    }
});

pretty vanilla stuff here. I modified the Home view to contain a button which I'll use to move to the next card.

To handle the button tap event and the logic used to move to the action card, I created a controller.

app.controller.Main:

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


    config: {
        control: {
            'button[action="goToAction"]': {
                tap: 'goToAction'
            }
        }
    },


    goToAction: function(btn) {
        // get the main view
        var mainView = btn.up('main');


        // go to the action card
        mainView.setActiveItem(1);
    }
});

finally we'll add the views and controllers to our app.js file:

    views: ['Main', 'Home', 'Action'],


    controllers: ['Main'],

here we're able to query for components of type button having the action label of goToAction. Using this we can attach a tap handler named goToAction in the controller.

In the handler, we query up from the button reference for it's first parent of type main. This is our hook to the app.view.Main view where we can set the active item.

I created this example without knowing anything else about your objectives. This is just a demonstration on a simple way that you could accomplish this using MVC.

Why were you using the console? Just to test? Any other details to share?

I hope this helps.

Brice

[ChildOTK]

Brice,

Thank you for your response.

Basically, I am looking for a way to remotely control what is displayed on the users screen. Reason for this, I am working on an app which I am sticking in to a PhoneGap based application, and creating a PhoneGap plugin to be able to use the Bluetooth features of an iOS device. The goal is to have one iPad connect to the other, and be able to connect the two iPad's via Bluetooth, and have them send data to one another, but one being a 'master' if you will and controlling which cards is displayed on the 'slave' iPad. So at the end of the day if I could execute a javascript function to call the controller to switch the active item, that would be amazing.

I have accomplished what I want to do by using the good ol "var something = Ext.create()" methods, and then just reference "something.setActiveItem", but I would like to build the app in a more organized fashion thus using the different app.view.PanelName methods.

Any ideas?

Thank you so much!

[bricemason]

If you're interested in organizing code, the best thing you can do is work through the documentation and guides. They're pretty good and worth a read.

I would recommend reading the items under the Writing Applications section here:

http://docs.sencha.com/touch/2-1/#!/guide

Brice