1. #1
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    523
    Vote Rating
    43
    BostonMerlin is a jewel in the rough BostonMerlin is a jewel in the rough BostonMerlin is a jewel in the rough

      0  

    Default orientation change ... change docked panel

    orientation change ... change docked panel


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    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 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()
    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
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    523
    Vote Rating
    43
    BostonMerlin is a jewel in the rough BostonMerlin is a jewel in the rough BostonMerlin is a jewel in the rough

      0  

    Default


    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");
    }


    });

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    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


    If you use a ComponentQuery selector as

    menuPanel
    Then that is parsed as the xtype not id.
    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
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    523
    Vote Rating
    43
    BostonMerlin is a jewel in the rough BostonMerlin is a jewel in the rough BostonMerlin is a jewel in the rough

      0  

    Default


    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
    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
    Code:
    Ext.define('MyApp.view.MainPage', {    extend: 'Ext.Container',
    
    
        config: {
            id: 'MainPage',
            items: [
                {
                    xtype: 'container',
                    id: 'MainMenuBar'
                }
            ]
        }
    
    
    });
    APPLICATION CODE
    Code:
    Ext.Loader.setConfig({    enabled: true
    });
    
    
    Ext.application({
        views: [
            'MainPage'
        ],
    
    
        name: 'MyApp',
    
    
        controllers: [
            'MainController'
        ],
    
    
        launch: function() {
            Ext.create('MyApp.view.MainPage', {fullscreen: true});
        }
    });

Thread Participants: 1