1. #1
    Touch Premium Member
    Join Date
    Aug 2011
    Posts
    96
    Vote Rating
    6
    abcoa is on a distinguished road

      0  

    Question Customizing generated app.html by adding loading mask...

    Customizing generated app.html by adding loading mask...


    Is there a way with Architect to customize generated app.html file?

    I have a need to add a loading mask (similar to one used in docs app) for my application.
    Basically, I need to add some HTML to body, for example:

    "
    <div id="loading-mask"></div>
    <div id="loading">
    <div class="loading-indicator">
    Loading...
    </div>
    </div>
    "

    but because app.html is autogenerated and overwritten I can't...
    Is there a way to do this in Architect?

    Thanks

  2. #2
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,323
    Vote Rating
    198
    ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold

      0  

    Default


    Use generated app.html for development only.

    For deployment, write your own naming it other than app.html, say index.html.

    Regards.
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  3. #3
    Touch Premium Member
    Join Date
    Aug 2011
    Posts
    96
    Vote Rating
    6
    abcoa is on a distinguished road

      0  

    Default


    Did you read my question?
    I ***know*** I can use a different HTML file and that is what I have been doing.
    My question was if that can be done with Architect in some way or fashion so I can omit this manual step....

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    45
    Vote Rating
    1
    thantous is on a distinguished road

      0  

    Default


    I'm not sure about adjusting the app.html file, I'm guessing the answer is no.

    As an alternative, can your application show the load mask? On your top level element (or which-ever element needs the mask), or in a controller, create an 'afterrender' action and use something like this?

    Code:
    var mask = new Ext.LoadMask(
        panel.getEl(),
        {
            msg: 'Loading ...'
        }
    );
    mask.show();
    
    ... do whatever's required ...
    
    mask.hide();

  5. #5
    Touch Premium Member
    Join Date
    Aug 2011
    Posts
    96
    Vote Rating
    6
    abcoa is on a distinguished road

      0  

    Default


    I use Ext.application's launch method to remove the mask
    But the mask has be shown as soon as the page starts loading (to have effect).
    So that means (at least I think) it has to be pure HTML+CSS (it can't depend on being shows via javascript, because its purpose is to signify loading of the javascript)....

    Here is what I call

    Code:
    Ext.application({
        name: 'MyApp',
        appFolder: 'app',
        controllers: [
            'Cont1'
        ],
        enableQuickTips: true,
        autoCreateViewport: true,
        launch: function () {
            console.log('Launching app...');
    // mask is being shown while app is rendering.....
            Ext.create('Ext.container.Viewport', {
                layout: 'fit',
                items: {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            });
    // remove the mask...
            Ext.get('loading').remove();
            Ext.get('loading-mask').fadeOut({ remove: true });
            console.log('Launched -> ' + this.self.getName() + ': ' + this.name);
        }
    });
    

Thread Participants: 2