새 이벤트 처리를 템플릿에 추가하는 방법은 무엇입니까?

Question

다음 템플릿은 사용자가 입력을 검색합니다. Enter 키를 누르거나 검색 버튼을 누르는 것만으로 검색합니다. 사용자가 검색에서는 ExtJS TextField 동안

<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

을 (사용자가 입력을 누르거나 검색 버튼을 누를 때까지 기다릴 필요하지 않음) 발생 검색 필드에 문자 (문자)를 입력 할 때마다 그래서 나는 그것을 변경하는 방법 초기화를 수행하려면 구성 옵션 enableKeyEvents을 true로 설정해야합니다. 필드가 초기화 된 후에는 keypress 이벤트에 리스너를 연결해야합니다. 예를 들어, addListener 메소드를 사용하여이를 수행 할 수 있습니다. 리스너의 핸들러는 검색을 실행하는 함수 여야합니다.

Ext.form.TextField 등에 대한 자세한 내용은 ExtJS API documentation에서 찾을 수 있습니다.