EXTJS4如何实现搜索框

Question

如何在EXTJS页面中添加搜索框（或搜索字段）。

我尝试了以下操作，但页面上未显示任何内容：

1. 将SearchField.js添加到WebContent/ext/ux文件夹中。 2. 编写以下代码：

    Ext.Loader.setConfig({
            enabled: true,
            paths: {
                'Ext.ux': 'ext/ux'
            }
        });
        Ext.require([
                     'Ext.ux.form.SearchField'
                 ]);
    Ext.onReady(function () {
    var win=Ext.create('widget.window',{
            title: 'Super User Access Management',
            height: 480,
            width: 640,
    border:false,
              items       : [ 
{
          xtype      : 'combobox',
          fieldLabel : 'Module',

          value: 'Super Admin' ,
          store: ['Super Admin', 'Partner Contact Management', 'Partner Trainning Management'],
          listeners: {
              select: function(){
               alert('Hello module!');
              }
            }        
            },
            {
              xtype      : 'combobox',

              value: 'Infogain' ,
              store: ['Infogain', 'IBM', 'Mocrosoft'],
              listeners: {
                    select: function(){
                     alert('Hello partner!');
                    }
                  }        
                },
     {
                        xtype: 'searchfield',
                        height: 30,
                        id: 'searchField',
                        styleHtmlContent: true,
                        width: 320,
                        fieldLabel: '',
                    },
{ 
                  xtype: 'gridpanel',
                  border: false,
                  title:'Empty grid',
                  columns: [{header: 'World'}], 
                  store: Ext.create('Ext.data.ArrayStore', {}) 
                  }
       ]
        });
        win.show();
    });

请告诉我在哪里出错了。

- Anushree Acharjee

---

你需要将ux放置在ext/ux/form文件夹中。 - A1rPun

假设我有两个下拉框，一个搜索框和一个网格。我想要在顶部显示drpbx1，然后在下面的一行左侧显示drpbx2，右侧显示搜索框，再下面是网格。你能建议我应该使用什么布局以及需要哪些特殊配置吗？已编辑代码。 - Anushree Acharjee

Answer 1

回答问题下方的评论：

我使用 Ext.toolbar.Toolbar 来实现这个目的。

您可以使用 dockedItems 配置将工具栏放置在容器中。

- A1rPun

---

不，我可以成功地完成它。谢谢！ - Anushree Acharjee

你真的应该接受 @A1rPun 的答案，以给他应有的荣誉。 - mwoodman

Answer 2

tbar: [
    'Search : ', ' ',
    new Ext.ux.form.SearchField({
     store: store,
         width:320
             })
    ]

在你的表单中添加代码..指定store..

- user4557463