Как добавить новую обработку событий в шаблон?

Question

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

<script type="text/javascript">
Ext.onReady(function(){

{% autoescape off %}
  var submitForm = function() {
      Ext.query('#search_form form')[0].submit();
  };
  var searchButton = new Ext.Button({renderTo: 'submit_search', text: '{% trans "Search" %}',
                                     handler: submitForm});
  var searchInput = new Ext.form.TextField({applyTo: 'search_query', width: 350});
{% endautoescape %}

});

</script> 


{% endblock %}

{% block nav %}
{% navbar maps %}
{% endblock %}

{% block main %}
<div class="twocol">

  <div id="search_form" class="block">
    <h2>{% trans "Search" %} <span class="subtitle">{% trans "for maps" %}</span></h2>

    <form action="{% url maps_search %}" method="POST">
      {% csrf_token %}
      <table>
        <tr>
          <td>
            <input type="text" id="search_query" name="q" />
          </td>
          <td>
            <div id="submit_search"></div>
          </td>
        </tr>
      </table>
      <p>
        <a href="{% url maps_search %}">{% trans "All Maps" %}</a> |
        <a href="{% url maps_search %}?sort=last_modified&dir=DESC">{% trans "New Maps" %}</a>
      </p>
    </form>
  </div>

  <div id="create" class="block">
    <h2>{% trans "Create Maps" %}</h2>
    <p>{% trans "Use GeoNode's Map Composer application to create your own maps.  Add layers from this GeoNode or remote services, and style them." %}
    </p>
    <p>
      <a href="{%url geonode.maps.views.newmap %}">{% trans "Create your own map" %}</a>
    </p>
  </div>

  <!-- "Your Maps" button goes here -->
  <!-- create map button goes here -->

</div>
{% endblock %}`enter code here`

Answer 1

Во время инициализации ExtJS TextField необходимо установить для параметра конфигурации enableKeyEvents значение true. После того, как поле было инициализировано, вам нужно присоединить слушателя к его событию keypress. Вы можете сделать это, например, методом addListener. Обработчик для слушателя должен быть функцией, которая выполняет поиск.

Более подробную информацию о Ext.form.TextField и т. Д. Можно найти в Документации по ExtJS API .