PDA

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



systemlevel
8 Dec 2009, 3:26 AM
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.



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
});

evant
8 Dec 2009, 4:05 AM
And what is Ext.ux.Image? Can you include the source for it?

systemlevel
8 Dec 2009, 4:53 AM
Here is the Ext.ux.Image info: http://www.extjs.com/forum/showthread.php?t=59623

The code in the Ext.ux.Image:





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:chaluwa@gmail.com">chaluwa@gmail.com</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);

systemlevel
8 Dec 2009, 4:56 AM
Ext.ux.Image code is as follows:



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);

evant
8 Dec 2009, 5:14 AM
I just ran it against the SVN version with IE8 and it works as expected. Try it when 3.1 comes out shortly.

systemlevel
11 Dec 2009, 3:06 AM
Thank you for checking it against the recent repository. Any hints at when that is scheduled to be released?

mystix
11 Dec 2009, 3:40 AM
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.