examples/form/custom.js

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