1. #1
    Sencha User siebmanb's Avatar
    Join Date
    Aug 2011
    Location
    Geneva (CH) - Grenoble (FR)
    Posts
    253
    Answers
    11
    Vote Rating
    15
    siebmanb will become famous soon enough

      0  

    Default Answered: Specify a width on a fullscreen app

    Answered: Specify a width on a fullscreen app


    Hello everyone,

    I know my question seems silly
    My app is fullscreen, but when people access it from a computer, it doesn't render that good as objects tend to go wider. Is there a way to specify a width (ex: 480px) only for computers ?

    Thanks a lot

  2. renderTo is a config option, not a method.

    Code:
    this.viewport = new App.views.Viewport({
        renderTo: Ext.getBody()
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,217
    Answers
    3519
    Vote Rating
    859
    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 won't be able to. The only way is to specify the size and not use fullscreen
    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.

  4. #3
    Sencha User siebmanb's Avatar
    Join Date
    Aug 2011
    Location
    Geneva (CH) - Grenoble (FR)
    Posts
    253
    Answers
    11
    Vote Rating
    15
    siebmanb will become famous soon enough

      0  

    Default


    That's what I thought but as soon as I remove the fullscreen I have the following error :
    Code:
    TypeError: 'undefined' is not a function (evaluating 'this.layout.setActiveItem(card, animation)')
    just like it doesn't manage to build the interface...

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


    fullscreen automatically renders that component. To render a component with using fullscreen, you must specify the renderTo config

    Code:
    renderTo: Ext.getBody()
    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.

  6. #5
    Sencha User siebmanb's Avatar
    Join Date
    Aug 2011
    Location
    Geneva (CH) - Grenoble (FR)
    Posts
    253
    Answers
    11
    Vote Rating
    15
    siebmanb will become famous soon enough

      0  

    Default


    Ok great. Tried the following for my Viewport but doesn't work :

    Code:
    App.views.Viewport = Ext.extend(Ext.Panel, {
    //    fullscreen: true,
    	renderTo: Ext.getBody(),
    	width: 400,
    	height: 200,
            layout: 'card',
            cardSwitchAnimation: 'slide',
    });
    Am I missing something here ?

  7. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,596
    Answers
    542
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    The document body probably doesn't exist at that point. Trying moving the renderTo to where you instantiate the panel.

  8. #7
    Sencha User siebmanb's Avatar
    Join Date
    Aug 2011
    Location
    Geneva (CH) - Grenoble (FR)
    Posts
    253
    Answers
    11
    Vote Rating
    15
    siebmanb will become famous soon enough

      0  

    Default


    Thanks again for the help. Your advice makes sense, but still having an error doesn't . Here is my new code :

    Code:
    Ext.regApplication({
        name: 'App',
        defaultUrl: 'Home/splash',
        launch: function()
        {
        	this.viewport = new App.views.Viewport();
        	this.viewport.renderTo(Ext.getBody());
        },
    });
    The error is different from before :
    Code:
    TypeError: 'undefined' is not a function (evaluating 'this.viewport.renderTo(Ext.getBody())')

  9. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,596
    Answers
    542
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    renderTo is a config option, not a method.

    Code:
    this.viewport = new App.views.Viewport({
        renderTo: Ext.getBody()
    });

  10. #9
    Sencha User siebmanb's Avatar
    Join Date
    Aug 2011
    Location
    Geneva (CH) - Grenoble (FR)
    Posts
    253
    Answers
    11
    Vote Rating
    15
    siebmanb will become famous soon enough

      0  

    Default


    Big thank you to you guys !

    Works great

  11. #10
    Ext JS Premium Member Asken's Avatar
    Join Date
    Feb 2010
    Location
    sweden
    Posts
    118
    Answers
    2
    Vote Rating
    0
    Asken is an unknown quantity at this point

      0  

    Default


    Check if it should be full screen or width before rendering the application viewport.

    Code:
    Ext.application({
        name: 'App',
        ...
        launch: function() {
            var config = {}, desktop = false;
    
            // do some checking here setting the desktop variable
    
            if (desktop) {
                config.width = 400;
                 config.height = 200;
            } else {
                config.fullscreen = true;
            }
            Ext.create('App.views.Viewport', config);
        }
    });