Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.05.2012, 11:27
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

stopPropagation
в обычном js при любом событии передается объект event(при том же change)
var changeDiv = function(event)
	{
	event = event || window.event;
	event.preventDefault();
	//... действия
	}


Где его взять в Ext (4.0)?
xtype: 'numberfield',
fieldLabel: 'number',
value: 0,
labelWidth: 20,
width: 80,
listeners:
	{
	change: function(ths, newValue, oldValue, eOpts)
		{
		event = event || window.event;
		console.log(123);
		event.preventDefault();
		}
	}
Ответить с цитированием
  #2 (permalink)  
Старый 12.05.2012, 11:32
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

незнаю верно ли понял вопрос.
Я знаю только два способа.

способ 1. (при навешивании обработчика на событие)
// предотвращаем всплывание
exl.on('click', this.onClick, this, {stopPropagation: true});

// предотвращает событие навешанное по дефолту
ex1.on('click', this.onClick, this, {preventDefault: true});


способ 2. (в обработчике)
function handleClick(event, target){  // обработчик события
     // предотвращает событие навешанное по  дефолту 
     event.preventDefault();  

    // предотвращает всплывание
    event.stopPropagation(); 

    // заменяет обе функции,предотвращает и всплывание  и дефолт  одновременно.
    event.stopEvent(); 
...
}


способ 3)
вот здесь я не уверен.
Я этого ненашёл в документации, но по логике это должно быть.

xtype: 'numberfield',
fieldLabel: 'number',
value: 0,
labelWidth: 20,
width: 80,
listeners:{	
	change: {
                stopPropagation: true,
                fn(ths, newValue, oldValue, eOpts){
                       ....
		}
	}
}
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 12.05.2012 в 12:03.
Ответить с цитированием
  #3 (permalink)  
Старый 12.05.2012, 11:49
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

хм. отсюда взяли http://erum.ru/67.htm ?? я там уже был.
я не понимаю откуда берется handleClick(event, target)? когда должны передаваться эти параметры click( Ext.button.Button this, Event e, Object eOpts ) [http://docs.sencha.com/ext-js/4-0/#!...button.Button]
т.е.
listeners:
	{
	click: function(ths, e, eOpts)
		{
		//...
		}
	}
Ответить с цитированием
  #4 (permalink)  
Старый 12.05.2012, 11:52
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

кстати при клике есть объект event, а при change - нет
Ответить с цитированием
  #5 (permalink)  
Старый 12.05.2012, 12:41
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

угу, и не только оттуда.
вот ещё хороший источник http://podlipensky.com/post/2009/07/...js-events.aspx
ну и документация конечно.

я так понимаю что конечная цель предотвратить всплытие change. Ну как аварийный вариант попробуйте через on c опциями навешать.

Ещё один способ борьбы с пузырями return false; - в обработчике.

Сейчас тороплюсь, вернусь, покавыряю исходники с оф доками, тогда отпишусь точнее.
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 12.05.2012 в 22:44.
Ответить с цитированием
  #6 (permalink)  
Старый 12.05.2012, 17:55
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

КХМ, поковырял.

Ext.EventObject - это обёртка над родным обьектом события в браузере, служит для повышения кросс браузерности. Тоесть где нет события браузера, там нет EventObject. Так как change инициируется не событием браузера то и EventObject к этому событию ни какого отношения не имеет.

что касается события Change вообще.
Генерация события происходит в методе checkChange класса numberfield
запуск этой функции инициализируется методами вроде setValue

checkChange: function() {
        if (!this.suspendCheckChange) {
            var me = this,
                newVal = me.getValue(),
                oldVal = me.lastValue;
            if (!me.isEqual(newVal, oldVal) && !me.isDestroyed) {
                me.lastValue = newVal;
                // вот здесь генерируется событие
                me.fireEvent('change', me, newVal, oldVal);
                me.onChange(newVal, oldVal);
            }
        }
    },


тобиш мы можем создать свой собственный класс customNumberfield унаследовав его от numberfield.
Далее можем переопределить checkChange и генерировать события в том виде в каком они нам удобны.
Вплоть до замены события вызвом функции, или генерации события только в определённых случаях.

.....
Теперь, что касается механизьма событий.

FireEvent() берёт информацию о событии из обьекта events
Кстатии сам он нечего не вызывает, а просто передаёт работу continueFireEvent который и обеспечивает всплытие в цикле do While. Цикл прерывается через break, если обработчик события возвращает false.

в events можно найти много чего вкусного.
к примеру
events[имя события].bubble - флаг отвечающий за всплытие.
events[имя события].listeners - массив с обработчиками этого события.

Если в двух словах пробежатся по всему алгоритму то.
1) continueFireEvent находит родителей по цепочке и вызывает для них метод Fire.
2) метод fire перебирае в цикле events[имя события].listeners и вызывает fireFn (функцию обработчик события)


