I'm looking to filter a list based on text entered into a form field at the top of the list. The closest I've come is setting up a template like this:

Code:
		<textarea id="bar-search-list" class="x-hidden-display">
			<div class="search-field">
				<input type="text" id="bar-search-field" />
			</div>
			<tpl for=".">
				<div class="bar tnail-list-text list-button-arrow" id="{id}">
				    <div class="tnail" style="background-image: url({small_pic_url});"></div>
					<span>{title}</span>
				</div>
			</tpl>
		</textarea>
The issue of doing it like this is the input field being explicitly defined there doesn't inherit all the attributes of Ext.form.Field which is a disadvantage when it comes to managing events.

Am I off base doing it like this? Is there a different way to get an Ext.form.Field inserted at the top of a list? The form field can be separate from the list and setup in a vbox, though from a quick try it looks like the layout would be a headache to get looking good, and I would rather have it integrated into a single, scrollable, visual object.