Results 1 to 3 of 3

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

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Vote Rating

    Default 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):
    <html manifest="" lang="en-US">
    <meta charset="UTF-8">
    <link href="" rel="stylesheet" type="text/css" />
    <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 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;
    <!-- 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>

    <div id="appLoadingIndicator">

    launch: function() {
    Ext.define('GS.view.Home1', {
    extend: 'Ext.form.Panel',
    xtype: 'homepanel1',
    config: {
    title: 'Demo Unity',
    iconCls: 'download',
    cls: 'home',
    scrollable: true,
    //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){
    }, {
    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 User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    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 @LikelyMitch
    Modus Create, Senior Frontend Engineer
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Vote Rating


    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.

Tags for this Thread

Posting Permissions

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