Results 1 to 8 of 8

Thread: Unable to create StatusBar due to missing src/ux directory

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    83

    Default Unable to create StatusBar due to missing src/ux directory

    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.1.1 commercial
    • Ext 4.1.1a commercial

    Browser versions tested against:
    • N/A

    Description:
    • Ext.ux.statusbar.StatusBar: StatusBar.js is not included in the src folder
    Steps to reproduce the problem:

    The result that was expected:
    • A status bar appears

    The result that occurs instead:
    • HTTP 404: extjs/src/ux/statusbar/StatusBar.js does not exist.
    • In fact, there is no src/ux directory at all

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409

    Default

    Do you have this set in your code as shown in the example you reference?
    Is your path correct in setPath .. is the file there?

    Code:
    Ext.Loader.setPath('Ext.ux', '../ux/');
    Code:
    Ext.require([
      'Ext.ux.statusbar.StatusBar',
    ..
    });
    Scott.
    Last edited by scottmartin; 22 Sep 2012 at 3:00 PM. Reason: More info

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    83

    Default

    That's my point: there is no ux directory anywhere except under examples. Is Sencha's intent that I copy the examples/ux directory into the src directory? (That seems a bit hokey.)

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    83

    Default

    Here's some sample skeleton code that demonstrates the problem:

    index.html:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all-debug.css">
    </head>
    <body>
        <script src="lib/extjs/ext-debug.js"></script>
        <script src="app.js"></script>
    </body>
    </html>
    app.js:
    Code:
    Ext.Loader.setConfig({
        enabled:true
    });
    
    
    //Ext.Loader.setPath('Ext.ux', '../ux/');
    
    
    Ext.application(
        {
            name:'TestApp',
            appFolder:'app',
            autoCreateViewport:true
        });
    app/view/Viewport.js:
    Code:
    Ext.define('TestApp.view.Viewport', {
        extend:'Ext.Viewport',
        requires:[
    //        'Ext.ux.statusbar.StatusBar'
        ],
        layout:'border',
    
    
        initComponent:function ()
        {
            var me = this;
    
    
            Ext.applyIf(me, {
                items:[
                    {
                        xtype:'panel',
                        title:'Status Bar Test',
                        region:'center'
    //                    ,
    //                    bbar:{
    //                        xtype:'statusbar',
    //                        items:[
    //                            {
    //                                xtype:'tbtext',
    //                                text:'some text'
    //                            }
    //                        ]
    //                    }
    //                }
                ]
            });
    
    
            me.callParent(arguments);
        }
    });
    Running this code gives an empty panel. Uncommenting the lines in Viewport.js gives an HTTP 404 for http://localhost:8081/testapp/lib/ex...r/StatusBar.js. Additionally uncommenting the Loader.setPath directive in app.js gives an HTTP 404 for http://localhost:8081/ux//statusbar/StatusBar.js (double slash between ux and statusbar is intentional).

    So where's the ux folder in the extjs 4.1.1 commercial distribution?

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409

    Default

    In most instances, you would create a UX dir under your main app and copy the files that you wanted to use into that DIR.

    Scott.

  6. #6
    Sencha User
    Join Date
    Sep 2012
    Posts
    83

    Default

    But where's the source that I copy? Is it just the examples/ux directory? Here's what I'm struggling with:

    1) The statusbar class is documented as part of the API.
    2) The statusbar source code only seems to be available as part of a sample.

    These two things seem at odds.

  7. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409

    Default

    The general rule is that if it contains ux in the class, it will be a separate file.

    To verify this, you can open ext-all-debug.js and search for 'statusbar' (not found)

    The file in indeed in /examples/ux/statusbar DIR

    You would then copy the entire DIR to your app/ux DIR (or where you have it)
    In this case, it also has extra files and images.

    We have starting including our UX in the API for better understanding.

    Scott.

  8. #8
    Sencha User
    Join Date
    Sep 2012
    Posts
    83

    Default

    Thank you for the explanation. As a new user to ExtJS, the details of this scenario are not obvious. I'd say you still have a bug here, but it's with the documentation. Since the usage of these classes is non-standard, the API documentation should call out where the source is and how to consume it.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •