Running "Building your first Mobile App"

[badkneecap]

I downloaded Architect and started following along with the guide. I was having trouble getting it to run, so I resorted to downloading the completed project and trying to run it that way. I added my Yelp key and opened the app in Chrome. So far, everything seemed to be working as I was viewing some local restaurants. However, when I clicked on a restaurant, nothing happened. When I checked the console, it's showing an error trying to load the resource file http://localhost/sencha/CityBars/Cit...DetailPanel.js. When I checked my folders, I see that it's looking in "CityBars/CityBars/" when it should be looking in "CityBars/apps/" for that file. Did I set up something wrong?

[Phil.Strong]

what's appFolder set to? Should be the default app

[badkneecap]

The AppFolder is set to "app".

[badkneecap]

I stopped following the guide because I couldn't figure out one of the steps. I went back and was able to figure it out. When I previewed, I get the same error I got when I opened the downloaded project. So, I'm thinking I have something configured incorrectly.

Before downloading Architect, I downloaded Touch 2 and put it in a folder named "sencha". Under that directory, I created "CityBars". Is it possible I have the wrong "version" of touch in the "sencha" dirctory? What files and directories should I have in there and where can I get them?

[Phil.Strong]

Can you paste me the code (code view) for your DetailPanel here?

Unlikely it's related to touch directory location. By default in settings the sdk path is pointed to cachefly url. Your welcome to change this to your locally download and hosted location if you'd like.

Also be sure your running from a hosted location and not file:// though I suspect you wouldn't have gotten this far if you were.

[badkneecap]

Can you paste me the code (code view) for your DetailPanel here?

Unlikely it's related to touch directory location. By default in settings the sdk path is pointed to cachefly url. Your welcome to change this to your locally download and hosted location if you'd like.

Also be sure your running from a hosted location and not file:// though I suspect you wouldn't have gotten this far if you were.

Ext.define('MyApp.view.DetailPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.detailpanel',
    config: {
        tabBar: {
            docked: 'top',
            ui: 'light',
            layout: {
                pack: 'center',
                type: 'hbox'
            }
        },
        items: [
            {
                xtype: 'container',
                id: 'contact',
                title: 'Contact',
                items: [
                    {
                        xtype: 'container',
                        id: 'info',
                        padding: 10,
                        tpl: [
                            '<img class="photo" src="{photo_url}" width="100" height="100"/>;<h2>{name}</h2><div class="info">{address1}<br/><imm src="{rating_img_url_sall}"/></div>'
                        ],
                        layout: {
                            type: 'hbox'
                        },
                        items: [
                            {
                                xtype: 'component',
                                height: 100,
                                id: 'photo',
                                tpl: [
                                    '<img class="photo" src="{photo_url}" width="100" height="100"/>'
                                ],
                                width: 100
                            },
                            {
                                xtype: 'component',
                                id: 'data',
                                padding: 10,
                                tpl: [
                                    '<h2>{name}</h2><div class="info">{address1}<br/><img src="{rating_img_url_small}"/></div>'
                                ]
                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        id: 'MyContainer2',
                        layout: {
                            pack: 'center',
                            type: 'hbox'
                        },
                        items: [
                            {
                                xtype: 'button',
                                width: 100,
                                text: 'Call'
                            },
                            {
                                xtype: 'spacer',
                                width: 57
                            },
                            {
                                xtype: 'button',
                                width: 100,
                                text: 'More'
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'map',
                id: 'detailMap',
                title: 'Map'
            }
        ]
    }
});

I compared the code that I created to the downloaded project and they are identical. So, I still think it has something to do with the way my project is configured. I also tried using localhost/sencha/CityBars as well as localhost/CityBars. I also tried deploying to http://sencha/ and get the same errors.

So, to try and get past the error, I created a virtual directory "citybars" that pointed to the "app" directory but it still didn't work. I got a new error: ""Cannot create an instance of unrecognized class name / alias: CityBars.view.DetailPanel"

Thanks Phil!

[CaliLuke]

I stopped following the guide because I couldn't figure out one of the steps. I went back and was able to figure it out.

Which step? That would help me go and improve on the description.

[badkneecap]

Which step? That would help me go and improve on the description.

http://docs.sencha.com/architect/2-0...rst_mobile_app

I'm not sure why, but I didn't realize I could just click the "+" sign next to "init" in config.