git.roojs.org Git - roojs1/blob - examples/form/custom.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11 \r
  12 Roo.onReady(function(){\r
  13     var ds = new Roo.data.Store({\r
  14         proxy: new Roo.data.ScriptTagProxy({\r
  15             url: 'http://www.roojs.com/trac/timeline?ticket=on&changeset=on&milestone=on&wiki=on&max=50&daysback=90&format=rss'\r
  16         }),\r
  17         reader: new Roo.data.JsonReader({\r
  18             root: 'topics',\r
  19             totalProperty: 'totalCount',\r
  20             id: 'post_id'\r
  21         }, [\r
  22             {name: 'postId', mapping: 'post_id'},\r
  23             {name: 'title', mapping: 'topic_title'},\r
  24             {name: 'topicId', mapping: 'topic_id'},\r
  25             {name: 'author', mapping: 'author'},\r
  26             {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},\r
  27             {name: 'excerpt', mapping: 'post_text'}\r
  28         ]),\r
  29 \r
  30         baseParams: {limit:20, forumId: 4}\r
  31     });\r
  32 \r
  33     // Custom rendering Template for the View\r
  34     var resultTpl = new Roo.Template(\r
  35         '<div class="search-item">',\r
  36             '<h3><span>{lastPost:date("M j, Y")}<br />by {author}</span>',\r
  37             '<a href="http://extjs.com/forum/showthread.php?t={topicId}&p={postId}" target="_blank">{title}</a></h3>',\r
  38             '<p>{excerpt}</p>',\r
  39         '</div>'\r
  40     );\r
  41 \r
  42     var view = new Roo.View('search-results', resultTpl, {store: ds});\r
  43 \r
  44     var tb = new Roo.Toolbar('search-tb', [\r
  45         'Search: ', ' ',\r
  46         new Roo.app.SearchField({\r
  47             store: ds,\r
  48             width:320\r
  49         })\r
  50     ]);\r
  51 \r
  52     new Roo.PagingToolbar('page-tb', ds, {\r
  53         pageSize: 20,\r
  54         displayInfo: true,\r
  55         displayMsg: 'Topics {0} - {1} of {2}',\r
  56         emptyMsg: "No topics to display"\r
  57     });\r
  58     \r
  59     ds.load({params:{start:0, limit:20, forumId: 4}});\r
  60 });\r
  61 \r
  62 /**\r
  63  * The custom search field\r
  64  */\r
  65 \r
  66 Roo.app.SearchField = Roo.extend(Roo.form.TwinTriggerField, {\r
  67     initComponent : function(){\r
  68         Roo.app.SearchField.superclass.initComponent.call(this);\r
  69         this.on('specialkey', function(f, e){\r
  70             if(e.getKey() == e.ENTER){\r
  71                 this.onTrigger2Click();\r
  72             }\r
  73         }, this);\r
  74     },\r
  75 \r
  76     validationEvent:false,\r
  77     validateOnBlur:false,\r
  78     trigger1Class:'x-form-clear-trigger',\r
  79     trigger2Class:'x-form-search-trigger',\r
  80     hideTrigger1:true,\r
  81     width:180,\r
  82     hasSearch : false,\r
  83     paramName : 'query',\r
  84 \r
  85     onTrigger1Click : function(){\r
  86         if(this.hasSearch){\r
  87             var o = {start: 0};\r
  88             o[this.paramName] = '';\r
  89             this.store.reload({params:o});\r
  90             this.el.dom.value = '';\r
  91             this.triggers[0].hide();\r
  92             this.hasSearch = false;\r
  93         }\r
  94     },\r
  95 \r
  96     onTrigger2Click : function(){\r
  97         var v = this.getRawValue();\r
  98         if(v.length < 1){\r
  99             this.onTrigger1Click();\r
 100             return;\r
 101         }\r
 102         var o = {start: 0};\r
 103         o[this.paramName] = v;\r
 104         this.store.reload({params:o});\r
 105         this.hasSearch = true;\r
 106         this.triggers[0].show();\r
 107     }\r
 108 });