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 3a37fc3..eaaefc4 100644 (file)
--- a/examples/form/forum-search.js
+++ b/examples/form/forum-search.js
@@ -1,52 +1,82 @@
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-Ext.onReady(function(){\r
-\r
-    var ds = new Ext.data.Store({\r
-        proxy: new Ext.data.ScriptTagProxy({\r
-            url: 'http://extjs.com/forum/topics-remote.php'\r
-        }),\r
-        reader: new Ext.data.JsonReader({\r
-            root: 'topics',\r
-            totalProperty: 'totalCount',\r
-            id: 'post_id'\r
-        }, [\r
-            {name: 'title', mapping: 'topic_title'},\r
-            {name: 'topicId', mapping: 'topic_id'},\r
-            {name: 'author', mapping: 'author'},\r
-            {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},\r
-            {name: 'excerpt', mapping: 'post_text'}\r
-        ])\r
-    });\r
-\r
-    // Custom rendering Template\r
-    var resultTpl = new Ext.XTemplate(\r
-        '<tpl for="."><div class="search-item">',\r
-            '<h3><span>{lastPost:date("M j, Y")}<br />by {author}</span>{title}</h3>',\r
-            '{excerpt}',\r
-        '</div></tpl>'\r
-    );\r
-    \r
-    var search = new Ext.form.ComboBox({\r
-        store: ds,\r
-        displayField:'title',\r
-        typeAhead: false,\r
-        loadingText: 'Searching...',\r
-        width: 570,\r
-        pageSize:10,\r
-        hideTrigger:true,\r
-        tpl: resultTpl,\r
-        applyTo: 'search',\r
-        itemSelector: 'div.search-item',\r
-        onSelect: function(record){ // override default onSelect to do redirect\r
-            window.location =\r
-                String.format('http://extjs.com/forum/showthread.php?t={0}&p={1}', record.data.topicId, record.id);\r
-        }\r
-    });\r
+Ext.require([
+    'Ext.data.*',
+    'Ext.form.*'
+]);
+
+Ext.onReady(function(){
+
+    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'}
+        ]
+    });
+
+    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