The problem I'm having is my sencha touch application wont resize when resizing the window on Chrome

An example of the code I'm using :

Ext.setup({
    glossOnIcon: false,
    onReady: function() {

        //added this as a dirty hax to get it to atleast try to resize
        Ext.EventManager.onWindowResize(function () {
            wialus.tabPanel.setOrientation(Ext.getOrientation(), window.innerWidth, window.innerHeight);
        });

        my.tabPanel = new Ext.TabPanel({
            tabBar: {
                dock: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
            fullscreen: true,
            ui: 'light',
            items: [ /* items here */ ]
        });
});

The part that I have mented is my attempt at getting it to resize the app when the window dimensions change but it fails to calculate correctly when reducing the overall size of the window. With out the attempt at a fix the applications dimensions are the same as when the page is loaded, so reducing the windows size adds scroll bars and increasing the window size just adds more of the grey background.

Hopefully that code snippet is enough to get an idea of what's going on.

The problem I'm having is my sencha touch application wont resize when resizing the window on Chrome

An example of the code I'm using :

Ext.setup({
    glossOnIcon: false,
    onReady: function() {

        //added this as a dirty hax to get it to atleast try to resize
        Ext.EventManager.onWindowResize(function () {
            wialus.tabPanel.setOrientation(Ext.getOrientation(), window.innerWidth, window.innerHeight);
        });

        my.tabPanel = new Ext.TabPanel({
            tabBar: {
                dock: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
            fullscreen: true,
            ui: 'light',
            items: [ /* items here */ ]
        });
});

The part that I have mented is my attempt at getting it to resize the app when the window dimensions change but it fails to calculate correctly when reducing the overall size of the window. With out the attempt at a fix the applications dimensions are the same as when the page is loaded, so reducing the windows size adds scroll bars and increasing the window size just adds more of the grey background.

Hopefully that code snippet is enough to get an idea of what's going on.

• javascript
• sencha-touch
• extjs

2 Answers 2

I found it's actually the body element that's not resizing with the browser. Try attaching an on orientationchange event to your fullscreen:true panel to resize the body. Like this:

my.tabPanel.on('orientationchange', function() {
  this.el.parent().setSize(window.innerWidth, window.innerHeight);
});

try tabPanel.doLayout() in your resize call.

See doLayout.

Although if you are having to use this, you may have stepped outside of what sencha touch is currently targeting.