Containers lose ability to edit name (missing "designer" tab)

[scottbecker]

See the two below screenshots.

I have lost the "designer" tab on a sub-container and I am no longer able to edit the containers name.

I have also attached the xds file where this was having issues.

I am using build 298

[scottbecker]

in other words, I am unable to set userClassName on anything besides the top most container... making work with controllers impossible.

[aconran]

This is correct behavior as designed.

userClassName is what you have specified to generate as the top level class. In raw javascript coding you would be creating a subclass here.

Are you looking for itemId in order to reference it via a controlQuery?
#myItemId

[petecis]

First, I'm new to this forum. If I'm not supposed to reply to closed threads, please scold me but do so lightly. I learn quickly and try not to do the same thing wrong twice :-)

I have noticed the same issue in Sencha Designer. I will explain briefly what I am trying to do and hopefully you can tell me if there's a better approach to doing it.

• Starting from a blank Sencha Touch project I drag a carousel into an iphone layout
  • The Carousel is now called "MyCarousel"
• Next I drag 2 Panels into the Project Inspector and onto "MyCarousel" so that they appear nested below the Carousel.
• The Panels are now called "MyPanel" and "MyPanel1"
• I would like to rename "MyCarousel" to something more identifiable within the Designer and eventually in the code. (But mostly for while in the designer)
  • I can do this by Editing the userClassName and the name that shows up in the Project Instpector changes to match.
• I would like to rename "MyPanel" and "MyPanel1" to something more itendifiable as well.
  • Unfortunately I cannot, userClassName is not exposed for the nested panels which I put below the Carousel
• If I drag the Panel up to the top level below "Views" I can then rename it. After that I can then put it back below the Carousel. But that seems like a lot of work and could be error prone if I get more complex.

So, my first instinct is to ask why I cannot rename these UI items when they are nested below other objects? This is why I tried to make the distinction above about what I am trying to accomplish in the designer not being related to what I will be trying to accomplish in the code. I just want to be able to rename my items within the Designer so I can make sense of them

My second instinct is to ask whether there is another way to go about doing this? For example, being new to the designer and having used many others in the past, it was natural to me to try to drag and drop the Panel onto the Carousel because intuitively the Carousel will be containing or hosting these Panels.

So, a final problem / question summary would be as follows:

1. How can I rename my UI elements in the Designer?
2. Am I correctly understanding the intended functionality?
3. Is there a different way to go about this?

Thanks for any help.

[aconran]

userClassName is used to generate the classname that you as a user would define for the javascript class the designer will create.

Each top level instances generates its own javascript class. Child items do not generate their own javascript classes.

If you want to provide an identifier to each of the child items, the proper way of doing this is by setting itemId.

[Phil.Strong]

Know that you can also set Id but it's not recommended approach. See http://docs.sencha.com/touch/2-0/#!/...ent-cfg-itemId for more details on this

[petecis]

Let me start by saying I now completely understand the code side of the story. The explanation from aconran was quite helpful. Thanks also to Phil for the additional comment. As that ID is not recommended I would definitely avoid it.

However, the root of the reason for my original question was not the code side. My concern is how to organize and understand on the visual designer side inside Sencha Designer.

In my original question I tried to stay away from making an assumption about the designers behavior, but based on the above posts, it seems safe to assume that the designers visual indicator is directly tied to a classname. Thus, visual elements without a classname will not receive, or be able to receive, any significant indicator that will differentiate them from one another.

Please see the attached screen fragment from the Project Inspector. It shows there are 7 panels in the carousel. They are names MyPanel, MyPanel1, MyPanel2, MyPanel3, MyPanel4, MyPanel5, MyPanel6. Visually, that looks bad. It conveys no information to me about the makeup and layout of my project. For example, visually I cannot tell things like: Which one contains the layout I am interested in? What order are the panels in?

However, I can drag those Panels up into the top level, give them class names, then drag them back under the carousel where they belong. The Project Inspector now looks like in the second attachment. I can now see visually the order of the panels and what's within them.

However, my concern is that since the class name is so closely tied to the visual name in the IDE am I going to be causing problems if I do this?

Regardless of whether it causes a problem or not, it seems to me like we need a way to be able to visually name our graphical elements as I imaging a sufficiently large project would make this all the more important.

Thanks for any help and guidance.

[aconran]

In these cases you should be using itemId.

There are cases that we have discussed about creating a designer specific label configuration that does not correlate to code at all but is just for a visual label. The only place that i can think of off the top of my head this would relevant for is proxies.

[petecis]

OK, got it. Thanks!

I tried the item ID and it worked just fine.

appreciate the help.

[taptapdone]

Why can't you double click on the Inspector node and have it edit the itemId?
(Instead of digging through the search typing itemId and doing it for each component)

In these cases you should be using itemId.

There are cases that we have discussed about creating a designer specific label configuration that does not correlate to code at all but is just for a visual label. The only place that i can think of off the top of my head this would relevant for is proxies.