Ajout du notion de loop avec ajax

Version imprimable

salut,

je travail actuellement avec extjs4 dans mon application JEE

je veux ajouter la notion de loop dans ma page jsp

c'est à dire , j'ai un textfield avec ce code en extjs :
Code:

1 2 3 4 5 6 7 xtype: 'textfield', fieldLabel: 'test', id: 'nameEmployee', flex: 1, margin: '5 5 5 5', allowBlank : false, blankText: ' champs oligatoire',
mon but est le suivant : quand je suis entrain de faire de saisie dans ce textField et à partir du caractère numéro 5 une requête doit être lancer du la base de donné , cette requête va récupérer la liste des employés selon donnée saisie dans le textField

et une liste sera chargé dans le textfield ( en fait le textField doit prendre le format de combobox

c'est pour cela je pense que le type du field doit etre combobox

avec ce genre de code :
Code:

1 2 3 4 5 6 7 8 9 10 11 xtype: 'combobox', store: employerComboStore, displayField: 'label', valueField: 'value', queryMode: 'local', fieldLabel: 'test', id: 'nameEmployee', allowBlank : false, margin: '5 5 5 5', blankText: 'champs obligatoire', flex: 1
je pense que je dois utiliser dans mon contexte la notion d'ajax

merci d'avance

09/08/2013, 14h43
NoSmoking

Bonjour,
tu as des exemples sur cette page qui peuvent te servir de base.
09/08/2013, 15h05
franco9

merci pour votre réponse

mais suite à une recherche, je pense que je dois utiliser le type combobox en ajoutant la propriété hideTrigger et le mode queryModel va envoyer une requête http vers le serveur

donc quand je suis entrain de taper des caractères dans le combobox et à partir du caractère numéro 3 par exemple je dois lancer une requête http au fur et au mesure en affichant une liste des employées selon le text saisi dans le combobox
09/08/2013, 15h28
NoSmoking

donc tu serais plus prêt de cet exemple d'autocompletion.

pour le moment j'ai le code suivant qui permet de remplir un compbobox avec la manière traditionnelle :

dans emplyeesModel.js j'ai :

Code:

1
2
3
4
5
6
7
8
9
10
 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'
    });

dans emplyeesView.js j'ai :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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'
 
                                    }
                ]
            },
        ] 
    });

dans employeesService.java j'ai :

Code:

1
2
3
4
5
6
7
8
9
10
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;
    }

pour changer ce code je dois ajouter dans le combobox la notion de queryMode: 'remote',: et :hideTrigger:true

le code de combobox sera à mon avis comme celle ci :

Code:

1
2
3
4
5
6
7
8
9
xtype: 'combobox',
                                            store: employeesStore,
                                            displayField: 'label',
                                            valueField: 'value',
                                            queryMode: 'remote',
                                            fieldLabel: 'test',
                                            editable: false,
                                            id: 'employees_IdCombo',
                                                                               hideTrigger:true

aussi je pense que je dois ajouter cette notion dans :emplyeesModel.js

Code:

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

et même la notion de servlet :

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

suite à exemple trouvé dans ce lien :

http://www.mysamplecode.com/2012/01/...servlet-2.html

est ce que quelqu'un pourrez m'aider pour corriger mon code