docs/source/custom1.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">Ext.onReady(function(){\r
   9     var ds = new Ext.data.Store({\r
  10         proxy: new Ext.data.ScriptTagProxy({\r
  11             url: 'http://extjs.com/forum/topics-remote.php'\r
  12         }),\r
  13         reader: new Ext.data.JsonReader({\r
  14             root: 'topics',\r
  15             totalProperty: 'totalCount',\r
  16             id: 'post_id'\r
  17         }, [\r
  18             {name: 'postId', mapping: 'post_id'},\r
  19             {name: 'title', mapping: 'topic_title'},\r
  20             {name: 'topicId', mapping: 'topic_id'},\r
  21             {name: 'author', mapping: 'author'},\r
  22             {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},\r
  23             {name: 'excerpt', mapping: 'post_text'}\r
  24         ]),\r
  25 \r
  26         baseParams: {limit:20, forumId: 4}\r
  27     });\r
  28 \r
  29     // Custom rendering Template for the View\r
  30     var resultTpl = new Ext.XTemplate(\r
  31         '<tpl for=".">',\r
  32         '<div class="search-item">',\r
  33             '<h3><span>{lastPost:date("M j, Y")}<br />by {author}</span>',\r
  34             '<a href="http://extjs.com/forum/showthread.php?t={topicId}&p={postId}" target="_blank">{title}</a></h3>',\r
  35             '<p>{excerpt}</p>',\r
  36         '</div></tpl>'\r
  37     );\r
  38 \r
  39     var panel = new Ext.Panel({\r
  40         applyTo: 'search-panel',\r
  41         title:'Forum Search',\r
  42         height:300,\r
  43         autoScroll:true,\r
  44 \r
  45         items: new Ext.DataView({\r
  46             tpl: resultTpl,\r
  47             store: ds,\r
  48             itemSelector: 'div.search-item'\r
  49         }),\r
  50 \r
  51         tbar: [\r
  52             'Search: ', ' ',\r
  53             new Ext.ux.form.SearchField({\r
  54                 store: ds,\r
  55                 width:320\r
  56             })\r
  57         ],\r
  58 \r
  59         bbar: new Ext.PagingToolbar({\r
  60             store: ds,\r
  61             pageSize: 20,\r
  62             displayInfo: true,\r
  63             displayMsg: 'Topics {0} - {1} of {2}',\r
  64             emptyMsg: "No topics to display"\r
  65         })\r
  66     });\r
  67 \r
  68     ds.load({params:{start:0, limit:20, forumId: 4}});\r
  69 });\r
  70 </pre>    \r
  71 </body>\r
  72 </html>