orientation change ... change docked panel

[BostonMerlin]

I'm looking to show off a simple proof of concept to my team. When the device is in portrait, i want to dock a 100px high panel panel to the bottom of the page and when the device is in landscape, to show that panel docked to the left side of the page. A floating menu if you will that changes where it's docked based on the orientation of the device.

I knew how to do this in Touch 1.x but for some reason i'm drawing a blank trying to do this in Designer 2.x.

Can someone point me in the right direction?

Thanks,
John

[mitchellsimoens]

You can listen for orientation change in two different ways in Sencha Touch 2.

Ext.Viewport will actually fire an orientationchange event so in your controller you could add an action to listen to this. Ext.Viewport (the global viewport) has an xtype of 'viewport'.

The other way is the resize event will fire on a component when it has been resized which happens when the orientation changes. The resize event will fire any time that component is resized for instance if you have a component in a container and you add another component to the container, that original component will be resized. You can then check the orientation by doing Ext.Viewport.getOrientation()

[BostonMerlin]

Thanks, Mitchell. The problem i'm having is setting this up from within the designer. I know how to attach listeners to controllers but i'm not sure how to go about doing this for viewport [all within sencha designer].

I created a new sencha touch 2 project with the latest designer build 311. dragged on a panel (Set to initial view) then dragged on top of it another panel, docked to bottom 100px high and gave it an ID of menuPanel.

Added a controller, called MyController and added a ControllerAction. Set controlQuery to 'menuPanel' and set the EventBinding name to 'resize'. For targetType I don't see 'Ext.Viewport' so i set it to .Ext.Panel'. I threw a console.log within the action but nothing happens when i resize the window in the browser while looking at the console.

Thoughts?

Thanks

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


config: {
control: {
"menuPanel": {
resize: 'onPanelResize'
}
}
},


onPanelResize: function(component, options) {
console.log("resized");
}


});

[mitchellsimoens]

If you use a ComponentQuery selector as

menuPanel

Then that is parsed as the xtype not id.

[BostonMerlin]

Thanks, but that doesn't appear to be the problem. I created a very simple example below. When launched in the browser, the console returns an error: "Adding a listener to the 'resize' event of a non-existing component".

If i remove the 'resize' listener code from my controller, the initialize event fires properly and shows "MainMenuBar has been initialized" as coded.

Can anyone see any issues with the code below? Dont know if it's something I'm doing wrong if it's an issue with the designer or framework or me..

Appreciate any help you can provide. Thanks, John.

CONTROLLER CODE

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


    config: {
        control: {
            "#MainMenuBar": {
                initialize: 'onContainerInitialize',
                resize: 'onContainerResize'
            }
        }
    },


    onContainerInitialize: function(component, options) {
        console.log(component.getId() + ' has been initialized');
    },


    onContainerResize: function(component, options) {
        console.log(component.getId() + ' has been resized');
    }


});

VIEW CODE

Ext.define('MyApp.view.MainPage', {    extend: 'Ext.Container',


    config: {
        id: 'MainPage',
        items: [
            {
                xtype: 'container',
                id: 'MainMenuBar'
            }
        ]
    }


});

APPLICATION CODE

Ext.Loader.setConfig({    enabled: true
});


Ext.application({
    views: [
        'MainPage'
    ],


    name: 'MyApp',


    controllers: [
        'MainController'
    ],


    launch: function() {
        Ext.create('MyApp.view.MainPage', {fullscreen: true});
    }
});