Results 1 to 5 of 5

Thread: (3.1.0.1903) No Canvas for Top-Level Windows from User Extensions

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Jul 2014
    Posts
    33

    Default (3.1.0.1903) No Canvas for Top-Level Windows from User Extensions

    When window classes from user extensions are added as top-level items, the Sencha Architect canvas fails to display anything.

    Environment information:
    • Windows 7, 64-bit
    • Architect:
    version: 3.1.0.1903
    channel: 3.1-stable
    platform: 1.4.1.960
    cmd: 5.0.2.270
    framework: Ext JS 5.0.x

    Steps to Reproduce:
    1. Create a new Sencha Ext JS 5.0.x project in Sencha Architect 3.1.0.1903
    2. Create a Sencha Architect package that has one class which is nothing but a bare extension of the Ext.window.Window class (see attached package: testBrokenWindowExt.zip)
    3. Re-open the project in Sencha Architect to load the package
    4. Add an instance of the user extension window class as a top-level item
    5. Add an instance of the base Ext.window.Window class as a top-level item
    6. View both of these (one at a time) in "Design" view
    Expected Result:
    Both instances should display a bare window identically in design mode.

    Actual Result:
    The base Ext.window.Window instance displays as expected. However, the user extension window instance is not displayed.

    Known Workarounds:
    I have not been able to successfully find any workarounds. At best, the window can be displayed a single time by changing an attribute which affects the display of the window after Architect is opened. For example, if the project is opened and then the "hidden" attribute of the window is changed, then the window will be displayed. However, as soon as the canvas is refreshed or any other change is made that might affect the display or layout of the window, the window disappears once again and cannot be made to reappear until the project is reloaded.

    Window from Ext core:
    architect_window_base.png

    Window from user extension:
    architect_window_custom.png

    testBrokenWindowExt.zip
    Last edited by mhill; 15 Oct 2014 at 10:19 AM. Reason: Entered wrong version of CMD

  2. #2

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User
    Join Date
    Jul 2014
    Posts
    33

    Default

    Just updated to Sencha Architect 3.1.0.1934. Issue remains.

  4. #4

    Default

    Sorry for the confusing timing - the new release definitely doesn't address this, but I have a workaround for you! Here's what's going on:

    In ExtJS, many components need certain defaults set or code run in order to display. For that reason, we have to add some code in Architect to ensure they display in the canvas. For example, when you drag out a standard Window object, we have extra code that calls this.show() on the window, because otherwise it'd be sitting in the canvas invisible - just like if you'd added the component to an ExtJS project outside of Architect and never called .show() -- the component is hidden by default.

    So, I have a little workaround for you that should do what you need. If you add the following function to your class that extends Ext.windowWindow, you will be able to see the component:

    Code:
        initComponent: function() {
            var me = this,
                inArchitectCanvas = (location.pathname.indexOf('canvas-frame.html') !== -1);
    
    
            me.callParent(arguments);
    
    
            // if rendering in the architect canvas, show the component for design purposes
            if (inArchitectCanvas) {
                me.show();
            }
        }
    What this is doing is detecting that it's running in the Architect canvas, and calling me.show() if it is. That conditional check for inArchitectCanvas is there because of course you may not want to run me.show() during initComponent in your app, you'll probably show it programmatically at some other time.

    We're definitely working on / discussing ways for this to be less tricky in the future, but I hope this workaround helps you out for the time being!

    Steve
    Steve Sobel
    @honestbleeps
    Sencha Architect Development Team

  5. #5
    Sencha User
    Join Date
    Jul 2014
    Posts
    33

    Default

    Thanks honestbleeps. That worked out great for me. I ended up using a Sencha CMD directive to include the code only in the library compiled specifically for Architect.

    Here's the resulting code:
    Code:
        //<if architect="true">
        /*
         * This function will only appear when the "architect" directive is set to true.
         * Do not place any block-style comments within the directive-surrounded section.
         */
        //<else>
        /*
        //</if>
        initComponent: function () {
            var me = this,
                inArchitectCanvas = (location.pathname.indexOf('canvas-frame.html') !== -1);
    
            me.callParent(arguments);
    
            // If rendering in the Architect canvas, show this component for design purposes
            if (inArchitectCanvas) {
                me.show();
            }
        },
        //<if architect="true">
        //<else>
         */
        //</if>
    The magic works as desired in Architect when compiled with:
    Code:
    -o architect:true
    Architect seems to be lacking a lot of documentation for any sort of customization like this. It would be helpful if Sencha put out some more information to help us out with these sorts of issues.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •