1. #11
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,403
    Vote Rating
    147
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      0  

    Default


    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.
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  2. #12
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    112
    Vote Rating
    7
    cmeans is on a distinguished road

      0  

    Default


    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.

  3. #13
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,403
    Vote Rating
    147
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      0  

    Default


    To clarify Cmd 3.1 does not yet support 4.1... Cmd 3.0.2 certainly does support 4.1.
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  4. #14
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    112
    Vote Rating
    7
    cmeans is on a distinguished road

      0  

    Default


    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?

  5. #15
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,403
    Vote Rating
    147
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      0  

    Default


    Touche - let me see what I can do for your 3.0 question.
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  6. #16
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    112
    Vote Rating
    7
    cmeans is on a distinguished road

      1  

    Smile


    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:

    Code:
    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

Thread Participants: 2