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

Question

我想将 ComboBox 与远程查询一起使用，

我使用 extjs 4，

我想用组合框自动完成

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

我找到了一些使用 queryMode: 'remote', 和 hideTrigger:true 的示例

这是我找到的一些链接

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

目前我有这个用传统方式填写组合的代码

在我的 emplyeesModel.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'
    });

在我的emplyeesView.js我有

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'

                                    }
                ]
            },
        ] 
    }); 

在employeesService.java我有

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

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

但实际上我会在 :emplyeesView.js

中更改我的代码

我会有这样的代码：

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

我也认为在 emplyeesModel.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;
        }

我想知道这个网址是否正确

  url: 'employeesService,

Answer 1

以下是对 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

}