1. #1
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    512
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      0  

    Default View inheritance - Widget Base

    View inheritance - Widget Base


    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

  2. #2
    Sencha User
    Join Date
    Jun 2011
    Posts
    350
    Vote Rating
    1
    bharatn is on a distinguished road

      0  

    Default


    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
    Bharat Nagwani
    Sencha Designer Development Team

  3. #3
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    512
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      0  

    Default


    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

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,091
    Vote Rating
    113
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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?
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    512
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      0  

    Default


    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.

  6. #6
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,091
    Vote Rating
    113
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  7. #7
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    512
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      0  

    Default


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

  8. #8
    Sencha User
    Join Date
    Apr 2014
    Posts
    1
    Vote Rating
    0
    iriska is on a distinguished road

      0  

    Default


    Hello.
    I have the same task as BostonMerlin.
    I created components (.xdc), templates (.xdt), extensions (.aux) but every such thing isn't convenient for inheritance which is defining in first post.
    Could somebody tell are there any changes in Sencha that now the task can be solved?
    Sorry for my english.

Thread Participants: 3