Discussion :

[franco9]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

Bonjour,
tu as des exemples sur cette page qui peuvent te servir de base.

[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

[NoSmoking]

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

[franco9]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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