Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / form / forum-search.js

diff --git a/examples/form/forum-search.js b/examples/form/forum-search.js
index 70dac5b..eaaefc4 100644 (file)
--- a/examples/form/forum-search.js
+++ b/examples/form/forum-search.js
@@ -1,50 +1,82 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
+Ext.require([
+    'Ext.data.*',
+    'Ext.form.*'
+]);
+
 Ext.onReady(function(){
 
-    var ds = new Ext.data.Store({
-        proxy: new Ext.data.ScriptTagProxy({
-            url: 'http://extjs.com/forum/topics-remote.php'
-        }),
-        reader: new Ext.data.JsonReader({
-            root: 'topics',
-            totalProperty: 'totalCount',
-            id: 'post_id'
-        }, [
+    Ext.define("Post", {
+        extend: 'Ext.data.Model',
+        proxy: {
+            type: 'jsonp',
+            url : 'http://www.sencha.com/forum/topics-remote.php',
+            reader: {
+                type: 'json',
+                root: 'topics',
+                totalProperty: 'totalCount'
+            }
+        },
+
+        fields: [
+            {name: 'id', mapping: 'post_id'},
             {name: 'title', mapping: 'topic_title'},
             {name: 'topicId', mapping: 'topic_id'},
             {name: 'author', mapping: 'author'},
             {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
             {name: 'excerpt', mapping: 'post_text'}
-        ])
+        ]
     });
 
-    // Custom rendering Template
-    var resultTpl = new Ext.XTemplate(
-        '<tpl for="."><div class="search-item">',
-            '<h3><span>{lastPost:date("M j, Y")}<br />by {author}</span>{title}</h3>',
-            '{excerpt}',
-        '</div></tpl>'
-    );
-    
-    var search = new Ext.form.ComboBox({
-        store: ds,
-        displayField:'title',
-        typeAhead: false,
-        loadingText: 'Searching...',
-        width: 570,
-        pageSize:10,
-        hideTrigger:true,
-        tpl: resultTpl,
-        applyTo: 'search',
-        itemSelector: 'div.search-item',
-        onSelect: function(record){ // override default onSelect to do redirect
-            window.location =
-                String.format('http://extjs.com/forum/showthread.php?t={0}&p={1}', record.data.topicId, record.id);
-        }
+    var ds = Ext.create('Ext.data.Store', {
+        pageSize: 10,
+        model: 'Post'
+    });
+
+
+    var panel = Ext.create('Ext.panel.Panel', {
+        renderTo: Ext.getBody(),
+        title: 'Search the Ext Forums',
+        width: 600,
+        bodyPadding: 10,
+        layout: 'anchor',
+
+        items: [{
+            xtype: 'combo',
+            store: ds,
+            displayField: 'title',
+            typeAhead: false,
+            hideLabel: true,
+            hideTrigger:true,
+            anchor: '100%',
+
+            listConfig: {
+                loadingText: 'Searching...',
+                emptyText: 'No matching posts found.',
+
+                // Custom rendering template for each item
+                getInnerTpl: function() {
+                    return '<div class="search-item">' +
+                        '<h3><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' +
+                        '{excerpt}' +
+                    '</div>';
+                }
+            },
+            pageSize: 10,
+
+            // override default onSelect to do redirect
+            listeners: {
+                select: function(combo, selection) {
+                    var post = selection[0];
+                    if (post) {
+                        window.location =
+                            Ext.String.format('http://www.sencha.com/forum/showthread.php?t={0}&p={1}', post.get('topicId'), post.get('id'));
+                    }
+                }
+            }
+        }, {
+            xtype: 'component',
+            style: 'margin-top:10px',
+            html: 'Live search requires a minimum of 4 characters.'
+        }]
     });
 });
\ No newline at end of file