1. #31
    Sencha User
    Join Date
    Jul 2012
    Posts
    2
    Vote Rating
    0
    danebalia is on a distinguished road

      0  

    Default


    Quote Originally Posted by danebalia View Post
    Thanks for this, it's proved most helpful. Spent a whole day trying to generate my own all.js. My frustration is sufficient to kill someone. The support on this is pathetic, and is a tool that should not even be RELEASED in my humble opinion. I was going to completely stop using this product, if no solution was FOUND.

    Thanks for your efforts and document.

    A few more additions to help others I found: [ Windows/Asp.NET Website ]
    (a) Create Dummy Page with functionality (index-build.html)
    (b) Migrate all the support libraries into the same folder as index-build.html and reference them there directly
    (c) Don't forget to include the CSS file
    [Sample]
    <link rel="stylesheet" type="text/css" href="ext-all-gray.css" />
    <script type="text/javascript" src="ext-dev.js"></script>
    <script type="text/javascript" src="LayOut.js"></script>
    (d) Copy the ExtJs SRC (SDK) into the same folder so the build can reference it
    (e) Need to make sure that your custom js (mine LayOut.js), contains;
    Code:
    Ext.application({
    });
    Attached, my sample Configuration for layout:

    Code:
    Ext.application({
        requires: ['Ext.container.Viewport', 'Ext.layout.*' ],
        name: 'ExtJs',
        autoCreateViewPort: true,
        launch: function () {
                Ext.create('Ext.container.Viewport', {
                layout: 'border',
                items: [
                // create instance immediately
                Ext.create('Ext.Component', {
                    region: 'north',
                    height: 44, // give north and south regions a height
                    contentEl: 'north',
                }),
                {
                    region: 'west',
                    contentEl: 'west',
                    layout: 'fit',
                    manageOverflow: 1,
                    width: 200,
                    split: true,
                    autoscroll: true
                },
                {
                    region: 'center',
                    contentEl: 'center',
                    layout: 'fit'
                   
                }]
            });
        }
    });
    Sample Index-build.html:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="ext-all-gray.css" />
        <script type="text/javascript" src="ext-dev.js"></script>
        <script type="text/javascript" src="LayOut.js"></script>
    </head>
    <body>
        <div id="north" class="x-hide-display" style="background-color: red">
            North
        </div>
        <div class="x-hide-display" id="west" style="overflow-y: scroll; height: 100%; margin-top: 10px">
            West
        </div>
        <div id="center" class="x-hide-display">
            Center
        </div>
    </body>
    </html>

  2. #32
    Sencha User
    Join Date
    Feb 2012
    Posts
    117
    Vote Rating
    11
    Sottilde will become famous soon enough

      0  

    Default


    Quote Originally Posted by fdp View Post
    Thanks for the great document.

    Just a question, perhaps you can give me reply with all your experience.

    For my curiosity I made an index with only this require:

    Code:
    Ext.require('Ext.form.*');
    I was able to create the jsb3 file and build the all-classes.js

    The output is this:
    Code:
    all-classes.js 3007KB
    app-all 682KB
    I was wondering if the Loader is right, it includes more than 200 js files for 1 line of requirement: Ext.form.*

    It seems that 682 KB minified js is a lot more of what I expected to get only Ext form functions.

    Just asking if you can confirm the size.

    Thanks again for sharing.
    To be honest, that doesn't seem that far off. Ext.form.* has a lot of general dependencies, including Ext core and most of the Model modules. You can see a full list of what has been included inside your generated .jsb3 file.

    I agree that it seems high. I too am looking for ways to strip more files out. It is becoming a game of turning off unneeded features, deleting dependencies from my jsb3, and testing to see if I have broken any functionality. Unfortunately the trick is to figure out how to remove dependencies outright and to keep them from coming back in the automatic build.

    Unfortunately it is becoming obvious that ExtJS4 does not do a very good job of creating a "lean" build, especially if you use heavy customization. My app, even totally minified, totals about 1.5MB with all JS and CSS. I would feel much more comfortable if that were around the ~300KB mark.