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

来源:互联网 发布:随机过程教材 知乎 编辑:程序博客网 时间:2024/05/22 09:49
/** * 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.'    }]});
0 0
原创粉丝点击