Extjs组合框自动完成

Question

我正在使用Extjs 4的远程模式ComboBox，但当我输入任何字符时，数据不会被过滤。并且即使是焦点只更改前12个值。

我对Extjs 4还很陌生。请帮助我如何解决这个问题。

我的代码如下：

    Ext.define('MyGroup.combo', {
           extend: 'Ext.form.ComboBox',

           alias: 'widget.mycombo',
        emptyText:'select keyword',
        store: keywordStore,
        valueField:'name',
           displayField:'name',
           mode: 'remote',
           autoSelect: false,
           selectOnFocus:true,
           //shadow:true,
           //forceSelection: false,
           //triggerAction: 'all',
           hideTrigger:true,
           //multiSelect:true,
           typeAhead:true,
        minChars:1
       });

       Ext.define('keywordModel', {
           extend: 'Ext.data.Model',
           proxy: {
               type: 'ajax',
               url : '/keywordServlet',
               method:'POST',
               reader: {
                   type: 'json',
                   root: 'rows'
                   //,totalProperty: 'totalCount'
               }
           },

           fields: [
               {name: 'name', mapping: 'name'}
           ]
       });

          var keywordStore = Ext.create('Ext.data.Store', {
             // pageSize: 10,
              model: 'keywordModel'
          });

- Ram Patel

---

为什么要使用define？你能否发布一下你是如何调用这个组合框的？ - Kiran

我将这个称作xtype:'mycombo'。 - Ram Patel

哪种是正确的方式？你能给我提供一个样例吗？ - Ram Patel

首先让我知道你想做什么？你是想覆盖combobox还是在你的应用程序中使用普通的combobox。 - Kiran

Kiran，我在这里扩展了一个组合框并在我的项目中多次重用它。为了使其可重用，我使用了定义，并且这是唯一的重用方式。如果您对此不了解，请避开这个问题。回答每个问题并非强制要求。 - Ram Patel

Answer 1

据我所知，我认为这对您会有所帮助：

Ext.define('MyGroup.combo', {
           extend: 'Ext.form.ComboBox',
           alias: 'widget.mycombo',
    initComponent: function() {
        this.callParent([arguments]);
    }
});

var keywordStore = Ext.create('Ext.data.SimpleStore',{
    fields: ['id', 'name'],
    data: [[1, 'mr'],[2, 'mr(yes)'],[3, 'mr(no)'], [4, 'example'], [5, 'example(yes)'],[6,'example(no)'],[7,'sample'],[8,'sample(yes)'],[9,'sample(no)'],[10,'mrs'],[11,'mrs(yes)'],[12,'mrs(no)']]
});

Ext.widget('mycombo',{
    xtype : 'combo',
        emptyText:'select keyword',
        store: keywordStore,
        valueField:'name',
           displayField:'name',
           mode: 'remote',
           autoSelect: false,
           selectOnFocus:true,
           //shadow:true,
           //forceSelection: false,
           //triggerAction: 'all',
           hideTrigger:true,
           //multiSelect:true,
           typeAhead:true,
        minChars:1,
    renderTo :document.body
       });

还有一件事是，没有人试图回答每一个问题，但是每个人都在努力帮助像我们这样的人：-）

- Kiran

---

非常好的帖子！关于这段代码有几个问题（我会点赞你的评论）...你能让它自动完成文本，以便进行“以...开头”或“部分匹配”的逻辑，并在执行后仅显示5或10个结果吗？ - Entree