Results 1 to 5 of 5

Thread: User Extension causing Build problems

  1. #1
    Sencha User 6dust's Avatar
    Join Date
    Apr 2008
    Posts
    26
    Answers
    1
    Vote Rating
    0
      0  

    Default Answered: User Extension causing Build problems

    I've been using Sencha Architect for a few years now (still back on 3.5) developing applciations for my work with ExtJS 5.1. Up until now, I've never "built" a web application, I've only published the source files to the server and loaded the application that way.

    Recently, I found enough free time to look into building the application and want to try it out and see if we can work it into our code promotion process. I'm running into a problem with my first attempts though. My application has one Architect user extension that I pieced together form example code on the internet. Without building the application, the code runs just fine, including the user extension. However, when I click build, the build process always errors out with the message:

    [ERR] Cannot satisfy requirements for "Ext.tree.Panel"!
    [ERR] The following versions cannot be satisfied:
    [ERR] TreePicker5: Ext.tree.Panel (No matches!)

    Ext.tree.Panel is in the required block for the user extension, but I'm puzzled as to why the build tools can't find it. Any thoughts?

  2. I think I figured it out. I had Ext.tree.Panel listed in the requires section of the extension's package.json file. Removed it from there, and it looks to be working fine now.

  3. #2
    Sencha User 6dust's Avatar
    Join Date
    Apr 2008
    Posts
    26
    Answers
    1
    Vote Rating
    0
      0  

    Default ux code

    Not sure if it would help, but here is the code from the user extension:

    Code:
    /**
     * A Picker field that contains a tree panel on its popup, enabling selection of tree nodes.
     */
    Ext.define('Ext.ux.TreePicker5', {
        extend: 'Ext.form.field.Picker',
        alias: 'widget.treepicker5',
        
        requires: [
            'Ext.tree.Panel'
        ],
    
    
        triggerCls: Ext.baseCSSPrefix + 'form-arrow-trigger',
    
    
        config: {
            /**
             * @cfg {Ext.data.TreeStore} store
             * A tree store that the tree picker will be bound to
             */
            store: null,
            
            /**
             * @cfg {String} qualifiedPath
             * A fully qualified path for the store, in case used from another application
             */
            qualifiedPath: "",
            
            rootVisible: true,
    
    
            /**
             * @cfg {String} displayField
             * The field inside the model that will be used as the node's text.
             * Defaults to the default value of {@link Ext.tree.Panel}'s `displayField` configuration.
             */
            displayField: null,
            valueField: null,
    
    
            /**
             * @cfg {Array} columns
             * An optional array of columns for multi-column trees
             */
            columns: null,
    
    
            /**
             * @cfg {Boolean} selectOnTab
             * Whether the Tab key should select the currently highlighted item. Defaults to `true`.
             */
            selectOnTab: true,
    
    
            /**
             * @cfg {Number} maxPickerHeight
             * The maximum height of the tree dropdown. Defaults to 300.
             */
            maxPickerHeight: 300,
    
    
            /**
             * @cfg {Number} minPickerHeight
             * The minimum height of the tree dropdown. Defaults to 100.
             */
            minPickerHeight: 100,
            
            /**
             *
             * @cfg {Boolean} leafOnly
             * Whether the "select" event should only be fired when for leaves
             */
            leafOnly: true
        },
       
        editable: false,
    
    
        initComponent: function() {
            var me = this;
    
    
            if(typeof me.store === "string"){
                var tempStore = Ext.StoreManager.lookup(me.qualifiedPath + me.store);
                if(tempStore === undefined){
                    me.store = Ext.StoreManager.lookup(me.store);
                } else {
                    me.store = Ext.StoreManager.lookup(me.qualifiedPath + me.store);
                }
            }
            
            if(me.store === null || me.store === undefined){
                me.store = Ext.create('Ext.data.TreeStore', {
                    root: {
                        expanded: true,
                        children: []
                    }
                });
            }
    
    
            if(me.store.getRootNode() === null  || me.store.getRootNode() === undefined){
                me.store.setRootNode(
                    {
                        expanded: true,
                        children: []
                    }
                );
            }
    
    
            me.callParent(arguments);
            
            //me.addEvents(
            //    /**
            //     * @event select
            //     * Fires when a tree node is selected
            //     * @param {Ext.ux.TreePicker} picker        This tree picker
            //     * @param {Ext.data.Model} record           The selected record
            //     */
            //    'select'
            //);
    
    
          
             me.mon(me.store, {
                scope: me,
                load: me.onLoad,
                update: me.onUpdate
            });        
            
    
    
            
    
    
        },
    
    
        /**
         * Creates and returns the tree panel to be used as this field's picker.
         */
        createPicker: function() {
            var me = this,
                picker = new Ext.tree.Panel({
                    shrinkWrap: 2,
                    store: me.store,
                    floating: true,
                    displayField: me.displayField,
                    valueField: me.valueField,
                    columns: me.columns,
                    /*
                    resizable: true,
                    resizeHandles: 's e se',
                    autoScroll: true,
                    width: 300,
                    minWidth: me.bodyEl.getWidth(),
                    */
                    
                   // minHeight: me.minPickerHeight,
                   // maxHeight: me.maxPickerHeight,
                    maxHeight: me.maxTreeHeight,
                    manageHeight: false,
                    rootVisible: me.rootVisible,
                    shadow: false,
                    listeners: {
                        scope: me,
                        itemclick: me.onItemClick
                    },
                    viewConfig: {
                        listeners: {
                            scope: me,
                            render: me.onViewRender
                        }
                    }
                }),
                view = picker.getView();
                
                view.on('render', me.setPickerViewStyles, me);
    
    
    
    
            if (Ext.isIE9 && Ext.isStrict) {
                // In IE9 strict mode, the tree view grows by the height of the horizontal scroll bar when the items are highlighted or unhighlighted.
                // Also when items are collapsed or expanded the height of the view is off. Forcing a repaint fixes the problem.
                view.on({
                    scope: me,
                    highlightitem: me.repaintPickerView,
                    unhighlightitem: me.repaintPickerView,
                    afteritemexpand: me.repaintPickerView,
                    afteritemcollapse: me.repaintPickerView
                });
            }      
            
            
            return picker;
        },
        
        setPickerViewStyles: function(view) {
            view.getEl().setStyle({
                'min-height': this.minPickerHeight + 'px',
                'max-height': this.maxPickerHeight + 'px'
            });
        },
    
    
        
        onViewRender: function(view){
            view.getEl().on('keypress', this.onPickerKeypress, this);
        },
    
    
        /**
         * repaints the tree view
         */
        repaintPickerView: function() {
            var style = this.picker.getView().getEl().dom.style;
    
    
            // can't use Element.repaint because it contains a setTimeout, which results in a flicker effect
            style.display = style.display;
        },
    
    
        /**
         * Aligns the picker to the input element
         */
        alignPicker: function() {
            var me = this,
                picker;
    
    
            if (me.isExpanded) {
                picker = me.getPicker();
                if (me.matchFieldWidth) {
                    // Auto the height (it will be constrained by max height)
                    picker.setWidth(me.bodyEl.getWidth());
                }
                if (picker.isFloating()) {
                    me.doAlign();
                }
            }
        },
    
    
        /**
         * Handles a click even on a tree node
         * @private
         * @param {Ext.tree.View} view
         * @param {Ext.data.Model} record
         * @param {HTMLElement} node
         * @param {Number} rowIndex
         * @param {Ext.EventObject} e
         */
        onItemClick: function(view, record, node, rowIndex, e) {
            this.selectItem(record);
        },
    
    
        /**
         * Handles a keypress event on the picker element
         * @private
         * @param {Ext.EventObject} e
         * @param {HTMLElement} el
         */
        onPickerKeypress: function(e, el) {
            var key = e.getKey();
    
    
            if(key === e.ENTER || (key === e.TAB && this.selectOnTab)) {
                this.selectItem(this.picker.getSelectionModel().getSelection()[0]);
            }
        },
    
    
        /**
         * Changes the selection to a given record and closes the picker
         * @private
         * @param {Ext.data.Model} record
         */
        selectItem: function(record) {
            var me = this;
            
            if(me.leafOnly) {
                if (record.data['leaf']) {
                    if(me.valueField === null) {
                        me.setValue(record.getId());
                    } else {
                        me.setValue(record.get(me.valueField));
                    }
                    // me.picker.hide();
                    me.collapse();
                    me.inputEl.focus();
                    me.fireEvent('select', me, record);
                }
            } else {
                if(me.valueField === null) {
                    me.setValue(record.getId());
                } else {
                    me.setValue(record.get(me.valueField));
                }
                // me.picker.hide();
                me.collapse();
                me.inputEl.focus();
                me.fireEvent('select', me, record);
            }
    
    
        },
    
    
        /**
         * Runs when the picker is expanded.  Selects the appropriate tree node based on the value of the input element,
         * and focuses the picker so that keyboard navigation will work.
         * @private
         */
        onExpand: function() {
            var me = this,
                picker = me.picker,
                store = picker.store,
                value = me.value,
                node;
    
    
            
            if (value) {
                node = store.getNodeById(value);
            }
            
            if (!node) {
                node = store.getRootNode();
            }
            
            picker.selectPath(node.getPath());
    
    
            Ext.defer(function() {
                picker.getView().focus();
            }, 1);
        },
    
    
        /**
         * Sets the specified value into the field
         * @param {Mixed} value
         * @return {Ext.ux.TreePicker} this
         */
        setValue: function(value) {
            var me = this,
                record;
    
    
            me.value = value;
    
    
            if (me.store.loading) {
                // Called while the Store is loading. Ensure it is processed by the onLoad method.
                return me;
            }
                
            // try to find a record in the store that matches the value
            record = value ? me.store.getNodeById(value) : me.store.getRootNode();
            if (value === undefined) {
                record = me.store.getRootNode();
                me.value = record.getId();
            } else {
                record = me.store.getNodeById(value);
            }
    
    
            // set the raw value to the record's display field if a record was found
            me.setRawValue(record ? record.get(me.displayField) : '');
    
    
            return me;
        },
        
        getSubmitValue: function(){
            return this.value;    
        },
    
    
        /**
         * Returns the current data value of the field (the idProperty of the record)
         * @return {Number}
         */
        getValue: function() {
            return this.value;
        },
    
    
        /**
         * Handles the store's load event.
         * @private
         */
        onLoad: function() {
            var value = this.value;
    
    
            if (value) {
                this.setValue(value);
            }
        },
        
        onUpdate: function(store, rec, type, modifiedFieldNames){
            var display = this.displayField;
            
            if (type === 'edit' && modifiedFieldNames && Ext.Array.contains(modifiedFieldNames, display) && this.value === rec.getId()) {
                this.setRawValue(rec.get(display));
            }
        }
    
    
    });

  4. #3

    Join Date
    May 2014
    Posts
    35
    Vote Rating
    3
      0  

    Default Requires

    Have you tried adding Ext.tree.Panel to the requires section of the Application?




    Quote Originally Posted by 6dust View Post
    Not sure if it would help, but here is the code from the user extension:

    Code:
    /**
     * A Picker field that contains a tree panel on its popup, enabling selection of tree nodes.
     */
    Ext.define('Ext.ux.TreePicker5', {
        extend: 'Ext.form.field.Picker',
        alias: 'widget.treepicker5',
        
        requires: [
            'Ext.tree.Panel'
        ],
    
    
        triggerCls: Ext.baseCSSPrefix + 'form-arrow-trigger',
    
    
        config: {
            /**
             * @cfg {Ext.data.TreeStore} store
             * A tree store that the tree picker will be bound to
             */
            store: null,
            
            /**
             * @cfg {String} qualifiedPath
             * A fully qualified path for the store, in case used from another application
             */
            qualifiedPath: "",
            
            rootVisible: true,
    
    
            /**
             * @cfg {String} displayField
             * The field inside the model that will be used as the node's text.
             * Defaults to the default value of {@link Ext.tree.Panel}'s `displayField` configuration.
             */
            displayField: null,
            valueField: null,
    
    
            /**
             * @cfg {Array} columns
             * An optional array of columns for multi-column trees
             */
            columns: null,
    
    
            /**
             * @cfg {Boolean} selectOnTab
             * Whether the Tab key should select the currently highlighted item. Defaults to `true`.
             */
            selectOnTab: true,
    
    
            /**
             * @cfg {Number} maxPickerHeight
             * The maximum height of the tree dropdown. Defaults to 300.
             */
            maxPickerHeight: 300,
    
    
            /**
             * @cfg {Number} minPickerHeight
             * The minimum height of the tree dropdown. Defaults to 100.
             */
            minPickerHeight: 100,
            
            /**
             *
             * @cfg {Boolean} leafOnly
             * Whether the "select" event should only be fired when for leaves
             */
            leafOnly: true
        },
       
        editable: false,
    
    
        initComponent: function() {
            var me = this;
    
    
            if(typeof me.store === "string"){
                var tempStore = Ext.StoreManager.lookup(me.qualifiedPath + me.store);
                if(tempStore === undefined){
                    me.store = Ext.StoreManager.lookup(me.store);
                } else {
                    me.store = Ext.StoreManager.lookup(me.qualifiedPath + me.store);
                }
            }
            
            if(me.store === null || me.store === undefined){
                me.store = Ext.create('Ext.data.TreeStore', {
                    root: {
                        expanded: true,
                        children: []
                    }
                });
            }
    
    
            if(me.store.getRootNode() === null  || me.store.getRootNode() === undefined){
                me.store.setRootNode(
                    {
                        expanded: true,
                        children: []
                    }
                );
            }
    
    
            me.callParent(arguments);
            
            //me.addEvents(
            //    /**
            //     * @event select
            //     * Fires when a tree node is selected
            //     * @param {Ext.ux.TreePicker} picker        This tree picker
            //     * @param {Ext.data.Model} record           The selected record
            //     */
            //    'select'
            //);
    
    
          
             me.mon(me.store, {
                scope: me,
                load: me.onLoad,
                update: me.onUpdate
            });        
            
    
    
            
    
    
        },
    
    
        /**
         * Creates and returns the tree panel to be used as this field's picker.
         */
        createPicker: function() {
            var me = this,
                picker = new Ext.tree.Panel({
                    shrinkWrap: 2,
                    store: me.store,
                    floating: true,
                    displayField: me.displayField,
                    valueField: me.valueField,
                    columns: me.columns,
                    /*
                    resizable: true,
                    resizeHandles: 's e se',
                    autoScroll: true,
                    width: 300,
                    minWidth: me.bodyEl.getWidth(),
                    */
                    
                   // minHeight: me.minPickerHeight,
                   // maxHeight: me.maxPickerHeight,
                    maxHeight: me.maxTreeHeight,
                    manageHeight: false,
                    rootVisible: me.rootVisible,
                    shadow: false,
                    listeners: {
                        scope: me,
                        itemclick: me.onItemClick
                    },
                    viewConfig: {
                        listeners: {
                            scope: me,
                            render: me.onViewRender
                        }
                    }
                }),
                view = picker.getView();
                
                view.on('render', me.setPickerViewStyles, me);
    
    
    
    
            if (Ext.isIE9 && Ext.isStrict) {
                // In IE9 strict mode, the tree view grows by the height of the horizontal scroll bar when the items are highlighted or unhighlighted.
                // Also when items are collapsed or expanded the height of the view is off. Forcing a repaint fixes the problem.
                view.on({
                    scope: me,
                    highlightitem: me.repaintPickerView,
                    unhighlightitem: me.repaintPickerView,
                    afteritemexpand: me.repaintPickerView,
                    afteritemcollapse: me.repaintPickerView
                });
            }      
            
            
            return picker;
        },
        
        setPickerViewStyles: function(view) {
            view.getEl().setStyle({
                'min-height': this.minPickerHeight + 'px',
                'max-height': this.maxPickerHeight + 'px'
            });
        },
    
    
        
        onViewRender: function(view){
            view.getEl().on('keypress', this.onPickerKeypress, this);
        },
    
    
        /**
         * repaints the tree view
         */
        repaintPickerView: function() {
            var style = this.picker.getView().getEl().dom.style;
    
    
            // can't use Element.repaint because it contains a setTimeout, which results in a flicker effect
            style.display = style.display;
        },
    
    
        /**
         * Aligns the picker to the input element
         */
        alignPicker: function() {
            var me = this,
                picker;
    
    
            if (me.isExpanded) {
                picker = me.getPicker();
                if (me.matchFieldWidth) {
                    // Auto the height (it will be constrained by max height)
                    picker.setWidth(me.bodyEl.getWidth());
                }
                if (picker.isFloating()) {
                    me.doAlign();
                }
            }
        },
    
    
        /**
         * Handles a click even on a tree node
         * @private
         * @param {Ext.tree.View} view
         * @param {Ext.data.Model} record
         * @param {HTMLElement} node
         * @param {Number} rowIndex
         * @param {Ext.EventObject} e
         */
        onItemClick: function(view, record, node, rowIndex, e) {
            this.selectItem(record);
        },
    
    
        /**
         * Handles a keypress event on the picker element
         * @private
         * @param {Ext.EventObject} e
         * @param {HTMLElement} el
         */
        onPickerKeypress: function(e, el) {
            var key = e.getKey();
    
    
            if(key === e.ENTER || (key === e.TAB && this.selectOnTab)) {
                this.selectItem(this.picker.getSelectionModel().getSelection()[0]);
            }
        },
    
    
        /**
         * Changes the selection to a given record and closes the picker
         * @private
         * @param {Ext.data.Model} record
         */
        selectItem: function(record) {
            var me = this;
            
            if(me.leafOnly) {
                if (record.data['leaf']) {
                    if(me.valueField === null) {
                        me.setValue(record.getId());
                    } else {
                        me.setValue(record.get(me.valueField));
                    }
                    // me.picker.hide();
                    me.collapse();
                    me.inputEl.focus();
                    me.fireEvent('select', me, record);
                }
            } else {
                if(me.valueField === null) {
                    me.setValue(record.getId());
                } else {
                    me.setValue(record.get(me.valueField));
                }
                // me.picker.hide();
                me.collapse();
                me.inputEl.focus();
                me.fireEvent('select', me, record);
            }
    
    
        },
    
    
        /**
         * Runs when the picker is expanded.  Selects the appropriate tree node based on the value of the input element,
         * and focuses the picker so that keyboard navigation will work.
         * @private
         */
        onExpand: function() {
            var me = this,
                picker = me.picker,
                store = picker.store,
                value = me.value,
                node;
    
    
            
            if (value) {
                node = store.getNodeById(value);
            }
            
            if (!node) {
                node = store.getRootNode();
            }
            
            picker.selectPath(node.getPath());
    
    
            Ext.defer(function() {
                picker.getView().focus();
            }, 1);
        },
    
    
        /**
         * Sets the specified value into the field
         * @param {Mixed} value
         * @return {Ext.ux.TreePicker} this
         */
        setValue: function(value) {
            var me = this,
                record;
    
    
            me.value = value;
    
    
            if (me.store.loading) {
                // Called while the Store is loading. Ensure it is processed by the onLoad method.
                return me;
            }
                
            // try to find a record in the store that matches the value
            record = value ? me.store.getNodeById(value) : me.store.getRootNode();
            if (value === undefined) {
                record = me.store.getRootNode();
                me.value = record.getId();
            } else {
                record = me.store.getNodeById(value);
            }
    
    
            // set the raw value to the record's display field if a record was found
            me.setRawValue(record ? record.get(me.displayField) : '');
    
    
            return me;
        },
        
        getSubmitValue: function(){
            return this.value;    
        },
    
    
        /**
         * Returns the current data value of the field (the idProperty of the record)
         * @return {Number}
         */
        getValue: function() {
            return this.value;
        },
    
    
        /**
         * Handles the store's load event.
         * @private
         */
        onLoad: function() {
            var value = this.value;
    
    
            if (value) {
                this.setValue(value);
            }
        },
        
        onUpdate: function(store, rec, type, modifiedFieldNames){
            var display = this.displayField;
            
            if (type === 'edit' && modifiedFieldNames && Ext.Array.contains(modifiedFieldNames, display) && this.value === rec.getId()) {
                this.setRawValue(rec.get(display));
            }
        }
    
    
    });

  5. #4
    Sencha User 6dust's Avatar
    Join Date
    Apr 2008
    Posts
    26
    Answers
    1
    Vote Rating
    0
      0  

    Default

    I did try that, and unfortunately, no help. The paths section of my Application looks like this:

    Code:
    Ext.Loader.setConfig({
        paths: {
            Ext: '/web_scripts_and_tools/ext/ext-5.1/src',
            'Ext.ux': '/web_scripts_and_tools/ext/ext-5.1/examples/ux',
            'Ext.ux.TreePicker': 'packages/TreePicker/src/TreePicker.js',
            'Ext.ux.TreePicker5': 'packages/TreePicker5/src/TreePicker5.js'
        }
    });
    And the requires portion:
    Code:
    requires: [
            'Ext.Loader',
            'Ext.ux.form.MultiSelect',
            'Ext.tree.Panel',
            'Ext.ux.TreePicker5'
        ],

  6. #5
    Sencha User 6dust's Avatar
    Join Date
    Apr 2008
    Posts
    26
    Answers
    1
    Vote Rating
    0
      0  

    Default

    I think I figured it out. I had Ext.tree.Panel listed in the requires section of the extension's package.json file. Removed it from there, and it looks to be working fine now.

Similar Threads

  1. Debugging a new User Extension
    By Carl.Wagar in forum Sencha Architect User Extensions/Templates
    Replies: 2
    Last Post: 16 Mar 2017, 10:57 AM
  2. No user extension subforum for 5.x ?
    By Scorpie in forum Ext 5: Q&A
    Replies: 1
    Last Post: 1 Apr 2015, 2:47 PM
  3. Replies: 3
    Last Post: 20 Nov 2014, 2:42 PM
  4. How to import user extension?
    By sergiomichels in forum Sencha Architect 3.x: Q&A
    Replies: 2
    Last Post: 19 Aug 2013, 8:39 AM
  5. Ext.ux.notification extension causing errors in my app
    By vayumahesh in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 5 Feb 2009, 8:33 AM

Posting Permissions

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