javascript - sencha touch on window resize - Stack Overflow

admin管理员组

文章数量:1421762

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

Share Improve this question Follow asked Mar 8, 2011 at 0:21 OkeydokeOkeydoke 1,3571212 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

本文标签： javascriptsencha touch on window resizeStack Overflow