Results 1 to 7 of 7

Thread: [CLOSED][3.0.0] Ext.Resizable in IE8 doesn't seem to work properly at all

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

    Default [CLOSED][3.0.0] Ext.Resizable in IE8 doesn't seem to work properly at all

    This is the simple code I have written. Works just fine in FireFox. IE when the user goes to use the resizer it goes all out of whack and the resizable handles get separated from the image being resized. After a user attempts to resize the image the user is no longer able to drage the image around.

    Code:
        var newImage = new Ext.ux.Image({
            id: 'newImage',
            height: 117,
            width: 137,
            src: '/skpets/images/portfolio_image.jpg'
            
        });
        
        var designPanel = new Ext.Panel({
            title: 'Design Panel',
            id: 'designPanel',
            //applyTo: 'dPanel',
            border: true,
            width:     800,
            height: 600,
            items: [newImage],
            //renderTo: document.body
        });
        
        
        var imageWin = new Ext.Window({
            id: 'imageWin',
            //constrain: true,
            draggable: true,
            resizable: true,
            closable: true,
            hideBorders: true,
            shaddow: false,
            shim: false,
            items: [designPanel],
    
            
        });
    
        imageWin.show();
        
        var resizer = new Ext.Resizable('newImage', {
            wrap            : true,
            //border            : false,
            //constrainTo        : 'designPanel',
            pinned            : false,
            minWidth        : 50,
            minHeight        : 50,
            preserveRatio    : true,
            dynamic            : true,
            handles            : 'n s e w ne nw se sw', // shorthand for 'n s e w ne nw se sw'
            draggable        : true
        });

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256

    Default

    And what is Ext.ux.Image? Can you include the source for it?
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3

    Default

    Here is the Ext.ux.Image info: http://www.extjs.com/forum/showthread.php?t=59623

    The code in the Ext.ux.Image:



    Code:
    Ext.namespace('Ext.ux');
    
    /**
     * @class Ext.ux.Image
     * @extends Ext.BoxComponent
     * @desc
     * Image component for ExtJs<br><br>
     * 
     * Forum Thread : <a href="http://extjs.com/forum/showthread.php?p=286538">http://extjs.com/forum/showthread.php?p=286538</a><br>
     * Project Home : <a href="http://code.google.com/p/ext-ux-image/">http://code.google.com/p/ext-ux-image/</a>
     * 
     * @version 1.0
     * @licence <a href="http://www.gnu.org/licenses/gpl.html">GPLv3</a>
     * @author Charles Opute Odili (chalu) <a href="mailto:[email protected]">[email protected]</a>
     * 
     * @constructor
     * @param {Object} config The config object
     */ 
    Ext.ux.Image = Ext.extend(Ext.BoxComponent, {
        /**
         * @cfg {String} src the URL of an image to initiaize it with, 
         * deafults to Ext.BLANK_IMAGE_URL
         */
        src : Ext.BLANK_IMAGE_URL,
        
        /**
         * @cfg
         */
        autoEl : {
            tag : 'img',
            cls : 'tng-managed-image',
            src : Ext.BLANK_IMAGE_URL        
        },
        
        /**
         * Inits this component with the specified config-properties and automatically
         * creates its components.
         */
        initComponent: function () {
            Ext.ux.Image.superclass.initComponent.apply(this, arguments);
        },
        
        /**
         * Renders the component within it's container
         */
        onRender: function(){
            Ext.ux.Image.superclass.onRender.apply(this, arguments);
            
            if(!Ext.isEmpty(this.src) && (this.src !== Ext.BLANK_IMAGE_URL)){
                this.setSrc(this.src);
            }
            this.relayEvents(this.el, 
                [
                    "click", "dblclick", "mousedown", "mouseup", "mouseover",
                    "mousemove", "mouseout", "keypress", "keydown", "keyup"
                ]
            );                
        },
        
        /**
         * Sets the src for the image component
         * @cfg {String} src the new src
         */
        setSrc: function (src) {
            this.el.dom.src = src;
        }
    });
    
    Ext.reg('image', Ext.ux.Image);

  4. #4

    Default

    Ext.ux.Image code is as follows:

    Code:
    Ext.namespace('Ext.ux');
    
    /**
     * @class Ext.ux.Image
     * @extends Ext.BoxComponent
     * @desc
     * Image component for ExtJs<br><br>
     * 
     * @constructor
     * @param {Object} config The config object
     */ 
    Ext.ux.Image = Ext.extend(Ext.BoxComponent, {
        /**
         * @cfg {String} src the URL of an image to initiaize it with, 
         * deafults to Ext.BLANK_IMAGE_URL
         */
        src : Ext.BLANK_IMAGE_URL,
        
        /**
         * @cfg
         */
        autoEl : {
            tag : 'img',
            cls : 'tng-managed-image',
            src : Ext.BLANK_IMAGE_URL        
        },
        
        /**
         * Inits this component with the specified config-properties and automatically
         * creates its components.
         */
        initComponent: function () {
            Ext.ux.Image.superclass.initComponent.apply(this, arguments);
        },
        
        /**
         * Renders the component within it's container
         */
        onRender: function(){
            Ext.ux.Image.superclass.onRender.apply(this, arguments);
            
            if(!Ext.isEmpty(this.src) && (this.src !== Ext.BLANK_IMAGE_URL)){
                this.setSrc(this.src);
            }
            this.relayEvents(this.el, 
                [
                    "click", "dblclick", "mousedown", "mouseup", "mouseover",
                    "mousemove", "mouseout", "keypress", "keydown", "keyup"
                ]
            );                
        },
        
        /**
         * Sets the src for the image component
         * @cfg {String} src the new src
         */
        setSrc: function (src) {
            this.el.dom.src = src;
        }
    });
    
    Ext.reg('image', Ext.ux.Image);

  5. #5
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256

    Default

    I just ran it against the SVN version with IE8 and it works as expected. Try it when 3.1 comes out shortly.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  6. #6

    Default

    Thank you for checking it against the recent repository. Any hints at when that is scheduled to be released?

  7. #7
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236

    Default

    Quote Originally Posted by systemlevel View Post
    Thank you for checking it against the recent repository. Any hints at when that is scheduled to be released?
    refer to the roadmap
    http://www.extjs.com/products/extjs/roadmap.php

    hold your horses. it'll be out soon.

Posting Permissions

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