Sencha Touch 2 View

Question

I am absolutely new to sencha touch 2. I am learning with some tutorial and added a box with view. But after several try noting shows up on Browser screen. Only default sencha touch layout.

I have sencha touch 2.3.1 version installed. All files are untouched except app.js and /view/main.js

Here is what i have in app.js

Ext.application({
    name: 'sView',

    views: [
        'Main'
    ],



    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('sView.view.Main'));
    }

});

Here is Main.js

Ext.define('sView.view.Main', {
    extend: 'Ext.Panel',
    xtype: 'main',

    requires: [
        'Ext.TitleBar'
    ],

    config: {
        config: 'vbox',

        items: [{
            style: 'background: #999999',
            flex: 1

        } {
            style: 'background: #666666',
            flex: 1

        }]
    }
});

Just for clarity here is what is inside index.html

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>sView</title>
    <style type="text/css">
         /**
         * Example of an initial loading indicator.
         * It is recommended to keep this as minimal as possible to provide instant feedback
         * while other resources are still being loaded for the first time
         */
        html, body {
            height: 100%;
            background-color: #1985D0
        }

        #appLoadingIndicator {
            position: absolute;
            top: 50%;
            margin-top: -15px;
            text-align: center;
            width: 100%;
            height: 30px;
            -webkit-animation-name: appLoadingIndicator;
            -webkit-animation-duration: 0.5s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: linear;
        }

        #appLoadingIndicator > * {
            background-color: #FFFFFF;
            display: inline-block;
            height: 30px;
            -webkit-border-radius: 15px;
            margin: 0 5px;
            width: 30px;
            opacity: 0.8;
        }

        @-webkit-keyframes appLoadingIndicator{
            0% {
                opacity: 0.8
            }
            50% {
                opacity: 0
            }
            100% {
                opacity: 0.8
            }
        }
    </style>
    <!-- The line below must be kept intact for Sencha Command to build your application -->
    <script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
</head>
<body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT localhost/sView/touch/src/log/Logger.js?_dc=1399279276122 Uncaught Error: [Ext.Loader] Failed loading 'touch/src/log/Logger.js', please verify that the file exists sencha-touch.js:8634 — Shah
OK, try to fix that first. It may not be the main problem but it can be a symptom. — Saki

Jeff Wooden Jeff Wooden · Accepted Answer · 2014-05-05T20:19:49

I see some issues in your code that are likely producing the problem, your sView config needs to change to the following:

config: {
    layout: 'vbox', //<-- The property is layout, not config
    fullscreen: true, //<-- Make sure the view is set to fullscreen

    items: [{
        style: 'background: #999999',
        flex: 1

    },{ //<-- you were missing a comma between your items
        style: 'background: #666666',
        flex: 1

    }]
}

Sencha Touch 2 View

1 Answers