1. #1
    Ext User mikeyroy's Avatar
    Join Date
    Jul 2010
    Location
    San Francisco
    Posts
    101
    Vote Rating
    0
    mikeyroy is on a distinguished road

      0  

    Default Search field on top of a List

    Search field on top of a List


    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.

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,641
    Vote Rating
    582
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Why not just put the field in a toolbar on top of the list? Remember List extends Panel (indirectly).
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User mikeyroy's Avatar
    Join Date
    Jul 2010
    Location
    San Francisco
    Posts
    101
    Vote Rating
    0
    mikeyroy is on a distinguished road

      0  

    Default


    Quote Originally Posted by evant View Post
    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.

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    1
    Vote Rating
    0
    sureshbtech45 is on a distinguished road

      0  

    Default code for search list

    code for search list


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

  5. #5
    Sencha User
    Join Date
    Aug 2012
    Location
    Denmark
    Posts
    16
    Vote Rating
    2
    Shyre is on a distinguished road

      0  

    Default Did you ever suceed?

    Did you ever suceed?


    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?

Similar Threads

  1. scroll list to the top on refresh
    By wakatanka in forum Sencha Touch 1.x: Discussion
    Replies: 7
    Last Post: 9 Aug 2010, 4:49 AM
  2. [CLOSED] Search in top Toolbar without categorize combobox
    By erenault in forum Ext.nd for Notes/Domino
    Replies: 0
    Last Post: 30 Oct 2008, 9:02 AM
  3. How To Search NotesView w/ Custom Search Field
    By waldav00 in forum Ext.nd for Notes/Domino
    Replies: 4
    Last Post: 5 Mar 2008, 7:33 AM

Thread Participants: 3