Discussion :

[Mitaka]

bonjour,
je suis débutante en Ajax et là j'ai un gros souci.

En effet, je dois permettre une recherche dynamique sur une liste : l'utilisateur sélectionne des boutons radios, une valeur dans une liste, écrit un début de mot et la liste doit se recharger sans qu'il a clique sur un bouton.
je me disais que je devais utiliser un xmlhttprequest mais je ne vois pas comment mettre forme tout cela.

voici un aperçu de mon code extjs pour la liste :

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
   

   var estore = new Ext.data.SimpleStore({
    fields: ['abbr','etat'],
    data : [['','Tous'],['V','Valide'],['R','Remplacée'],['M','Modifiée'],['A','Annulée']]
   });

    var frmrecherche = new Ext.FormPanel({
        labelWidth: 125, // label settings here cascade unless overridden
        width: 753,
        items: {
            xtype:'fieldset',
            title: 'Recherche',
            collapsible: true,
            autoHeight:true,
            defaults: {width: 210},
            name:'frmrecherche',
            items :[{
                    xtype: 'textfield',
                    fieldLabel: 'Code de la norme',
                    name: 'code_norme',
                },{
                    xtype: 'combo',
                    fieldLabel: 'Etat',
                    store: estore,
                    displayField:'etat',
                    typeAhead: true,
                    mode: 'local',
                    triggerAction: 'all',
                    emptyText:'Selectionnez...',
                    selectOnFocus:true,

                },{
                    xtype: 'panel',
                    layout: 'column',
                    title: 'Type de Norme',
                    frame: true,
                    width: 350,
                    layoutConfig: {
                        columns: 5
                    },
                    items: [{
                                xtype: 'radio',
                                fieldLabel: 'Type',
                                boxLabel: 'FR',
                                name: 'type_option',
                                value: 'FR',
                                checked: true,
                                columnwidth:.33,                                
                            },{
                                xtype: 'radio',
                                boxLabel: 'DIN',
                                name: 'type_option',
                                value: 'DIN',
                                columnwidth:.33,
                            },{
                                xtype: 'radio',
                                boxLabel: 'UK',
                                name: 'type_option',
                                value: 'UK',
                                columnwidth:.33 ,
                            },{
                                xtype: 'radio',
                                boxLabel: 'International',
                                name: 'type_option',
                                value: 'I',
                                columnwidth:.33, 
                            },{
                                xtype: 'radio',
                                boxLabel: 'Autres',
                                name: 'type_option',
                                value: 'A',
                                columnwidth:.33, 
                            }
                           ]},   
                      ],
            
        },
    });
    

    frmrecherche.render("recherche");

    var myData = <?php echo $data; ?>;

    // create the data store
    var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'code_norme'},
           {name: 'creation', type: 'date', dateFormat: 'Y-m-d'},
           {name: 'etat'},
           {name: 'chainage'},
           {name: 'lastChange', type: 'date', dateFormat: 'Y-m-d'},
           {name: 'edit'}
        ]
    });
    store.loadData(myData);
    

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "Code de la norme", width: 200, sortable: true, dataIndex: 'code_norme'},
            {header: "Création",  width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'creation'},
            {header: "Etat", width: 100, sortable: true, dataIndex: 'etat'},
            {header: "Chaînage", width: 200, sortable: true, dataIndex: 'chainage'},
            {header: "Dernière modification", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'lastChange'},
            {header: "Editer", width: 45, sortable: true, dataIndex: 'edit'}
        ],
        stripeRows: true,
        defaults:{autoHeight: true},
        width:754,
        title:'Liste des normes'
    });

    grid.render('normes');

    grid.getSelectionModel().selectFirstRow();
    });

et le code php permettant d'obtenir $datas :

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
<?php 
if(!empty($normes)){
          $data = "[";
          
          foreach ($normes as $norme){
                  list($code_local,$creation_norme,$etat,$etat_abr,$action_date,$action_norme) = $norme->getDataStructure('FR','R','');
                  if($code_local)
                  {
                    $data .= "['".$code_local."','".$creation_norme."','".$etat."','".$action_norme."','".$action_date."','".link_to(image_tag("/marianne/web/images/edit.png"), 'normes/edit?date='.$creation_norme.'&code_local='.$code_local)."'],";
                  }
                  else
                  {
                    $data .= "";
                  }
           }
          $data .= "]"; 
           
      }
      else
      {
          $data = "";
      }
      
      
?>

getDatastucture permet de récupérer les enregistrements selon certains critères sélectionnés dans le formulaire de recherche, je voulais éventuellement faire cela pour la recherche mais je pense que cette solution est un peu lourde.

voilà

merci d'avance