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'
    }
]
});