View inheritance - Widget Base

[BostonMerlin]

I'm creating a portal page to display several widgets. All of these widget views should inherit from the basic look and feel of a base widget view (i.e. toolbar up top with title, hide/close buttons etc.). If the base widget changes, all widgets inheriting from it should also change.

I've done this before in Touch 1.x but with the designer i'm not so sure what best practice to apply. At first, I created a WidgetBase view off of a generic component. I then dragged the WidgetBase to create a new "Linked" view off of WidgetBase. What's confusing me is that the new "linked / inherited" view won't let me change it's name (i.e. WeatherWidget, MapWidget etc..) and I can't drag components onto it. At this point, I figure I'm not using "linked" as intended.

Can someone please clarify the point of "linked" views and point me in the right direction?

Thanks,
John

[bharatn]

Hi John,

You should assign an id or itemId to the linked instance to name it. The purpose of linked instance is of reuse - define a custom type and reuse it whereever via the new xtype.

Regards

[BostonMerlin]

Thanks, bharatn. Still trying to figure this out.

Step by Step example, please tell me what's going on here...

Big picture: I want WeatherWidget to inherit from WidgetBase so that if i change the UI of WidgetBase, WeatherWidget gets those changes (including any other widget that's inheriting from WidgetBase) and I can add weather specific UI elements to WeatherWidget only.

New project:

- add container, give it an ID of WidgetBase
- add another container, give it an ID of WeatherWidget
- drag WidgetBase on top of WeatherWidget, select Link

What's with this new 'MyContainer3' that was automatically created after linking? I would think the link should draw from WidgetBase to WeatherWidget. Don't know why this MyContainer control was created.

Is there a video or instructions on how to create visual inheritance within Designer 2? I'm sure this all makes perfect sense to the devs who created Sencha Designer but i feel like i'm flying blind.. throwing things around in the Designer to see what sticks.

link.png



Thanks again,
John

[aconran]

John -

We don't support what you're looking for quite yet.

Coming releases 2.0+ may have this ability once we've established a good workflow for how to create subclasses without putting it into another container.

Another issue that you've raised that we aren't certain how to handle yet is that currently linked instances do not allow you to place any children inside of them. If you could place children inside of a linked instance would you expect it to be additive and/or replace the existing children?

[BostonMerlin]

Thanks Aaron. I just re-read the Designer 2.0 doc titled 'the inspector'. This paragraph seems to describe exactly what i'm looking to do... but your comment seems to say it doesn't. Am I interpreting your response incorrectly? The concept of linked instances deserves a tutorial i think.

http://docs.sencha.com/designer/2-0/...ject_inspector

Linked instances
Linked instances like the one we just created can be very helpful in building complex projects. If you create multiple linked instances of the same component, you can change them all at once by editing the original component, and each linked instance inherits all the changes. You can still edit each linked instance separately; changes made to the linked instance override the attributes you give the original component. This is particularly useful when you use another Designer feature accessed through the Inspector, that is Promote To Class.

[aconran]

It does that but it sounds like you are requesting a tad more.

Lets go with a concrete example.

Start a new Ext 4.x Project
Drag out a Form Panel as a top level component
Put a fieldset in the form
put 2 textfields in the form
Set the userClassName of the form to "SpecialForm" and userAlias to "specialform"

Drag out a Window as a top level component
Drag the SpecialForm into the window.
You will be prompted to copy, move or link.
Choose Link.

You have now created a linked instance and created subclasses.

Lets re-use that subclass in a Viewport

Drag out a Viewport as a top level component
Drag the SpecialForm into the viewport
You will be prompted to copy move or link
Choose Link

Now go back to the SpecialForm and add a new field into the fieldset.

When you go to both the Window and the Viewport, you will see the SpecialForm which has all 3 of the fields. In addition, you can make exceptions for individual configurations, say in the viewport's linked instnace you want to change the title to "Alternate". You would go to the linked instance and then change the title.

This all works really well! The case we do not handle is this. Let's say for the form in the viewport you wanted to add a combobox that wasn't in the version that was in the window. You cannot do this via the dragdrop interface. What you can do however is create an override that will conditionally include a combobox by overriding initComponent when you create a custom configuration named whatever you'd like... (showCombo in this case?). Then you can set the custom configuration on the linkedinstance. This works great at runtime and will be displayed in the browser as expected.

However, you will not see the additional combo in the design window at any time (because we never evaluate your overrides code) when in the design view.

I hope this helps you understand whats available and what the limitations are.

[BostonMerlin]

Thanks for that write-up Aaron... I recreated your steps...makes perfect sense now. John