examples/form/custom.js

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