Results 1 to 6 of 6

Thread: Am I missing styles in my application?

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    8
    Answers
    1
    Vote Rating
    0
      0  

    Question Answered: Am I missing styles in my application?

    I seem to be referencing everything as I should be, but my application looks extremely basic, except for the select input. For some reason that's styled on my iPhone and Safari. The index and my only view are below for your consideration.

    index

    Code:
                        
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title id="page-title">WolfTracker</title>
            <link rel="stylesheet" type="text/css" href="resources/css/sencha-touch.css">
            <script type="text/javascript" src="touch/sencha-touch-debug.js"></script>
            <script type="text/javascript" src="app/app.js"></script>
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
        </head>
        <body>
        </body>
    </html>

    View
    Code:
    Ext.define('WolfTracker.view.BusMap', {
    	extend: 'Ext.Container',
        xtype: 'busmap',
        requires: [
            'Ext.field.Select',
    		'Ext.Map'
        ],
    	
    	config: {
    		items: [
    			{
                    xtype: 'toolbar',
                    ui   : 'blue',
                    docked: 'top',
                    items: [
                        { xtype: 'spacer', width: 50 },
                        { xtype: 'spacer' },
                        {
                            xtype: 'title',
                            title: 'Wolf Tracker'
                        },
                        { xtype: 'spacer' },
                        {
                            xtype: 'button',
                            iconMask: true,
                            iconCls: 'refresh'
                        }
                    ]
                },
    			{
    				xtype: 'toolbar',
    				ui :'red',
    				docked: 'top',
    				items: [
    					{
    						xtype: 'selectfield',
    						name: 'route',
    						options: [
                                {text: 'Red', value: 'red'},
                                {text: 'Blue', value: 'blue'},
                                {text: 'Grey', value: 'grey'}
                            ]
    					}
    				]
    			},
    			{
    				xtype: 'map',
    				useCurrentLocation : true
    			}
    		],
    	
    	layout: {
                type: 'fit',
            }
    	}
    });

    URL:
    http://sencha1.s3-website-us-east-1.amazonaws.com/

    Screenshot:
    IMG_0120.jpg

    Any help would be greatly appreciated.
    Last edited by seanlindo; 22 Mar 2012 at 5:38 AM. Reason: Formatting is greatly off.

  2. Also, I was surprised to find a blue button when I added a button and set the ui to "action"; however, when I changed the ui to "forward" it reverted to grey like the rest of the toolbar.

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,326
    Answers
    3884
    Vote Rating
    1297
      0  

    Default

    It does look like it. Did you copy the CSS file from the 2.0.0 release?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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.

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    8
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Hi Mitchell,

    I double checked, and yes I do have sencha-touch.css from the latest release. I went ahead and linked apple.css as well but I'm still not having any luck.

    /resources/css/sencha-touch.css

  5. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    8
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Also, I was surprised to find a blue button when I added a button and set the ui to "action"; however, when I changed the ui to "forward" it reverted to grey like the rest of the toolbar.

  6. #5
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,326
    Answers
    3884
    Vote Rating
    1297
      0  

    Default

    Quote Originally Posted by seanlindo View Post
    Also, I was surprised to find a blue button when I added a button and set the ui to "action"; however, when I changed the ui to "forward" it reverted to grey like the rest of the toolbar.
    That is correct behavior.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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.

  7. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    8
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Thank you. I would be interested in a COMPASS and SASS tutorial to go from here.

Posting Permissions

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