Extjs4 使用extjs自动完成：带有远程查询存储的组合框

我想在远程查询中使用ComboBox

我使用ExtJS4

我想用combobox做自动完成

这意味着当我在组合框中输入文本时，一个请求将发送到数据库，以便根据组合框中输入的文本显示员工列表（在我的情况下）

我找到了一些使用

queryMode:'remote'、

和

hideTrigger:true

这是我找到的一些链接

http://demo.mysamplecode.com/ExtJs/pages/comboBoxes.jsp

目前我有这个代码，它以传统的方式填写一个组合

在myEmployeesModel.js中，我有

 Ext.define('GenericComboModel', {
            extend: 'Ext.data.Model', 
            fields: [
                 {name: 'label', type: 'string'},
                 {name: 'value',  type: 'string'}
            ]
        });
        var employeesStore= Ext.create('Ext.data.Store', {
         model: 'GenericComboModel'
    });

function fillEmployeesCombo() {
        employeesService.getEmployeesList({
            callback:function(employeesList){   

                for(var i=0; i<employeesList.length; i++){
                    var employeesLabel = employeesList[i].libelleEmployees;
                    var employeesId = employeesList[i].idEmployees;
                    employeesStore.add({label: employeesLabel , value: employeesId });

                }

            }  
        });
    }
var employeesPanel = Ext.create('Ext.panel.Panel', {
        title: 'test',
        bodyPadding: 5,
        width: '100%',
        height: '100%',
        autoScroll: true,
        id: 'tab_Employees',
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },
        defaultType: 'textfield',
        items: 
        [

            {
                xtype: 'container',
                layout: {
                    type: 'hbox'
                },
                padding: '5 5 5 5',
                items:
                [
{
                                        xtype: 'combobox',
                                        store: employeesStore,
                                        displayField: 'label',
                                        valueField: 'value',
                                        queryMode: 'local',
                                        fieldLabel: 'test',
                                        editable: false,
                                        id: 'employees_IdCombo'

                                    }
                ]
            },
        ] 
    }); 

在我的

employeesview.js中

我有

 Ext.define('GenericComboModel', {
            extend: 'Ext.data.Model', 
            fields: [
                 {name: 'label', type: 'string'},
                 {name: 'value',  type: 'string'}
            ]
        });
        var employeesStore= Ext.create('Ext.data.Store', {
         model: 'GenericComboModel'
    });

function fillEmployeesCombo() {
        employeesService.getEmployeesList({
            callback:function(employeesList){   

                for(var i=0; i<employeesList.length; i++){
                    var employeesLabel = employeesList[i].libelleEmployees;
                    var employeesId = employeesList[i].idEmployees;
                    employeesStore.add({label: employeesLabel , value: employeesId });

                }

            }  
        });
    }
var employeesPanel = Ext.create('Ext.panel.Panel', {
        title: 'test',
        bodyPadding: 5,
        width: '100%',
        height: '100%',
        autoScroll: true,
        id: 'tab_Employees',
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },
        defaultType: 'textfield',
        items: 
        [

            {
                xtype: 'container',
                layout: {
                    type: 'hbox'
                },
                padding: '5 5 5 5',
                items:
                [
{
                                        xtype: 'combobox',
                                        store: employeesStore,
                                        displayField: 'label',
                                        valueField: 'value',
                                        queryMode: 'local',
                                        fieldLabel: 'test',
                                        editable: false,
                                        id: 'employees_IdCombo'

                                    }
                ]
            },
        ] 
    }); 

但实际上，我将在中更改代码：employeesview.js

我会有这样的代码：

xtype: 'combobox',
                                            store: employeesStore,
                                            displayField: 'label',
                                            valueField: 'value',
                                            queryMode: 'remote',
                                            fieldLabel: 'test',
                                            editable: false,
                                            id: 'employees_IdCombo',
                                                                               hideTrigger:true

此外，我认为在EmployeesModel.js中，我应该添加以下概念：

 proxy: {
        type: 'ajax',.......

我认为为了完成我的示例，我应该使用servlet

示例的含义：

 proxy: {
        type: 'ajax',
        url: 'EmployeesServlet',...

有人能帮我更正代码吗

我尝试使用以下代码：

Ext.define('GenericComboModel', {
        extend: 'Ext.data.Model', 
        fields: [
             {name: 'label', type: 'string'},
             {name: 'value',  type: 'string'}
        ]
 });

 var employeesStore= Ext.create('Ext.data.Store', {
     model: 'GenericComboModel',
     proxy: {
         type: 'ajax',
         url: 'employeesService',
         reader: {
             type: 'json',
             root: 'users'
         }
     }
 });

//Finally your combo looks like this
{
  xtype: 'combobox',
  store: employeesStore,
  displayField: 'label',
  valueField: 'value',
  queryMode: 'remote',
  fieldLabel: 'test',
  editable: false,
  id: 'employees_IdCombo',
  hideTrigger:true
  queryParam: 'searchStr' //This will be the argument that is going to be passed to your service which you can use this to return your resulkt set

}


    function fillEmployeesComboByParam(String Libelle) {
            employeesService.getEmployeesList(Libelle){
                callback:function(employeesList){   

                    for(var i=0; i<employeesList.length; i++){
                        var employeesLabel = employeesList[i].libelleEmployees;
                        var employeesId = employeesList[i].idEmployees;
                        employeesStore.add({label: employeesLabel , value: employeesId });

                    }

                }  
            });
        }





in `employeesService.java` I have

    public List<employees> getEmployeesList(String libelle) {
            // TODO Auto-generated method stub

            Query query = getSession().createQuery("FROM employees emp where emp.libelle=:libelle ");  
query.setParameter("libelle", libelle);
            List result = query.list();
            if(result.size()!=0 && result !=null)
                return result;
            else 
                return null;
        }

---

下面是extjs上的更改，您必须进行服务更改以处理作为queryParam传递的searchStr

//Your model remains the same as you defined
 Ext.define('GenericComboModel', {
        extend: 'Ext.data.Model', 
        fields: [
             {name: 'label', type: 'string'},
             {name: 'value',  type: 'string'}
        ]
 });

 //Your store will look like

 var employeesStore= Ext.create('Ext.data.Store', {
     model: 'GenericComboModel',
     proxy: {
         type: 'ajax',
         url: 'Your service URL',
         reader: {
             type: 'json',
             root: 'users'
         }
     }
 });

//Finally your combo looks like this
{
  xtype: 'combobox',
  store: employeesStore,
  displayField: 'label',
  valueField: 'value',
  queryMode: 'remote',
  fieldLabel: 'test',
  editable: true,
  id: 'employees_IdCombo',
  hideTrigger:true
  queryParam: 'searchStr' //This will be the argument that is going to be passed to your service which you can use this to return your resulkt set

---

}

Objectone-您正在将hideTrigger:true设置为true，这意味着用户应该键入，然后由于queryMode:“remote”，存储将被选择性地筛选。但是，您还将其设置为可编辑：false。。这个解决方案将如何工作？