Hybrid View

  1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    35
    Vote Rating
    1
    Oxii is on a distinguished road

      0  

    Default Combo with Templates and Ajax .. How does it work ?

    Combo with Templates and Ajax .. How does it work ?


    Hi
    I would like to build a search function which needs an auto-complete feature.
    I would try this : http://dev.sencha.com/deploy/ext-4.1...um-search.html

    But I am still not getting how it works exactly.
    Where is the variable that should be containing the first 4 letters to send them to php script ?
    Also could anyone explain this part of code ?

    Code:
      // Custom rendering template for each itemgetInnerTpl: function() {return '<a class="search-item" href="http://www.sencha.com/forum/showthread.php?t={topicId}&p={id}">' + '<h3><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' + '{excerpt}' + '</a>';                }

  2. #2
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    536
    Vote Rating
    70
    Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough

      1  

    Default


    The combo takes care of the querying automatically. There is a property on it called minChars that defaults to 4. If you wanted to change the chars it queries at you would set that property. The combo reads that property and tells the store to do a request with the typed text. That specific example uses a jsonp proxy, so you would need to look in the Net tab in firebug to see it. This is all done behind the scenes, you don't have to do it yourself.

    The code you listed is just a template. The records in the store will have fields defined such as topicId, Id, lastPost, author, and excerpt. The item template just wraps those in html for every record.

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    35
    Vote Rating
    1
    Oxii is on a distinguished road

      0  

    Default


    Quote Originally Posted by Tim Toady View Post
    The combo takes care of the querying automatically. There is a property on it called minChars that defaults to 4. If you wanted to change the chars it queries at you would set that property. The combo reads that property and tells the store to do a request with the typed text. That specific example uses a jsonp proxy, so you would need to look in the Net tab in firebug to see it. This is all done behind the scenes, you don't have to do it yourself.

    The code you listed is just a template. The records in the store will have fields defined such as topicId, Id, lastPost, author, and excerpt. The item template just wraps those in html for every record.
    Thanks a lot
    I have one more question
    Is there a way to display images with search results ?

  4. #4
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    536
    Vote Rating
    70
    Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough

      1  

    Default


    Yes, templates read arbitrary html. You could easily put an image in and even base that image on a value found in the record as is done with the other fields.

  5. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    35
    Vote Rating
    1
    Oxii is on a distinguished road

      0  

    Default


    Quote Originally Posted by Tim Toady View Post
    Yes, templates read arbitrary html. You could easily put an image in and even base that image on a value found in the record as is done with the other fields.
    OK.. I followed the example. in my case I would like to retrieve the names after entering 4 letters. e.g: alic
    It worked except that it returns all the names not just what contains alic ,
    also, I got the result in firebug but not appears in combo box as a list
    I am sure my problem is simple but still can't figure out how to fix it.

    View:
    Code:
           items: [{
    
                xtype: 'combo', 
               store: ds,
                typeAhead: false,
                hideLabel: true, 
               hideTrigger:true, 
               anchor: '100%',
                listConfig: {  
                  loadingText: 'Searching...',
                   emptyText: 'No matching posts found.',
    
                    getInnerTpl: function() {
                        return '<a {name}'+
                        '</a>';
                    }
                }
    store and model:

    Code:
     Ext.define("Post", {
            extend: 'Ext.data.Model',
               proxy: {
             type: 'ajax',
            url: 'autocomplete.php',
            reader: {
                type: 'json',
                root: 'names',
                totalProperty: 'totalCount'
            }
        },
    
    
        fields: [
            {
                name: 'name',
            }
        ]
        });
    
    
        ds = Ext.create('Ext.data.Store', {
            pageSize: 10,
            model: 'Post'
        });
    and the php script:

    Code:
      $sql= "SELECT name FROM student_name ORDER BY name ASC";
    
    
    
     $result = pg_query($con, $sql);
    
    
    
    
    
     while ($row = pg_fetch_array($result))
           {  
    
    
                    $names[] = array('name' => $row[0]);
    
    
    
    
           }
    
           $name_list = array();
    $name_list['success']        = true;
    $name_list['names']        = $names;
    
    
    $name_list['totalCount']    = count( $name_list['names'] );
    
    
         echo json_encode($name_list); 
         pg_close($con);
    Previously I used to use jQuery to do that with this query:
    $sql = "SELECT name FROM student_name WHERE name ILIKE '%$search%' ORDER BY name ASC";

    but now I have no idea how to send the search term to compare with in database.

  6. #6
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    536
    Vote Rating
    70
    Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough

      1  

    Default


    So in a combobox there is a property called valueField and one called displayField that you should set.

    valueField is the field that is received when doing something like getValue()
    displayField is the field that is displayed in the dropdown

    As far as returning everything, the combo is sending a parameter to the backend named query. That contains what you typed in the combo. You would then query your database for that text. Generally, if the combo will not contain a large amount of data, I like to set the queryMode to local on the combo and just let Ext handle everything assuming the store is loaded.

Thread Participants: 1