Issue With Sencha CMD for generating images

[dongryphon]

While theme support had several tickets logged on Cmd 3.0.x I am not certain this is a bug or not... To support Neptune in Cmd 3.1 we had to do a lot of work on the slicer and fixed many limitations there. Cmd 3.1 will support 4.1 apps for GA (due very soon now) so if you are not planning to move to 4.2 then you could see if the new version works better for you.

I suspect you had to add to the shortcuts and/or manifest for your theme? In 3.1 we have documented and fixed issues with this API so that you can more easily extend these with new UI's or components.

Again, the current beta of Cmd 3.1 does not support 4.1 but we will fix that. When a build of Cmd 3.1 supports Ext JS 4.1 I would be glad to help you work through any remaining issues.

[cmeans]

OK. I appreciate the response.

My understanding was that Sencha Cmd worked with ExtJS v4.1.1a and above...I didn't see anything that indicated that that had changed. It did seem I needed ExtJS v4.1.3 to use Cmd 3.0.2.288, but as you say, still couldn't get everything working (bug at my end or not).

Based on your statement, I guess I have to wait for Sencha Cmd v3.1, and I'll have to *avoid* ExtJS v4.2 if I want Sencha Cmd to work for my theming needs. I'm sure I'll need further help, and it's appreciated.

Is "very soon" (for v3.1) this month, this quarter, or this year? Obviously, this part of my project has been dead in the water for over a month now, so no one is particularly happy with me (and my choices) at the moment.

[dongryphon]

To clarify Cmd 3.1 does not yet support 4.1... Cmd 3.0.2 certainly does support 4.1.

[cmeans]

OK. So, do I still have to wait until 3.1 is out (and supports 4.1), or can I get help with the current 3.0.2 and 4.1 which is what I have right now and should work?

[dongryphon]

Touche - let me see what I can do for your 3.0 question.

[cmeans]

Thanks to Don, we now have a solution to the issue where custom button UIs were not being correctly rendered in the theme.html (there's a small bug in the render.js file). One assumes this may also impact any custom UI rendering.

Replace your packages/<themename>/slice-src/render.js (you'll have to do it for each custom theme you have) with this:

var widgetsToRender = [],
componentData = [];

function updateWidgetConfig(config) {
    var xtype = config.xtype,
        ui = config.ui,
        shortcuts = $Shortcuts,
        configs = (xtype) ? shortcuts[xtype] : null,
        widgets = [],
        i, tpl, filename, folder;

    if (xtype && ui && configs) {
        for (i = 0; i < configs.length; i++) {
            tpl = configs[i];
            
            // Fix supplied by Don: 2013-02-20.
            // Replaced all subsequent references to 'tpl.config' with new var 'tplConfig'.
            // This avoids the template element '{ui}' being lost through reassignment/overwrite.
            var tplConfig = Ext.apply({}, tpl.config);
            
            folder = (tpl.folder) ? tpl.folder.replace('{ui}', ui) : null;
            filename = (tpl.filename) ? tpl.filename.replace('{ui}', ui) : null;

            var theUI = ui;

            var key;
            for (key in tplConfig) {
                if (typeof tplConfig[key] == 'string') {
                    tplConfig[key] = tplConfig[key].replace('{ui}', ui);
                }

                if (key == "ui") {
                    theUI = tplConfig[key].replace('{ui}', ui);
                }
            }

            var obj = {
                xtype: tpl.xtype || xtype,
                config: Ext.apply({}, {
                    ui: theUI
                }, tplConfig)
            };

            if (tpl.delegate) {
                obj.delegate = tpl.delegate;
            }

            if (tpl.offsets) {
                obj.offsets = tpl.offsets;
            }

            if (tpl.reverse) {
                obj.reverse = tpl.reverse;
            }

            if (folder) {
                obj.folder = folder;
            }
            if (filename) {
                obj.filename = filename;
            }

            widgets.push(obj);
        }
    } else {
        widgets.push(config);
    }

    return widgets;
}

function expandWidgetConfigs(){
    var widgetConfigs = $Manifest.widgets,
        userWidgetConfigs = $CustomManifest.widgets,
        i;

    for(i = 0; i < userWidgetConfigs.length; i++) {
        widgetConfigs.push(userWidgetConfigs[i]);
    }

    //widgetConfigs = $CustomManifest.widgets.concat($Manifest.widgets);
    
    for(i = 0; i < widgetConfigs.length; i++){
        updateWidgetConfig(widgetConfigs[i]).forEach(function(w){
            widgetsToRender.push(w);
        });
    }
}

function renderWidgets(){
    var i, config, data, widget, ct, el, compData;

    for(i = 0; i < widgetsToRender.length; i++){
        data = widgetsToRender[i];
        compData = {};
        config = Ext.apply({}, data.config, data);
        widget = Ext.create(config.xtype, config);

        ct = Ext.fly(document.body).createChild({
            tag: 'div',
            cls: 'widget-container',
            style: 'position: relative; overflow: visible;'
        });

        if (config.setup) {
            config.setup.call(widget, widget, ct);
        } else {
            widget.render(ct);
        }

        //compData.widget = widget;
        compData.offsets = Ext.apply({}, config.offsets || {}, {
            top: 0,
            bottom: 0,
            left: 0,
            right: 0
        });
        compData.config = config;

        if (config.delegate) {
            el = widget.el.down(config.delegate);
        } else {
            el = widget.el;
        }

        if (config.parentCls) {
            el.parent().addCls(config.parentCls);
        }

        compData.radius = [
            parseInt(el.getStyle('border-top-left-radius'), 10),
            parseInt(el.getStyle('border-top-right-radius'), 10),
            parseInt(el.getStyle('border-bottom-right-radius'), 10),
            parseInt(el.getStyle('border-bottom-left-radius'), 10)
        ];

        compData.gradient = (el.getStyle('background-image').indexOf('-gradient') !== -1);

        compData.gradientDirection = null;
        if(compData.gradient){
            compData.gradientDirection =
            (el.getStyle('background-image').indexOf('50% 0') !== -1 ||
             el.getStyle('background-image').indexOf('top') !== -1 ||
             el.getStyle('background-image').indexOf('bottom') !== -1)
                 ? 'top'
                 : 'left';
        }

        compData.borders = {
            top: el.getBorderWidth('t'),
            right: el.getBorderWidth('r'),
            bottom: el.getBorderWidth('b'),
            left: el.getBorderWidth('l')
        };

        compData.frameWidth = Math.max(
            compData.radius[0],
            compData.radius[1],
            compData.radius[2],
            compData.radius[3]);

        compData.radius = {
            tl: compData.radius[0],
            tr: compData.radius[1],
            br: compData.radius[2],
            bl: compData.radius[3]
        };

        compData.box = el.getBox();
        compData.reverse = data.reverse;
        compData.baseCls =
        widget.baseCls.replace(Ext.baseCSSPrefix, "");

        /**
         * this object will be captured by the screenshot utility as the
         * widget data file (typically widgetdata.json)
         */
        componentData.push(compData);
    }
}

function generateWidgets(){
    expandWidgetConfigs();
    renderWidgets();
    Ext.defer(function(){
        Ext.AllWidgetsCreated = true;
    }, 1);
}

Ext.require([
    '*'
]);

Ext.onReady(function(){
    generateWidgets();
});

There may be subsequent issues that still need to be addressed, but the fix above makes sure that the slicer now has the correct rendering to slice.

Thanks again to Don for all his help.

-Chris