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]
|
Понял, глобальные значения изменяются перед листенером.. :(
|
Цитата:
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');
});
}
});
});
лишнее... |
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){
//каким образом формируется адрес ? пишу на обум
var adresse="getimg.php?width="+w+"&height="+h;
// изменим src, и подпишемся на событие (невижу необходимости в trigger)
$("#target").one('load',loadCallback).attr('src', adresse);
}
}
});
// показываем окно
win.show();
// создадим плагин ответственный за выбор фрагмента изображения
$('#target').imgAreaSelect({......................
/**
* обработчик события загрузки
*/
function loadCallback(...............................
});
|
Цитата:
Но функцию мне нужно пользовать вот такую,
$("#target").one('load', loadCallback).attr('src', adresse).each(function () {
if (this.complete) $(this).trigger('load');
});
потому, что только в этом случае я могу прочитать кукисы которые приходят с сервера. Просто при изменении окошка мне нужно отсылать на сервер новые координаты и мне сервер должен прислать измененнную картинку. Кажется я понял как решить свою задачу, надеюсь кусочком кода вы мне подскажете. Я думаю лучшее решение, при изменении окна удалять все с него а потом заново грузить. Вот проблема только я не знаю как мне удалить все.. Пробовал RemoveAll но там хочет как аругмент компоненту. А у меня по ходу только HTML. попробовал html:''; но никаких изменений, контент не удаляется.. как мне удалить из окна ExtJs сохданный мною контент? Спасибо! Цитата:
|
думаю достаточно удалить img
$("#generateImage").empty(); однако не доганяю чем это упростит жизнь. и ктонибудь, обьясните мне балбесу, какая связь между trigger и куки. |
Кажется проблема решилась, и я получил то что хотел в конечном итоге...
Вот что искалось...
listeners:{
resize: function (panel, w,h){
Ext.get("target").dom.src="";
$("#target").one('load', loadCallback).attr('src', adresse).each(function () {
if (this.complete) $(this).trigger('load');
});
}
}
Этот код с триггером я нарыл где-то. С помощью его я дожыдаюсь полного ответа с сервера. Система такая, я отсылаю размеры изображения на сервер, сервер в ответ мне шлет другие кукисы, которые я должен применить перед установокой плагина imgAreaSelect(Сервер шлет ограничения на область выделения). Вот.. как-то так.. |
Цитата:
Цитата:
|
:( Это пппц какой-то.
Может мне кто на пальцах объяснить что я этим делаю? Код нашел, допилял - заработало, а конекретно не понимаю что делает.
$("#target").one('load', loadCallback).attr('src', adresse).each(function ()
if (this.complete) $(this).trigger('load');
});
Я только знаю что с помощью этого кода я полностью гружу изображение, а когда полностью придет ответ с сервера, читаю кукисы в функции loadCallback |
1. тынць
2. Вот зачем Вам этот винегрет? Цитата:
Цитата:
|
1. Да конечно я почитал что делает каждая ф-ця, но от этого понимания не прибавилось..., не силен я в Js, а порой приходится типо что-то делать.. толком и учить некогда, и как приходится делать, то не понимаешь что да и как.. :(
2. Цитата:
Буду танцевать, - пасиб. |
Начните с этой дрозофилы:
Ext.onReady(function() {
Ext.create("Ext.window.Window", {
height: 100,
width: 100,
html: "<div><img id=\"TestImg\"></div>",
listeners: {
afterrender: function(win, eOpts) {
this.getImg().addListener("load", function(e, img, eOpts) {
if(window.console && console.log)
console.log("img.onload(%o) - теперь здесь можно дергать jQuery'вскую суперпупермегафункцию, работающую с изображением", arguments);
});
},
resize: function(win, width, height, eOpts ) {
var
imgs = ["http://javascript.ru/forum/images/smilies/cray.gif", "http://javascript.ru/forum/images/smilies/help.gif", "http://javascript.ru/forum/images/smilies/stop.gif", "http://javascript.ru/forum/images/smilies/smile.gif"];
this.getImg().set({ src: imgs[(width+height)%4] });
}
},
getImg: function() {
if(!this.img)
this.img = Ext.get("TestImg");
return this.img;
}
}).show();
});
|
Начал переделывать так как вы написали.
Контент загружается первый раз и выделяется, но не отсылает данные на сервер и при изменении размера ничего не происходит.. Может подскажете где зарыто?
<!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">
var random = Math.floor((Math.random() * 10000) + 1);
var cookie = "cookieName=" + random;
var adresse = "/JFreeeChartServlet/generateImg?" + cookie;
var cookieString = new String();
Ext.onReady(function() {
Ext.create("Ext.window.Window", {
height: 785,
width: 1465,
html: '<div id="generateImage"><img id="target"></div>',
listeners: {
afterrender: function(win, eOpts) {
this.getImg().addListener("load", function(e, img, eOpts) {
$("#target").one('load', loadCallback).attr('src', adresse).each(function () {
if (this.complete) $(this).trigger('load');
});
});
},
resize: function(win, width, height, eOpts ) {
this.getImg().set({ src: adresse });
}
},
getImg: function() {
if(!this.img)
this.img = Ext.get("target");
return this.img;
}
}).show();
$('#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');
});
}
});
});
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>
Спасибо! |
Хмммм, а вот эта функция вообще срабатывает несколько раз, а может и несколько десятков раз в секунду..
afterrender: function(win, eOpts) {
this.getImg().addListener("load", function(e, img, eOpts) {
console.log("Listener");
$("#target").one('load', loadCallback).attr('src', adresse).each(function () {
if (this.complete) $(this).trigger('load');
});
});
},
|
Вы уже сами себе ответили?
|
Так вот, послушал вас, обеспечил все в ексте, а дальше..
но срабатывает несколько раз в сек не моя функция джКвери, а срабатывает вот это..
this.getImg().addListener("load", function(e, img, eOpts) {
3 console.log("Listener");
Как исправить? Пасиб |
Цитата:
Цитата:
Цитата:
Цитата:
|
[quote автор]Найти "виновника торжества" - того, кто меняет src <img> несколько раз в секунду. И тут мы снова возвращаемся к? Вы теперь выяснили для себя что конкретно стоит за каждым вагоном паравоза? Или продолжаем в духе а-ля:[/quote] - да!
Вот с коментариями и переделаная. Вот это было раньше
$("#target").one('load', loadCallback).attr('src', adresse).each(function () {
if (this.complete) $(this).trigger('load');
});
Вот так я переделал.
$("#target").bind('load', loadCallback);//вешаем евент на img c id="target"
var imgObj = $("#target").attr('src', adresse);//засовываем в imgObj картинку которую получили в последствии изменения аттрибута src, в него грузим картинку adresse="/JFreeeChartServlet/generateImg?cookieName=random"
$(imgObj).each(function () {//вызиваем функцию для нашей картинки
if (imgObj.complete) // картинка загружена полностью, тогда
$(imgObj).trigger('load');//триггер вызывает евент 'load' - идет на выполнение функция loadCallback().
});
Этот весь замут с триггером нужно, чтоб сразу же прочитать кукисы с сервера и вставить необходимые значения в плагин imgAreaSelect. Если я просто вызову функцию loadCallback() после загрузки картинки без этих фишек, у меня при первом вызове кукисы будут нулевые. |
надеюсь, что по этому вопросу больше вопросов нет. :)
Вот так у меня получилось, все загружает так как нужно.
<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();
Ext.onReady(function() {
Ext.create("Ext.window.Window", {
height: 785,
width: 1465,
html: '<div id="generateImage"><img id="target"></div>',
listeners: {
resize: function(win, width, height, eOpts ) {
$("#target").bind('load', loadCallback);
var imgObj = $("#target").attr('src', adresse + "&chartW=" + width + "&chartH=" + height);
$(imgObj).each(function () {
if (imgObj.complete)
$(imgObj).trigger('load');
});
}
}
}).show();
$('#target').imgAreaSelect({
handles: true,
movable: false,
resizable: false,
autoHide: true,
onSelectEnd: function (img, selection) {
$("#target").bind('load', loadCallback);
var newImg = $("#target").attr("src", adresse + "&x1=" + selection.x1 + "&y1=" + selection.y1 + "&width=" + selection.width + "&height=" + selection.height);
$(newImg).each(
function () {
if ($(newImg).complete)
$(newImg).trigger('load');
});
}
});
});
function loadCallback() {
cookieString = get_all_cookie(random)
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>
Если можно еще два вопроса. Я вот пробовал с помощью плагина jQuery.cookies вытащить кукисы, чтоб избавиться от этих трех функций, которые я использую для того чтоб их достать, но почему-то в loadCallback() $.cookie равно нулю, хотя функция прекрасно тащит их с DOM. И еще одно, у меня окошко в котором я определяю координаты, если я перетаскиваю окошко, соответственно координати у плагина теряются, как мне отслеживать поведение перемещения окна ExtJs. спасибо Вам большое!! |
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 10:22. |