1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
| Ext.require([
| 'Ext.data.*',
| 'Ext.form.*'
| ]);
|
| Ext.onReady(function(){
|
| Ext.define("Post", {
| extend: 'Ext.data.Model',
| proxy: {
| type: 'jsonp',
| url : 'http://www.sencha.com/forum/topics-remote.php',
| reader: {
| type: 'json',
| root: 'topics',
| totalProperty: 'totalCount'
| }
| },
|
| fields: [
| {name: 'id', mapping: 'post_id'},
| {name: 'title', mapping: 'topic_title'},
| {name: 'topicId', mapping: 'topic_id'},
| {name: 'author', mapping: 'author'},
| {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
| {name: 'excerpt', mapping: 'post_text'}
| ]
| });
|
| ds = Ext.create('Ext.data.Store', {
| pageSize: 10,
| model: 'Post'
| });
|
| panel = Ext.create('Ext.panel.Panel', {
| renderTo: Ext.getBody(),
| title: 'Search the Ext Forums',
| width: 600,
| bodyPadding: 10,
| layout: 'anchor',
|
| items: [{
| xtype: 'combo',
| store: ds,
| displayField: 'title',
| typeAhead: false,
| hideLabel: true,
| hideTrigger:true,
| anchor: '100%',
|
| listConfig: {
| loadingText: 'Searching...',
| emptyText: 'No matching posts found.',
|
| // Custom rendering template for each item
| getInnerTpl: function() {
| return '<a class="search-item" href="http://www.sencha.com/forum/showthread.php?t={topicId}&p={id}">' +
| '<h3><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' +
| '{excerpt}' +
| '</a>';
| }
| },
| pageSize: 10
| }, {
| xtype: 'component',
| style: 'margin-top:10px',
| html: 'Live search requires a minimum of 4 characters.'
| }]
| });
| });
|
|
