Results 1 to 5 of 5

Thread: Sencha Cmd v5.1.1.45 not able to handle override in same file

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,294

    Default Sencha Cmd v5.1.1.45 not able to handle override in same file

    The following was able to 'sencha app build' for last 6 months, but now not working with Sencha Cmd v5.1.1.45:
    Code:
    Ext.define('OPApp.widget.HeaderFilters', {
    
    
    	alias: 'plugin.gridheaderfilters',
    
    
        alternateClassName: ['Ext.ux.grid.HeaderFilters', 'Ext.ux.grid.header.Filters'],
    
    
        requires: [
            'Ext.container.Container',
            'Ext.tip.ToolTip'
        ],
    
    
        grid: null,
    
    
        fields: null,
    
    
        containers: null,
    
    
        storeLoaded: false,
    
    
        filterFieldCls: 'x-gridheaderfilters-filter-field',
    
    
        filterContainerCls: 'x-gridheaderfilters-filter-container',
    
    
        filterRoot: 'data',
    
    
        tooltipTpl: '{[Ext.isEmpty(values.filters) ? this.text.noFilter : "<b>"+this.text.activeFilters+"</b>"]}<br><tpl for="filters"><tpl if="value != \'\'">{[values.label ? values.label : values.property]} = {value}<br></tpl></tpl>',
    
    
        lastApplyFilters: null,
    
    
        bundle: {
            activeFilters: 'Active filters',
            noFilter: 'No filter'
        },
    
    
        /**
    	* @cfg {Boolean} stateful
    	* Specifies if headerFilters values are saved into grid status when filters changes.
    	* This configuration can be overridden from grid configuration parameter <code>statefulHeaderFilters</code> (if defined).
    	* Used only if grid <b>is stateful</b>. Default = true.
    	*
    	*/
        stateful: true,
    
    
        /**
        * @cfg {Boolean} reloadOnChange
        * Specifies if the grid store will be auto-reloaded when filters change. The store
        * will be reloaded only if is was already loaded. If the store is local or it doesn't has remote filters
        * the store will be always updated on filters change.
        *
        */
        reloadOnChange: true,
    
    
        /**
       * @cfg {Boolean} ensureFilteredVisible
       * If the column on wich the filter is set is hidden and can be made visible, the
       * plugin makes the column visible.
       */
        ensureFilteredVisible: true,
    
    
        /**
    	* @cfg {Boolean} enableTooltip
    	* If a tooltip with active filters description must be enabled on the grid header
    	*/
        enableTooltip: false,
    
    
        statusProperty: 'headerFilters',
    
    
        rendered: false,
    
    
        constructor: function (cfg) {
            if (cfg) {
                Ext.apply(this, cfg);
            }
        },
    
    
        init: function (grid) {
            this.grid = grid;
            var me = this;
            this.delayedApplyFiltersTask = new Ext.util.DelayedTask(function () {
                me.applyFilters();
            });
            /*var storeProxy = this.grid.getStore().getProxy();
            if(storeProxy && storeProxy.getReader())
            {
                var reader = storeProxy.getReader();
                this.filterRoot = reader.root ? reader.root : undefined;
            }*/
            /**
             * @cfg {Object} headerFilters
             * <b>Configuration attribute for grid</b>
             * Allows to initialize header filters values from grid configuration.
             * This object must have filter names as keys and filter values as values.
             * If this plugin has {@link #stateful} enabled, the saved filters have priority and override these filters.
             * Use {@link #ignoreSavedHeaderFilters} to ignore current status and apply these filters directly.
             */
            if (!grid.headerFilters)
                grid.headerFilters = {};
    
    
    
    
            if (Ext.isBoolean(grid.statefulHeaderFilters)) {
                this.setStateful(grid.statefulHeaderFilters);
            }
    
    
    
    
          /**
            * @event headerfilterchange
            * <b>Event enabled on the Grid</b>: fired when at least one filter is updated after apply.
            * @param {Ext.grid.Panel} grid The grid
            * @param {Ext.util.MixedCollection} filters The applied filters (after apply). Ext.util.Filter objects.
            * @param {Ext.util.MixedCollection} prevFilters The old applied filters (before apply). Ext.util.Filter objects.
            * @param {Number} active Number of active filters (not empty)
            * @param {Ext.data.Store} store Current grid store
            */
    
    
            /**
             * @event headerfiltersrender
             * <b>Event enabled on the Grid</b>: fired when filters are rendered
             * @param {Ext.grid.Panel} grid The grid
             * @param {Object} fields The filter fields rendered. The object has for keys the filters names and for value Ext.form.field.Field objects.
             * @param {Object} filters Current header filters. The object has for keys the filters names and for value the filters values.
            */
    
    
            	/**
             * @event beforeheaderfiltersapply
             * <b>Event enabled on the Grid</b>: fired before filters are confirmed. If the handler returns false no filter apply occurs.
             * @param {Ext.grid.Panel} grid The grid
             * @param {Object} filters Current header filters. The object has for keys the filters names and for value the filters values.
             * @param {Ext.data.Store} store Current grid store
             */
    
    
            /**
             * @event headerfiltersapply
             *<b>Event enabled on the Grid</b>: fired when filters are confirmed.
             * @param {Ext.grid.Panel} grid The grid
             * @param {Object} filters Current header filters. The object has for keys the filters names and for value the filters values.
             * @param {Number} active Number of active filters (not empty)
             * @param {Ext.data.Store} store Current grid store
             */
    
    
    
    
    
    
            this.grid.on({
                scope: this,
                columnresize: this.resizeFilterContainer,
                beforedestroy: this.onDestroy,
                beforestatesave: this.saveFilters,
                afterlayout: this.adjustFilterWidth
            });
    
    
            this.grid.headerCt.on({
                scope: this,
                afterrender: this.renderFilters
            });
    
    
            this.grid.getStore().on({
                scope: this,
                load: this.onStoreLoad
            });
    
    
            if (this.reloadOnChange) {
                this.grid.on('headerfilterchange', this.reloadStore, this);
            }
    
    
            if (this.stateful) {
                this.grid.addStateEvents('headerfilterchange');
            }
    
    
            //Enable new grid methods
            Ext.apply(this.grid,
            {
                headerFilterPlugin: this,
                setHeaderFilter: function (sName, sValue) {
                    if (!this.headerFilterPlugin) {
                        return;
                    }
                    var fd = {};
                    fd[sName] = sValue;
                    this.headerFilterPlugin.setFilters(fd);
                },
                /**
                 * Returns a collection of filters corresponding to enabled header filters.
                 * If a filter field is disabled, the filter is not included.
                 * <b>This method is enabled on Grid</b>.
                 * @method
                 * @return {Array[Ext.util.Filter]} An array of Ext.util.Filter
                 */
                getHeaderFilters: function () {
                    if (!this.headerFilterPlugin) {
                        return null;
                    }
                    return this.headerFilterPlugin.getFilters();
                },
                /**
                 * Set header filter values
                 * <b>Method enabled on Grid</b>
                 * @method
                 * @param {Object or Array[Object]} filters An object with key/value pairs or an array of Ext.util.Filter objects (or corresponding configuration).
                 * Only filters that matches with header filters names will be set
                 */
                setHeaderFilters: function (obj) {
                    if (!this.headerFilterPlugin) {
                        return;
                    }
                    this.headerFilterPlugin.setFilters(obj);
                },
                getHeaderFilterField: function (fn) {
                    if (!this.headerFilterPlugin) {
                        return;
                    }
                    if (this.headerFilterPlugin.fields[fn]) {
                        return this.headerFilterPlugin.fields[fn];
                    }
                    else {
                        return null;
                    }
                },
                resetHeaderFilters: function () {
                    if (!this.headerFilterPlugin) {
                        return;
                    }
                    this.headerFilterPlugin.resetFilters();
                },
                clearHeaderFilters: function () {
                    if (!this.headerFilterPlugin) {
                        return;
                    }
                    this.headerFilterPlugin.clearFilters();
                },
                applyHeaderFilters: function () {
                    if (!this.headerFilterPlugin) {
                        return;
                    }
                    this.headerFilterPlugin.applyFilters();
                },
                toggleHeaderFilters: function () {
                    if (!this.headerFilterPlugin) {
                        return;
                    }
                    this.headerFilterPlugin.toggle(arguments);
                }
            });
        },
    
    
        toggle: function (state) {
            var me = this;
            state = state === undefined ? !me.rendered : !!state;
            if (state !== me.rendered) {
                this.renderFilters();
                this.adjustFilterWidth();
                this.grid.headerCt.doLayout();
            } else {
                this.clearFilters();
                this.destroyFilters();
                this.grid.headerCt.doLayout();
    
    
            }
            return me;
        },
    
    
        saveFilters: function (grid, status) {
            status[this.statusProperty] = (this.stateful && this.rendered) ? this.parseFilters() : grid[this.statusProperty];
        },
    
    
        setFieldValue: function (field, value) {
            var column = field.column;
            if (!Ext.isEmpty(value)) {
                field.setValue(value);
                if (!Ext.isEmpty(value) && column.hideable && !column.isVisible() && !field.isDisabled() && this.ensureFilteredVisible) {
                    column.setVisible(true);
                }
            }
            else {
                field.setValue('');
            }
        },
    
    
        renderFilters: function () {
            this.destroyFilters();
            this.fields = {};
    
    
            this.containers = {};
            var filters = this.grid.headerFilters;
    
    
            /**
             * @cfg {Boolean} ignoreSavedHeaderFilters
             * <b>Configuration parameter for grid</b>
             * Allows to ignore saved filter status when {@link #stateful} is enabled.
             * This can be useful to use {@link #headerFilters} configuration directly and ignore status.
             * The state will still be saved if {@link #stateful} is enabled.
             */
            if (this.stateful && this.grid[this.statusProperty] && !this.grid.ignoreSavedHeaderFilters) {
                Ext.apply(filters, this.grid[this.statusProperty]);
            }
    
    
            var storeFilters = this.parseStoreFilters();
            filters = Ext.apply(storeFilters, filters);
    
    
            var gridHeader = this.grid.headerCt;
    
    
            var columns = gridHeader.getGridColumns();
            for (var c = 0; c < columns.length; c++) {
                var column = columns[c];
                if (column.filter && column.rendered) {
                    var filterContainerConfig = {
                        itemId: column.id + '-filtersContainer',
                        cls: this.filterContainerCls,
                        layout: 'anchor',
                        _grid: this.grid,
                        bodyStyle: { 'background-color': 'transparent' },
                        border: false,
                        width: column.getWidth(),
                        listeners: {
                            scope: this,
                            keyup:{
                                element: 'el',
                                fn: function (e, textfield) {
                                    this.delayedApplyFilter();
                                }
                            },
                            select: {
                               element: 'el',
                               fn: function (e) {
                                 this.delayedApplyFilter();
                                }
                            }
    
    
                        },
                        items: []
                    }
    
    
                    var fca = [].concat(column.filter);
    
    
                    for (var ci = 0; ci < fca.length; ci++) {
                        var fc = Ext.clone(fca[ci]);
                        Ext.applyIf(fc, {
                            filterName: column.dataIndex,
                            fieldLabel: column.text || column.header,
                            hideLabel: fca.length == 1,
                            listeners: {
                                scope: this,
                                select: function (e) {
                                    this.delayedApplyFilter();
                                },
                                change: function (dateRange, filter, event) {
                                    this.delayedApplyFilter();
                                }
    
    
                            }
                        });
                        var initValue = Ext.isEmpty(filters[fc.filterName]) ? null : filters[fc.filterName];
                        Ext.apply(fc, {
                            cls: this.filterFieldCls,
                            itemId: fc.filterName,
                            anchor: '-1'
                        });
    
    
                        var filterField = Ext.ComponentManager.create(fc);
                        filterField.column = column;
                        this.setFieldValue(filterField, initValue);
                        this.fields[filterField.filterName] = filterField;
                        filterContainerConfig.items.push(filterField);
                    }
    
    
                    var filterContainer = Ext.create('Ext.container.Container', filterContainerConfig);
                    filterContainer.render(column.el);
                    this.containers[column.id] = filterContainer;
                }
            }
    
    
            if (this.enableTooltip) {
                this.tooltipTpl = new Ext.XTemplate(this.tooltipTpl, { text: this.bundle });
                this.tooltip = Ext.create('Ext.tip.ToolTip', {
                    target: this.grid.headerCt.el,
                    //delegate: '.'+this.filterContainerCls,
                    renderTo: Ext.getBody(),
                    html: this.tooltipTpl.apply({ filters: [] })
                });
                this.grid.on('headerfilterchange', function (grid, filters) {
                    var sf = filters.filterBy(function (filt) {
                        return !Ext.isEmpty(filt.value);
                    });
                    this.tooltip.update(this.tooltipTpl.apply({ filters: sf.getRange() }));
                }, this);
            }
    
    
            this.applyFilters();
            this.rendered = true;
            this.grid.fireEvent('headerfiltersrender', this.grid, this.fields, this.parseFilters());
        },
    
    
        delayedApplyFilter: function(){
            this.delayedApplyFiltersTask.delay(200);
        },
    
    
        onStoreLoad: function () {
            this.storeLoaded = true;
        },
    
    
        onFilterContainerEnter: function () {
            this.applyFilters();
        },
    
    
        resizeFilterContainer: function (headerCt, column, w, opts) {
            if (!this.containers) return;
            var cnt = this.containers[column.id];
            if (cnt) {
                cnt.setWidth(w);
                cnt.doLayout();
            }
        },
    
    
        destroyFilters: function () {
            this.rendered = false;
            if (this.fields) {
                for (var f in this.fields) {
                    Ext.destroy(this.fields[f]);
                }
                delete this.fields;
            }
    
    
            if (this.containers) {
                for (var c in this.containers) {
                    Ext.destroy(this.containers[c]);
                }
                delete this.containers;
            }
        },
    
    
        onDestroy: function () {
            this.destroyFilters();
            Ext.destroy(this.tooltip, this.tooltipTpl);
        },
    
    
        adjustFilterWidth: function () {
            if (!this.containers) {
                return;
            }
            var columns = this.grid.headerCt.getGridColumns();
            for (var c = 0; c < columns.length; c++) {
                var column = columns[c];
        		if(this.containers[column.id]){
                    this.containers[column.id].setWidth(column.getWidth());
    
    
                }
    
    
    //this.containers[column.id].setWidth(column.getWidth());
    
    
            }
        },
    
    
        resetFilters: function () {
            if (!this.fields) {
                return;
            }
            for (var fn in this.fields) {
                var f = this.fields[fn];
                if (!f.isDisabled() && !f.readOnly && Ext.isFunction(f.reset)) {
                    f.reset();
                }
            }
            this.applyFilters();
        },
    
    
        clearFilters: function () {
            if (!this.fields) {
                return;
            }
            for (var fn in this.fields) {
                var f = this.fields[fn];
                if (!f.isDisabled() && !f.readOnly) {
                    f.setValue('');
                }
            }
            this.applyFilters();
        },
    
    
        setFilters: function (filters) {
            if (!filters) {
                return;
            }
    
    
            if (Ext.isArray(filters)) {
                var conv = {};
                Ext.each(filters, function (filter) {
                    if (filter.property) {
                        conv[filter.property] = filter.value;
                    }
                });
                filters = conv;
            }
            else if (!Ext.isObject(filters)) {
                return;
            }
    
    
            this.initFilterFields(filters);
            this.applyFilters();
        },
    
    
        getFilters: function () {
            var filters = this.parseFilters();
            var res = new Ext.util.MixedCollection();
            for (var fn in filters) {
                var value = filters[fn];
                if (!value || value == '') {
                    continue;
                }
                var field = this.fields[fn];
                res.add(new Ext.util.Filter({
                    property: fn,
                    value: value,
                    root: this.filterRoot,
                    label: field.fieldLabel
                }));
            }
            return res;
        },
    
    
        parseFilters: function () {
            var filters = {};
            if (!this.fields) {
                return filters;
            }
            for (var fn in this.fields) {
                var field = this.fields[fn];
                if (!field.isDisabled() && field.isValid())
                    filters[field.filterName] = field.getSubmitValue ? field.getSubmitValue() : field.getValue();
            }
            return filters;
        },
    
    
        initFilterFields: function (filters) {
            if (!this.fields) {
                return;
            }
    
    
            for (var fn in filters) {
                var value = filters[fn];
                var field = this.fields[fn];
                if (field) {
                    this.setFieldValue(filterField, initValue);
                }
            }
        },
    
    
        countActiveFilters: function () {
            var fv = this.parseFilters();
            var af = 0;
            for (var fn in fv) {
                if (!Ext.isEmpty(fv[fn])) {
                    af++;
                }
            }
            return af;
        },
    
    
        parseStoreFilters: function () {
            var sf = this.grid.getStore().filters;
            var res = {};
            sf.each(function (filter) {
                var name = filter.property;
                var value = filter.value;
                if (name && value) {
                    res[name] = value;
                }
            });
            return res;
        },
    
    
        equalsFn: function(propertyName, filterValue){
            return function (model) {
                return model.get(propertyName) === filterValue;
            }
        },
        equalsNumberFn:function(propertyName,filterValue){
            return function (model) {
                return model.get(propertyName) === Number(filterValue);
            }
        },
        containsFn: function(propertyName, filterValue){
            return function (model) {
                return String(model.get(propertyName)).toUpperCase().indexOf(filterValue.toUpperCase()) > -1;
            }
        },
    
    
        containsInManyFn: function (propertyName, filterValue) {
            return function (model) {
                return ("" + filterValue).toUpperCase().indexOf(String(model.get(propertyName)).toUpperCase()) > -1;
            }
        },
    
    
        /*
         filterValue is an array of two defining the bounds, all inclusive
        */
        betweenFn: function (propertyName, filterValue) {
            return function (model) {
    
    
                var value = model.get(propertyName);
    
    
                if (!(filterValue instanceof Array)) {
                    return true;
                }
                var start = filterValue[0];
                var end = filterValue[1];
    
    
                if (!start && !end) {
                    return true;
                }
    
    
                if (!value) {
                    return false;
                }
    
    
                if (start) {
                    if (start instanceof Date) {
                        if (value.getTime() < start.getTime()) {
                            return false;
                        }
                    } else {
                        if (value < start) {
                            return false;
                        }
                    }
    
    
                }
    
    
                if (end) {
                    if (end instanceof Date) {
                        if (value.getTime() > end.getTime()) {
                            return false;
                        }
                    } else {
                        if (value > end) {
                            return false;
                        }
                    }
                }
                return true;
            }
        },
    
    
        applyFilters: function () {
            var filters = this.parseFilters();
            if (this.grid.fireEvent('beforeheaderfiltersapply', this.grid, filters, this.grid.getStore()) !== false) {
                var storeFilters = this.grid.getStore().filters;
                var change = false;
                var active = 0;
                for (var fn in filters) {
                    var value = filters[fn];
    
    
                    var sf = storeFilters.findBy(function (filter) {
                        return filter._property == fn;
                    });
    
    
                    if (Ext.isEmpty(value)) {
                        if (sf) {
                            storeFilters.remove(sf);
                            change = true;
                        }
                    }
                    else {
                        var field = this.fields[fn];
    
    
                        if (!sf || sf.value != filters[fn]) {
                            if (typeof (field.filterFn) == "string") {
                                var filterValue = filters[fn];
                                var filterFn = eval("new " + "this." + field.filterFn + "('" + fn + "', filterValue)");
                                var newSf = new Ext.util.Filter({
                                    root: this.filterRoot,
                                    property: fn,
                                    value: filters[fn],
                                    label: field.fieldLabel,
                                    filterFn: filterFn
                                });
                            } else {
                                var newSf = new Ext.util.Filter({
                                    root: this.filterRoot,
                                    property: fn,
                                    value: filters[fn],
                                    label: field.fieldLabel
                                });
                            }
    
    
                            if (sf) {
                                storeFilters.remove(sf);
                            }
                            storeFilters.add(newSf);
                            change = true;
                        }
                        active++;
                    }
                }
    
    
                this.grid.fireEvent('headerfiltersapply', this.grid, filters, active, this.grid.getStore());
                if (change) {
                    var curFilters = this.getFilters();
                    this.grid.fireEvent('headerfilterchange', this.grid, curFilters, this.lastApplyFilters, active, this.grid.getStore());
                    this.lastApplyFilters = curFilters;
                }
            }
        },
    
    
        reloadStore: function () {
            var gs = this.grid.getStore();
            if (this.grid.getStore().remoteFilter) {
                if (this.storeLoaded) {
                    gs.currentPage = 1;
                    gs.load();
                }
            }
        }
    });
    
    
    Ext.define('Ext.grid.ColumnComponentLayout.Override', {
        override: 'Ext.grid.ColumnComponentLayout',
        /**
          * Don't recalculate the inner height when a filter config
          * is applied to the column
          */
        publishInnerHeight: function (ownerContext, outerHeight) {
            if (this.owner.filter) {
                return;
            }
            this.callParent(arguments);
        }
    });

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Are you getting any errors when you build, or is it that the override is not getting applied?

  3. #3
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,294

    Default

    Getting error:

    Code:
    [ERR] C2016: Override target not found -- C:\Projects\platformscExtJS5\app\app\widget\HeaderFilters.js:774:10
    [WRN] Override Ext.grid.ColumnComponentLayout.Override in file C:\Projects\platformscExtJS5\app\app\widget\HeaderFilters
    .js had no target detected
    [ERR]
    [ERR] BUILD FAILED
    [ERR] com.sencha.exceptions.ExBuild: failed optimizing C:\Projects\platformscExtJS5\ext\src\grid\ColumnComponentLayout.j
    s
    [ERR]   at com.sencha.tools.comp
    [ERR] iler.ast.js.BaseNodeVisitor.walk(BaseNodeVisitor.java:31)
    [ERR]
    [ERR] Total time: 11 seconds
    [ERR] The following error occurred while executing this line:
    C:\Projects\platformscExtJS5\app\.sencha\app\build-impl.xml:266: The following error occurred while executing this line:
    
    
    C:\Projects\platformscExtJS5\app\.sencha\app\js-impl.xml:71: com.sencha.exceptions.ExBuild: failed optimizing

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

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

  5. #5
    Sencha User dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,748

    Default

    Especially when dealing with overrides, the one-file rule is really important. This is because overrides have important timing constraints (think override of a mixin - which must be applied before the mixin is mixed in to anything).

    While it may have worked in the past, overrides really do need to be isolated in their own JS file. This can also create problems for normal classes as well, of course... overrides are just have more of an affect on their in which they reside.

    Can you see if moving the override into its own file fixes the issue? Given the error message that you are seeing, I am not certain that it will...
    Don Griffin

    "Use the source, Luke!"

Tags for this Thread

Posting Permissions

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