Ext.js5表单—即时查询（结合Ext.Template和远程数据）(52)

/**
 * This is a more advanced example that shows how you can combine Ext.Template and a
 * remote data store to create a "live search" feature. Try searching for terms like
 * "form", or "grid".
 *这里例子展示了怎么结合Ext.Template和远程数据仓库来创建一个“即时查询”。
 * Each item in the resulting list is a link which may be clicked to navigate to the found
 * forum thread.
 * 搜寻的结果中是一个链接清单
 */
Ext.define('KitchenSink.view.form.ForumSearch', {
    extend: 'Ext.panel.Panel',
    xtype: 'form-forumsearch',


    title: 'Search the Ext Forums',
    width: 600,
    bodyPadding: 10,
    layout: 'anchor',

    height: 300,

    items: [{
        xtype: 'combo',
        store: {
            type: 'form-forum-posts',
            pageSize: 10
        },
        displayField: 'title',
        typeAhead: false,
        hideLabel: true,
        //hideTrigger 设置为true时隐藏trigger按钮，只显示为基础的文本框。
        hideTrigger:true,
        anchor: '100%',

        listConfig: {
            loadingText: 'Searching...',
            emptyText: 'No matching posts found.',

            itemSelector: '.search-item',

            // Custom rendering template for each item
            itemTpl: [
                '<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>'
            ]
        }
    }, {
        xtype: 'component',
        margin: '10 0 0 0',
        html: 'Live search requires a minimum of 4 characters.'
    }]
});