ExtJs-выполнить запрос при evt: listener: resize
Таков вопрос.
Есть у меня связка jQuery + ExtJS, картинка из сервера грузится в окно ExtJS. Потом с этой картинкой работает jQuery. Не спрашивайте почему и зачем - так нужно. Нужно сделать следующее, я почти сделал, но мои знания ExtJs нулевые, помогите строчкой кода. Значитс нужно отсылать на сервер повторный запрос если окно изменило свои размеры. Евент нашел и подписал на него вывод в Консоль, все срабатывает, а как мне на этот евент подписать запрос на сервер??? Вот здесь я посылаю первый запрос при загрузке, его мне нужно отсылать повторно по евенту. $("#target").one('load', loadCallback).attr('src', adresse).each(function () { if (this.complete) $(this).trigger('load'); }); Вот мой html. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>JFreeChart_Bsp</title> <link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css"> <link rel="stylesheet" type="text/css" href="./jQuery/imgareaselect-0.9.8/css/imgareaselect-default.css"/> <script type="text/javascript" src="./jQuery/jquery-1.7.2.js"></script> <script type="text/javascript" src="./jQuery/imgareaselect-0.9.8/scripts/jquery.min.js"></script> <script type="text/javascript" src="./jQuery/imgareaselect-0.9.8/scripts/jquery.imgareaselect.js"></script> <script type="text/javascript" src="./extjs/ext-all-debug.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() { var win = new Ext.Window({ width : 1465, height: 785, id : 'autoload-win', autoScroll : true, html: '<div id="generateImage"><img id="target" alt="generateImg" height="{height}" width="{width}" /></div>', listeners:{ resize: function (panel, w,h){ console.log("wi: "+ w +" Hi: "+h); } } }); win.show(); $("#target").one('load', loadCallback).attr('src', adresse).each(function () { if (this.complete) $(this).trigger('load'); }); $('#target').imgAreaSelect({ handles: true, movable: false, resizable: false, autoHide: true, onSelectEnd: function (img, selection) { $("#target").one('load', loadCallback).attr("src", adresse + "&x1=" + selection.x1 + "&y1=" + selection.y1 + "&width=" + selection.width + "&height=" + selection.height).each( function () { if ($("#target").complete) $("#target").trigger('load'); }); } }); }); </script> <script type="text/javascript"> var random = Math.floor((Math.random() * 10000) + 1); var cookie = "cookieName=" + random; var adresse = "/JFreeeChartServlet/generateImg?" + cookie; var cookieString = new String(); function loadCallback() { cookieString = get_all_cookie(random) // console.log("Cookie@"+random+" DocCookie = " + cookieString); // console.log("Cookie@"+random+" : "+substr_search("plotWidth")); // console.log("Cookie@"+random+" : "+substr_search("plotHeight")); // console.log("Cookie@"+random+" : "+substr_search("plotX")); // console.log("Cookie@"+random+" : "+substr_search("plotY")); setVars(substr_search("plotWidth"), substr_search("plotHeight"), substr_search("plotX"),substr_search("plotY")); } function get_all_cookie(cookie_name) { var results = document.cookie.match('(^|;) ?' + cookie_name + '=([^;]*)(;|$)'); if (results) return (unescape(results[2])); else return null; } function substr_search(str){ var strStartPos = cookieString.search(str); var startPos = cookieString.indexOf("=", strStartPos); var endPos = cookieString.indexOf(":", strStartPos); return cookieString.substring(startPos+1, endPos); } </script> </body> </html> СПААСИБО!! |
из ваших слов я понял чуть меньше чем нечего.
у вас есть событие resize: function (panel, w,h){ console.log("wi: "+ w +" Hi: "+h); } ну и в чём проблема ? вы не знаете как сделать запрос на сервер ? Если да то давайте хотя бы разберемся что вы хотите оттуда запросить. |
Цитата:
Я все по порядку написал, и в конце вопрос задал. Ну вот что у меня есть и куда я гружу, я написал вверху. Да, евент работает, на консоль выдает. По собитию евента мне нужно вызвать вот эту функцию. $("#target").one('load', loadCallback).attr('src', adresse).each(function () { if (this.complete) $(this).trigger('load');}); Она отправляет запрос на сервер, позволяет дождаться полной загрузки изображения с сервера, потом прочитать кукисы и вставить куда нужно, но это не важно к вопросу. Изображение грузится в контейнер ExtJs. проблема в том, что мне не получается вызвать эту jQuery-функцию по событию евента. Вот мне подсказали как-то так.. Ext.Ajax.request({ url:'хттп://урл.для.запроса', method: 'POST', // или 'GET', params: { key1: 'value1', // объект будет преобразован в пары "ключ-значение" и key2: 'value2' // вставлены урл при GET или в параметры запроса при POST }, success: function(response){ // функция, которая будет вызвана при успешном завершении } }) а как все слепить в кучку? Спасибо. |
Цитата:
Цитата:
|
:(:(:(
Не понимаю. что не понятно, есть функция jQuery которая грузит картинку с сервера в окошко ExtJs. При изменении окошка, мне нужно чтоб функция отослала на сервер новые размеры окошка ExtJS, сервер мне в ответ присылает измененное изображение. Что конкретно не понятно, я опишу по другому. Спасибо. |
Ext.onReady(function() { var win = new Ext.Window({ width : 1465, height: 785, id : 'autoload-win', autoScroll : true, html: '<div id="generateImage"><img id="target" alt="generateImg" height="{height}" width="{width}" /></div>', listeners:{ resize: function (panel, w,h){ *!* $("#target").one('load', loadCallback).attr('src', adresse).each(function () { if (this.complete) $(this).trigger('load'); }); */!* } } }); win.show(); $("#target").one('load', loadCallback).attr('src', adresse).each(function () { if (this.complete) $(this).trigger('load'); }); $('#target').imgAreaSelect({ handles: true, movable: false, resizable: false, autoHide: true, onSelectEnd: function (img, selection) { $("#target").one('load', loadCallback).attr("src", adresse + "&x1=" + selection.x1 + "&y1=" + selection.y1 + "&width=" + selection.width + "&height=" + selection.height).each( function () { if ($("#target").complete) $("#target").trigger('load'); }); } }); }); ? |
Цитата:
не срабатывает когда изменяю размер - все-равно даже не пробует начинать грузить.. :( |
Цитата:
Цитата:
|
Цитата:
Вы говорите, что просто вставка этого кода должна бы подействовать? логично в принципе. Сейчас возьму "бубуен". :( |
танцую с бубном. Фишка в сл - хочу сделать чтоб листенер срабатывал только когда иззменятся размеры реального окна. Теперь вообще никак в консоль не вивыдит.. :(
Что в Js "!=" пишется по другому? [B] var win = new Ext.Window({ width : 1465, height: 785, id : 'autoload-win', autoScroll : true, html: '<div id="generateImage"><img id="target" alt="generateImg" height="{height}" width="{width}" /></div>', listeners:{ resize: function (panel, w,h){ if(w!=win.width||h!=win.height){ console.log("wi: "+ w +" Hi: "+h); } } } });[/B] |
Часовой пояс GMT +3, время: 22:27. |