examples/form/forum-search.js

   1 Ext.require([
   2     'Ext.data.*',
   3     'Ext.form.*'
   4 ]);
   5
   6 Ext.onReady(function(){
   7
   8     Ext.define("Post", {
   9         extend: 'Ext.data.Model',
  10         proxy: {
  11             type: 'jsonp',
  12             url : 'http://www.sencha.com/forum/topics-remote.php',
  13             reader: {
  14                 type: 'json',
  15                 root: 'topics',
  16                 totalProperty: 'totalCount'
  17             }
  18         },
  19
  20         fields: [
  21             {name: 'id', mapping: 'post_id'},
  22             {name: 'title', mapping: 'topic_title'},
  23             {name: 'topicId', mapping: 'topic_id'},
  24             {name: 'author', mapping: 'author'},
  25             {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
  26             {name: 'excerpt', mapping: 'post_text'}
  27         ]
  28     });
  29
  30     var ds = Ext.create('Ext.data.Store', {
  31         pageSize: 10,
  32         model: 'Post'
  33     });
  34
  35
  36     var panel = Ext.create('Ext.panel.Panel', {
  37         renderTo: Ext.getBody(),
  38         title: 'Search the Ext Forums',
  39         width: 600,
  40         bodyPadding: 10,
  41         layout: 'anchor',
  42
  43         items: [{
  44             xtype: 'combo',
  45             store: ds,
  46             displayField: 'title',
  47             typeAhead: false,
  48             hideLabel: true,
  49             hideTrigger:true,
  50             anchor: '100%',
  51
  52             listConfig: {
  53                 loadingText: 'Searching...',
  54                 emptyText: 'No matching posts found.',
  55
  56                 // Custom rendering template for each item
  57                 getInnerTpl: function() {
  58                     return '<div class="search-item">' +
  59                         '<h3><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' +
  60                         '{excerpt}' +
  61                     '</div>';
  62                 }
  63             },
  64             pageSize: 10,
  65
  66             // override default onSelect to do redirect
  67             listeners: {
  68                 select: function(combo, selection) {
  69                     var post = selection[0];
  70                     if (post) {
  71                         window.location =
  72                             Ext.String.format('http://www.sencha.com/forum/showthread.php?t={0}&p={1}', post.get('topicId'), post.get('id'));
  73                     }
  74                 }
  75             }
  76         }, {
  77             xtype: 'component',
  78             style: 'margin-top:10px',
  79             html: 'Live search requires a minimum of 4 characters.'
  80         }]
  81     });
  82 });