Quantcast
Channel: SmartClient Forums
Viewing all articles
Browse latest Browse all 4756

Interesting behavior when resizing nested layout and AJAX

$
0
0
Hi all,
I have a nesting layout, where I want the left side to get refresh once the resizeBar is moved from left to right.

On resized, I need to make an AJAX call then change the image source when the response arrives.

The nesting layout works fine when the display area gets bigger, but when the area get smaller the resizeBar stays at the same place, but the image gets smaller.


Here is an exemple that can be run out of the demo on the isomorphic site.


--- Context for testing ---
NOTE : In order for the test case to work make sure there is no scroll in the display (view Panel)

I have the same behaviour on Chrome, IE11, FF

http://www.smartclient.com/#layoutNesting

isc.HLayout.create({
width: "100%",
height: "100%",
members: [
isc.Img.create({
ID:"myImg",
width: "30%",
showResizeBar: true,
border: "1px solid blue",
imageType: "normal",
//src:"http://dummyimage.com/" + this.width + "X" + this.height,
resized: function(){
get("http://www.smartclient.com/images/edevices_combo3.png", function(response){
var height = myImg.height - 2;
myImg.setSrc("http://dummyimage.com/" + myImg.width + "X" + height);
});



}
}),
isc.VLayout.create({
width: "70%",
members: [
isc.Label.create({
contents: "Listing",
align: "center",
overflow: "hidden",
height: "30%",
showResizeBar: true,
border: "1px solid blue"
}),
isc.Label.create({
contents: "Details",
align: "center",
overflow: "hidden",
height: "70%",
border: "1px solid blue"
})
]
})
]
});

var requestObj = false;

if (window.XMLHttpRequest) {
requestObj = new XMLHttpRequest();
} else if (window.ActiveXObject) {
requestObj = new ActiveXObject("Microsoft.XMLHTTP");
}

function get(source, callbackSuccess)
{
if (requestObj) {
//var obj = document.querySelector('#'+id);
requestObj.open("GET", source);
requestObj.onreadystatechange = function ()
{
if (requestObj.readyState == 4 && requestObj.status == 200) {
//obj.innerHTML = requestObj.responseText;
callbackSuccess(requestObj.responseText);
}
}
requestObj.send(null);
}
}

Viewing all articles
Browse latest Browse all 4756

Trending Articles