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