javascript - Ext.js：如何在面板的标题中添加搜索栏？

Question

在 Ext.js 中，如何将搜索栏添加到面板的标题中？有一个 ext.panel.tool 类，但它们都不是搜索栏。只有一个“搜索”按钮，我需要在面板的标题中添加一个文本输入字段和一个搜索按钮。

Answer 1

尝试这个 -

 Ext.onReady(function() {

    Ext.define('Ext.ux.form.SearchField', {
        extend: 'Ext.form.field.Trigger',    
        alias: 'widget.searchfield',    
        trigger1Cls: Ext.baseCSSPrefix + 'form-search-trigger',          
        initComponent: function(){
            this.callParent(arguments);
        },      
        afterRender: function(){
            this.callParent();          
        }
    });

   Ext.create('Ext.panel.Panel', {
    title: 'Hello',
    width: 700,   
    renderTo: Ext.getBody(),
    tools: [ {
        xtype: 'searchfield'
     }]
   });

});

请在此处找到有关searchField源代码的更多详细信息

Answer 2

如果您想在面板中使用图标，则必须使用 type config 否则您可以使用搜索字段组件，它基本上是带有搜索栏样式的文本字段组件。

Ext.create('Ext.panel.Panel', {
title: 'Search',
renderTo: Ext.getBody(),
tools: [{
        xtype: 'searchfield'
    }, {
        type: 'search'
    }
]
});