3

REMOTE query で 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',.......

私の例を完成させるには、サーブレットを使用する必要があると思います

意味 fo 例:

 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が正しいかどうか知りたい

  url: 'employeesService,
4

1 に答える 1

5

以下は 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

}

于 2013-08-11T15:33:12.613 に答える