View Full Version : City Bars Sample --> no navigation on list tap

27 Jul 2012, 5:20 AM

with the approaching weekend, I thought I quickly follow the City Bar sample and see where to head for on the weekend ;-)

That being said: I am just doing my first steps with Sencha Architect, and I followed the "City Bars" sample step by step (I rather wanted to understand each single step and not download the whole package RTR). I fixed what I found needed to be fixed (e.g. replace "CityBars.view.DetailPanel" with "MyApp.view.DetailPanel" in the onListItemTap handler, make the mainNav ref. "autoCreate", switch caching prevention off to be able to debug in chrome and such stuff). So I slowly got where I am now: I see a list of some bars, including photos, rating etc.
The only thing I simply can't get to work is making a tap do something. I hit a breakpoint on the "push(me.details)" line in the handler, the details panel looks initialized ok at that point and no errors/exceptions are thrown. But nothing happens. The line in the list is selected, but no navigation takes place at all. And I have simply no clue what to investigate further from here. I also tried to bring up a plain panel with just a static image on it, but same thing: no nav. at all, no complaints, nothing.
Any hint would really be appreciated. The weekend is close!

Thanks, hjr

29 Jul 2012, 11:42 PM
Looking at all the unanswered question in this forum (incl. mine :( ), it is really not very helpful, especially if one is just fighting through all the stuff for evaluation...

30 Jul 2012, 10:58 PM
Ok, so you have the list of bars - good job! But now, when you click on a bar no details appear - is that it? Problems like this are almost always related to bad references in the controller - it is most likely that you are not getting a correct reference to the mainNav but let's do some debug steps. First of all, is the itemtap on your list getting called? Put an "alert('here I am');" statement at the start of that - a dialog should pop up when you click the list. Let us know if that works.

Okay, if so then as you know, the way it works is that a detail panel is "pushed" onto the mainNav Navigation View. You don't need all the Google map stuff for this to work - all you need is to create the detailPanel, and push it onto the mainNav. Let's so that. The detaillPanel is instantiated by the "Ext.create" function:

details = Ext.create('CityBars.view.DetailPanel', {
title: 'Details'

... you are probably doing that correctly but lets make sure... right after creating the detailPanel enter this statement "alert(details.getId());". Now apply an id to the detailPanel - say "detailPanel". Now, when you click your list we know the itemTap function is getting called (from the tests above) so you should now see the id of the detailPanel pop up in the alert. If so then you know the detailPanel is getting created successfully. If not let us know

Ok, now all we need to do is to push the detailPanel (stored in "details") onto the mainNav. To do that we must get a reference to the mainNav. For that you need to have added a ref to it in the controller, like this in your controller code:

Ext.define('CityBars.controller.Business', {
extend: 'Ext.app.Controller',
config: {
refs: {
dataList: '#dataList',
listCard: '#listCard',
mainNav: '#mainNav',
detailCard: '#detailCard'

... see the mainNav there? Ok, now we find the mainNav by using the auto-created getter so let's do the same as before, like this "alert(me.getMainNav().getId());", now your mainNav should already have an id of "mainNav" (check that it does) so you should see that pop up when you click your list, if not, then the mainNav is not being referenced correctly so let us know about that.

One last thing, you mentioned in your email that you had to "make the mainNav ref. "autoCreate". You should not have to do that, if you have the mainNav set as the "Initial View" with the little icon beside, then the application will create it for you. Look at the code of the application (at the top of the property inspector), see the launch function creating the mainNav, like this:

launch: function() {

Ext.create('CityBars.view.MainNav', {fullscreen: true});
.. what could be happening is that you are creating a second mainNav which is invisible and pushing the detailPanel onto that, so remove the autocreate and follow the steps above instead. You are very close so let us know how you get on.

31 Jul 2012, 12:13 AM
I think I wrote that I come to the point of the push were things look ok (the panel and the mainNav are initialized -- if not either one being undefined would cause an exception). I also tried to push a simple HTML view instead, but the effect is the same (i.e. the push does nothing, at least nothing obvious, or genrate an error or anything).


31 Jul 2012, 7:28 AM
Got it - are you sure there is only one MainNav (you mentioned the auto-create which you should not need). This is why I like to see the id I have assigned myself (can't see that in your screenshot) because additional copies will not have that id. I have attached a working version - this is for Version 2.0.0 build 442 (Help -> About...)

1 Aug 2012, 4:29 AM
I removed the autocreate, and now it works, so seemingly there were actually two instances of mainNav active. When I began, however, no maiNav was defined at that point, and when googling the spare information on such issues, one hint was to make it autocreate -- and then I got at least the list. At that time, though, I had the startup code in the init method (as your sample does as well), however then I won't get it instantiated automatically. Only when moving the code to "launch", it works. This might still be another issue I did wrong somewhere, and I have to admit that I do not yet fully understand all the dependencies of what I am configuring (and what still could be configured).
There are so many settings distributed all over, and rather coming from classic programming, this level of abstraction with the multidude of artifacts representing certain regular programming techniques (like the reference objects), this is not all really straightforward (at least for an Sencha Architect newbie), and there remain questions around the scope and lifecycle of these artifacts. The fact that it was even so hard to track down another overlaying instance is also a point: why was it possible at all to have two of them with the same ID? Shouldn't that throw an error?

1 Aug 2012, 7:20 AM
Great job - you got it worked out. Yes, I too come from a more traditional programming backgorund although my last endeavor like this was Adobe Flex so a bit more similar to Architect. You are right - there are many configurations in Sencha Architect and you oftentimes must get them exactly right for it to workwork. At first I felt constrained "how do I even enter code?", and then I felt that oftentimes I knew what to do since there is quite a bit of documentation about the more open-ended Sencha Touch that I could not do in Architect. But over time I have discovered that I can do mostly anything I want in Architect and once you figure out how it all fits together - the stores, the models, the controllers views, and so on, then it really is worth it. Try and hang in there and you will come to be really comfortable because as you know more things get quicker and quicker so that now, when I need to do something for example, it typicality takes a few configurations and a tiny bit of code and I have it. I still find many problems center around references in the controller, I still keep running into that problem but I have defensive's against it now. There are many ways to reference an object as you know - class name, alias, id, itemid... so it can get a little confusing as typically these different instances will not notify you about collisions but if you reuse the same reference then it typically will (in the right context).

Hang in there, it is really worth it.

1 Aug 2012, 7:29 AM
Thanks @celticboyone for you help to @hjr

@hjr - fair point about Architect nor the framework not alerting you to the fact that you had 2 components w/ the same id. This is something that static languages typically do and really helps the dev process. Our hope is to give you this sort of help in Architect going forward.