1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    2
    Vote Rating
    0
    maximade is on a distinguished road

      0  

    Default Unanswered: Producing sliders and their current value starting from the GS (GettingStarted) code.

    Unanswered: Producing sliders and their current value starting from the GS (GettingStarted) code.


    I am completely new to Sencha Touch and to programming in general. Anyways when I try running what I have, i get these errors from the console:
    • [COLOR=red !important]Uncaught Error: Ext.setup has already been called before sencha-touch.js:8887[/COLOR]

    • [COLOR=red !important]Uncaught Error: The following classes are not declared even if their files have been loaded: 'GS.view.Home1'. Please check the source code of their corresponding files for possible typos: 'app/view/Home1.js [/COLOR]sencha-touch.js:7895


    Of course being new to programming, I actually have very little ideas as to what any of these means.
    Ideally, I am trying to add another icon at the bottom of the screen that is produced from the GS code and have that 1 icon show a slider and it's current value. Here is what I have now (the codes that are different from the GS):
    <!DOCTYPE HTML>
    <html manifest="" lang="en-US">
    <head>
    <meta charset="UTF-8">
    <link href="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
    <title>GS</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>
    <style type="text/css" media="screen">
    .home {
    text-align: center;
    }

    .home .x-html h1 {
    font-weight: bold;
    font-size: 1.2em;
    }

    .home .x-html p {
    color: #666;
    line-height: 1.6em;
    margin: 10px 20px 20px 20px;
    }

    .home .x-html img {
    margin-top: -30px;
    }

    .home .x-html h2 {
    color: #999;
    font-size: 0.9em;
    }

    .blog p {
    color: #555;
    padding: 10px 20px 0 20px;
    font-size: 0.9em;
    line-height: 1.4em;
    }
    </style>
    <!-- The line below must be kept intact for Sencha Command to build your application -->
    <script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
    </head>
    <body>


    <div id="appLoadingIndicator">
    <div></div>
    <div></div>
    <div></div>
    </div>
    </body>
    </html>

    Ext.application({
    launch: function() {
    Ext.define('GS.view.Home1', {
    extend: 'Ext.form.Panel',
    xtype: 'homepanel1',
    config: {
    title: 'Demo Unity',
    iconCls: 'download',
    cls: 'home',
    scrollable: true,
    }//Config
    }
    );//Ext.define
    //Ext.create('Ext.form.Panel', {
    items: [{
    //docked: 'left',
    //width: 500,
    xtype: 'fieldset',
    items: [{
    xtype: 'sliderfield',
    id: 'sl',
    label: 'Years',
    minValue: 10,
    maxValue: 35,
    increment: 1,
    value: 10,
    listeners :{
    change: function (slider, thumb, newVal, oldVal){
    Ext.getCmp('debug').setValue(newVal);
    }//Change
    }//listeners
    }, {
    xtype: 'textfield',
    id: 'debug',
    label: 'value:',
    readOnly: true
    }]//items (fieldset)
    }]//items (panel)
    // }); //create()
    } //launch
    }); //application()

    The Main.js and app.js are also changed a little bit; they have the extra brackets that links back to the js code above. I apologize if my code looks messy. (There are 2 codes above if you can't tell)

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,219
    Answers
    3521
    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 need to code per best practices. Your Ext.application code needs to go into app.js (in fact you should use Sencha Command to create the app). Any code with Ext.define needs to be in it's own file, file system matches the class name and that class be required somewhere in your code.
    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.

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    2
    Vote Rating
    0
    maximade is on a distinguished road

      0  

    Default


    I believe that my Ext is already in it's own .js file, the .js file begins after the </div> part. Aside from that, I still do not understand why i am getting those errors.

Thread Participants: 1

Tags for this Thread