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源代码Here

的详细信息

Answer 2

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

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

Ext.js：如何将搜索栏添加到面板的标题？

2 个答案: