Search field on top of a List

[mikeyroy]

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:

		<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.

[evant]

Why not just put the field in a toolbar on top of the list? Remember List extends Panel (indirectly).

[mikeyroy]

Why not just put the field in a toolbar on top of the list? Remember List extends Panel (indirectly).

That's a good idea, I'll try that, never thought of looking at a design situation like this in that way.

[sureshbtech45]

hello sir,
if u have source code for search list ..send me..

[Shyre]

I was wondering if you ever got the searchfield ón top of that list like on the iPhone ?? And could you perhaps share some code if you got it working?