- // Custom rendering Template
- var resultTpl = new Ext.XTemplate(
- '<tpl for="."><div class="search-item">',
- '<h3><span>{lastPost:date("M j, Y")}<br />by {author}</span>{title}</h3>',
- '{excerpt}',
- '</div></tpl>'
- );
-
- var search = new Ext.form.ComboBox({
- store: ds,
- displayField:'title',
- typeAhead: false,
- loadingText: 'Searching...',
- width: 570,
- pageSize:10,
- hideTrigger:true,
- tpl: resultTpl,
- applyTo: 'search',
- itemSelector: 'div.search-item',
- onSelect: function(record){ // override default onSelect to do redirect
- window.location =
- String.format('http://extjs.com/forum/showthread.php?t={0}&p={1}', record.data.topicId, record.id);
- }
+ var ds = Ext.create('Ext.data.Store', {
+ pageSize: 10,
+ model: 'Post'
+ });
+
+
+ var 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 '<div class="search-item">' +
+ '<h3><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' +
+ '{excerpt}' +
+ '</div>';
+ }
+ },
+ pageSize: 10,
+
+ // override default onSelect to do redirect
+ listeners: {
+ select: function(combo, selection) {
+ var post = selection[0];
+ if (post) {
+ window.location =
+ Ext.String.format('http://www.sencha.com/forum/showthread.php?t={0}&p={1}', post.get('topicId'), post.get('id'));
+ }
+ }
+ }
+ }, {
+ xtype: 'component',
+ style: 'margin-top:10px',
+ html: 'Live search requires a minimum of 4 characters.'
+ }]