examples/form/custom.js

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