how to run demo city bars using sencha architect

1. create a project using city bars template in sencha architect

2. save your project name as CityBars

3. modify your controll code to:

Ext.define('CityBars.controller.Business', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            dataList: '#dataList',
            listCard: '#listCard',
            mainNav: 'mainnav',
            detailCard: 'detailpanel'
        },

        control: {
            "#dataList": {
                itemtap: 'onListItemTap'
            },
            "detailpanel #callButton": {
                tap: 'onCallButtonTap'
            },
            "detailpanel > map": {
                activate: 'onMapActivate'
            }
        }
    },

    onListItemTap: function(dataview, index, target, record, e, eOpts) {
        var map,
            info,
            details;

        if (record) {
            details = Ext.create('CityBars.view.DetailPanel', {
                title: 'Details'
            });

            // set the map
            map = details.child('#detailMap');
            map._record = record;

            // set the info
            info = details.child('#contact').child('#info');
            info.child('#photo').setData(record.data);
            info.child('#data').setData(record.data);

            this.getMainNav().push(details);
        }
    },

    onCallButtonTap: function(button, e, eOpts) {

        // TODO: Add custom phone call code here
        window.location = 'tel:555-555-5555';

    },

    onMapActivate: function(newActiveItem, container, oldActiveItem, eOpts) {
        var map = newActiveItem,
            record = map._record,
            lat = record.get('latitude'),
            lng = record.get('longitude'),
            centerMap = Ext.Function.createDelayed(function() {
                map.setMapOptions({
                    zoom: 18
                });
                map.setMapCenter({
                    latitude: lat,
                    longitude: lng
                });
            }, 250),
            geocoder, loc;

        if (lat && lng) {
            centerMap();
        } else {
            geocoder = this._geocoder || (this._geocoder = new google.maps.Geocoder());
            geocoder.geocode(
            {address: [
                record.get('address1'),
                record.get('address2'),
                record.get('address3'),
                record.get('city'),
                record.get('state_code'),
                record.get('zip')
            ].join(', ')},
            function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    loc = results[0].geometry.location;
                    lat = loc.lat();
                    lng = loc.lng();
                    record.set('latitude', lat);
                    record.set('longitude', lng);
                    centerMap();
                } else {
                    Ext.Msg.alert("Could not find location: " + status);
                }
            }
            );
        }

    },

    launch: function() {

        var me = this;

        // NOTE ABOUT YELP KEY
        // You must use your own yelp key, available by registering (for free) with Yelp:
        // http://www.yelp.com/developers/getting_started/api_overview
        // (in this app, we use the Review Search API v1.0)
        me.apiKey = '8UUJ-jfiOwttLyzTC56F6A'; // enter your own yelp key here

        // Get the location, then find businesses
        Ext.Viewport.setMasked({ xtype: 'loadmask', message: 'Loading...' });
        me.getLocation(function (location) {

            // then use Yelp to get the businesses
            me.getBusinesses(location, function (store) {

                // then bind data to list and show it
                me.getDataList().setStore(store);

                Ext.Viewport.setMasked(false);

            });

        });

    },

    getLocation: function(callback) {
        if (navigator && navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                callback(position);
            }, function(error) {
                // give a warning for error
            });
        }
    },

    getBusinesses: function(location, callback) {

        var store = Ext.data.StoreManager.lookup('BusinessStore'),
            url = 'http://api.yelp.com/business_review_search' +
            '?ywsid=' + this.apiKey +
            '&term=Bars' +
            '&lat=37.785834' + //location.coords.latitude +
            '&long=-122.406417';// + location.coords.longitude;
        store.getProxy().setUrl(url);
        store.load(function() {
            callback(store);
        });

    }

});

4. run sencha cmd to launch your application on your web server

sencha fs web start -map /Users/user1/Documents/CityBars

5. visit your web using the url , which likes the following format:http://localhost:1841