sencha touch текстовое поле очистить событие

Я пытаюсь реализовать фильтр списка в текстовом поле в sencha touch. Например, у меня была бы куча контактов, и когда я печатал в поле, он мог фильтроваться по имени. Когда я нажимаю круглую кнопку X, чтобы очистить текстовое поле, я хочу сбросить фильтр, чтобы не фильтровать ни один из контактов.

Проблема в том, что я не могу найти способ обнаружить нажатие на кнопку очистки. Кажется, нет никаких событий, и я не могу взломать обходной путь.

Если у кого-нибудь есть идеи, как обнаружить очистку текстового поля в сенсорном сенча, я был бы очень обязан.

Я пробовал в симуляторе сафари и xcode и использую sencha touch 1.1.0. Я что-то упускаю? Разве это не проблема, когда это на самом деле мобильное приложение?


sencha-touch
person Hoopes    schedule 08.09.2011    source источник

Ответы (3)


arrow_upward
8
arrow_downward

Вы можете прослушивать события нажатия на clearIconContainerEl внутри текстового поля или переопределить метод onClearIconTap.

Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {

        var searchField = new Ext.form.Search({
            name : 'search',
            placeHolder: 'Search',
            useClearIcon: true,

            onClearIconTap: function() {
                if (!this.disabled) {
                    this.setValue('');
                    console.log('onClearTap: Clear button tapped!');                       
                }
            }
        });

        var viewport = new Ext.Panel({
            fullscreen: true,
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'top',
                items: [searchField]
            }]
        });

        console.log(searchField.useClearIcon);

        searchField.mon(searchField.clearIconContainerEl, {
            scope: searchField,
            tap: function() {
                if (!this.disabled) {
                    console.log('clearIconContainerEl: Clear button tapped!');
                }
            }
        });
    }
});
person herkulano    schedule 08.09.2011
comment
Я переопределил onClearIconTap, чтобы запустить событие очистки. Если для параметра useClearIcon установлено значение true, срабатывает onClearIconTap, и я могу перехватить событие очистки. Без onClearIconTap это никогда не сработает. Я был бы очень рад оказаться неправым... спасибо за ответ! - person Hoopes; 14.09.2011
comment
Это тоже хорошее решение. И да, это возможно только в том случае, если useClearIcon имеет значение true. :) - person herkulano; 14.09.2011
comment
Они оба работают: переопределяющий метод onClearIconTap и событие касания clearIconContainerEl. На самом деле они более или менее одинаковы, потому что событие касания clearIconContainerEl запускает метод onClearIconTap, так что это скорее архитектурное решение, чем функциональное. Вот работающий код, посмотрите сами: lab.herkulano.com/sencha-touch /поиск-cleartap - person herkulano; 14.09.2011

arrow_upward
1
arrow_downward

Для пользователей sencha touch 2.0:

Если вы используете новую структуру mvc, вы можете использовать ее в инициализации контроллера.

this.control({    
     '#yourTextFieldId clearicon': {
          tap: function(){console.log('ClearICON tapped');}
     }
....
)};
person Renato H.    schedule 01.11.2011

arrow_upward
1
arrow_downward

Проблема в том, что маленький X не добавляется сенчей. Это особенность «поискового» ввода с html5. Чтобы зафиксировать это событие, вам нужно найти событие поиска. Как я решил это, я отредактировал sencha-touch.js

я модифицировал -

    if (this.fieldEl) {
        this.mon(this.fieldEl, {
            focus: this.onFocus,
            blur: this.onBlur,
            keyup: this.onKeyUp,
            paste: this.updateClearIconVisibility,
            mousedown: this.onBeforeFocus,
            scope: this
        });

to be -

    if (this.fieldEl) {
        this.mon(this.fieldEl, {
            focus: this.onFocus,
            blur: this.onBlur,
            keyup: this.onKeyUp,
            paste: this.updateClearIconVisibility,
            mousedown: this.onBeforeFocus,
            search: this.onSearch,
            scope: this
        });

внутри Ext.form.Text = Ext.extend(Ext.form.Field, {...

Теперь в моей реализации поля поиска я могу создать функцию onSearch, которая будет вызываться при вызове события «поиск». Обратите внимание, что событие «поиск» вызывается не только для X, но и для некоторых вещей, таких как клавиша ввода. Суть в том, что sencha touch 1.1 вообще не проверяет это событие, и это единственный раз, когда X запускает событие, поэтому единственным решением является изменение sencha-touch.js.

person Mike Nigh    schedule 03.09.2012
comment
Обратите внимание, что на самом деле нет необходимости что-то менять в файле sencha-touch.js. Потому что это очень затрудняет обновление до более новой версии библиотеки Sencha. Лучше переопределить функциональность в собственном файле. Поскольку это все JavaScript, в этом нет проблем. - person Odi; 03.10.2012