14.05.2012, 20:51
|
Аспирант
|
|
Регистрация: 19.11.2011
Сообщений: 77
|
|
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>
СПААСИБО!!
|
|
14.05.2012, 23:05
|
Профессор
|
|
Регистрация: 04.02.2011
Сообщений: 1,815
|
|
из ваших слов я понял чуть меньше чем нечего.
у вас есть событие
resize: function (panel, w,h){
console.log("wi: "+ w +" Hi: "+h);
}
ну и в чём проблема ?
вы не знаете как сделать запрос на сервер ?
Если да то давайте хотя бы разберемся что вы хотите оттуда запросить.
__________________
Лучше калымить в гандурасе чем гандурасить на колыме
Последний раз редактировалось DjDiablo, 14.05.2012 в 23:08.
|
|
14.05.2012, 23:33
|
Аспирант
|
|
Регистрация: 19.11.2011
Сообщений: 77
|
|
Заранее спасибо за помощь. ЧТо неужели ничего не понятно.
Я все по порядку написал, и в конце вопрос задал.
Ну вот что у меня есть и куда я гружу, я написал вверху.
Да, евент работает, на консоль выдает.
По собитию евента мне нужно вызвать вот эту функцию.
$("#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){
// функция, которая будет вызвана при успешном завершении
}
})
а как все слепить в кучку?
Спасибо.
|
|
15.05.2012, 09:51
|
|
Профессор
|
|
Регистрация: 19.12.2009
Сообщений: 164
|
|
Сообщение от JDev
|
ЧТо неужели ничего не понятно.
|
Абсолютно
Сообщение от JDev
|
По собитию евента мне нужно вызвать вот эту функцию.
$("#target").one('load', loadCallback).attr('src', adresse).each(function () {
if (this.complete) $(this).trigger('load');});
Она отправляет запрос на сервер
...
Вот мне подсказали как-то так..
Ext.Ajax.request({
...
})
|
Вы, для начала, определитесь, таки, посредством чего на сервант ходить-то будете...
__________________
"Helo, word!" - 17 errors 56 warnings
|
|
15.05.2012, 11:09
|
Аспирант
|
|
Регистрация: 19.11.2011
Сообщений: 77
|
|
Не понимаю. что не понятно, есть функция jQuery которая грузит картинку с сервера в окошко ExtJs. При изменении окошка, мне нужно чтоб функция отослала на сервер новые размеры окошка ExtJS, сервер мне в ответ присылает измененное изображение.
Что конкретно не понятно, я опишу по другому.
Спасибо.
|
|
15.05.2012, 11:21
|
|
Профессор
|
|
Регистрация: 19.12.2009
Сообщений: 164
|
|
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');
});
}
});
});
?
__________________
"Helo, word!" - 17 errors 56 warnings
|
|
15.05.2012, 11:26
|
Аспирант
|
|
Регистрация: 19.11.2011
Сообщений: 77
|
|
|
|
15.05.2012, 11:58
|
|
Профессор
|
|
Регистрация: 19.12.2009
Сообщений: 164
|
|
__________________
"Helo, word!" - 17 errors 56 warnings
|
|
15.05.2012, 12:00
|
Аспирант
|
|
Регистрация: 19.11.2011
Сообщений: 77
|
|
Сообщение от Ex_Soft
|
Можете улыбаться сколько Вам угодно - это же Вам надо... Клещами из Вас показания вытягивать тут никто не будет...
|
- да я не со зла и без доли насмешки. Да. я все прекрасно понимаю. но евент срабатывает при первой же загрузке окна.
Вы говорите, что просто вставка этого кода должна бы подействовать? логично в принципе. Сейчас возьму "бубуен".
|
|
15.05.2012, 12:06
|
Аспирант
|
|
Регистрация: 19.11.2011
Сообщений: 77
|
|
танцую с бубном. Фишка в сл - хочу сделать чтоб листенер срабатывал только когда иззменятся размеры реального окна. Теперь вообще никак в консоль не вивыдит..
Что в 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]
|
|
|
|