До кучи отпишусь откуда берутся обработчики, вдруг кому интересно.

когда вы устанавливаете обработчик в listeners. ТО обьект listeners передаётся в конструкторе методу on. me.on(me.listeners);
То есть, установка обработчика через on и listeners, суть одно и тоже. (выходит я угадал во втором посте)

метод on в свою очередь это псевдоним метода addListener.

основная задача addListeners сводится к заполнению обьекта events.
addListeners в цикле перебирает те события которые вы ему передали (если их несколько)
добавление события происходит так.
me.events[ename] = event = new Ext.util.Event(me, ename); //ename - Имя события

Даже незнаю что ещё можно добавить ))
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 12.05.2012 в 23:53.
Ответить с цитированием
  #7 (permalink)  
Старый 14.05.2012, 15:26
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

Написали много, спасибо, но все равно с трудом все в голову входит))) лучшая теория - это практика.
допустим у меня есть объект, который можно двигать (draggable: true) и есть событие move:

var fx = Ext.getCmp('numberfield_x');
move: function(ths, x, y)
	{
	fx.setValue(x);
	//запихиваем в numberfield_x значение икса
	}


и есть поле числовое, куда значения записываются. у него есть событие change. и при перемещении объекта срабатывает change (где мне этого не нужно)

xtype: 'numberfield',
id: 'numberfield_x',
fieldLabel: 'x',
value: 0,
labelWidth: 20,
width: 80,
listeners:
	{
	change: function(ths, newValue, oldValue, event)
		{
		console.log(1);
		}
	}


можете туго доходящему показать куда что и как прописать, чтобы в консоль эта единичка не записывалась т.е. не вызывалось событие из за перемещения другого объекта??)) буду оч рад))
Ответить с цитированием
  #8 (permalink)  
Старый 14.05.2012, 17:36
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

тут вариантов 10 наверно)

ну вот самый, самый тупой
var flag=false;
var fx = Ext.getCmp('numberfield_x');
move: function(ths, x, y)
	{
        flag=true;
	       fx.setValue(x);
        flag=false;

	//запихиваем в numberfield_x значение икса
	}


xtype: 'numberfield',
id: 'numberfield_x',
fieldLabel: 'x',
value: 0,
labelWidth: 20,
width: 80,
listeners:
	{
	change: function(ths, newValue, oldValue, event)
		{
                      if (flag==false){
                           console.log(1);
                      }
		}
	}


Вместо глобального флага можно попробывать
fx.flag
this.flag
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 14.05.2012 в 17:39.
Ответить с цитированием
  #9 (permalink)  
Старый 14.05.2012, 17:43
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

ну а если не самый тупой? просто у меня не хватает мозгов, чтобы все это сообразить)) то что вы ДО этого писали
Ответить с цитированием
  #10 (permalink)  
Старый 14.05.2012, 17:48
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Прошу прощения ))
тупой это не потому что кто то не понимает что то сложнее.
А тупой потому что, топорно простой.

о других чуть попозже.
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 14.05.2012 в 22:50.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
trigger(): stopPropagation() для произвольного события Greck jQuery 0 09.04.2012 10:27
Проблемы со stopPropagation FINoM Общие вопросы Javascript 6 27.03.2012 18:18
live и stopPropagation AlleeX jQuery 3 14.12.2011 21:58