Créer combobox extjs avec Json

**Mornor** · 14/07/2014, 14h56

Bonjour tout le monde

Je suis en train de faire une petite appli web, et je cherche à peupler une combobox en ext-js sur base d'un JSONobject (créer via une requête SQL)

J'ai fait ceci en extjs, et je ne vois pas ce qui ne marche pas ...

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
 
var cbx; 
 
function createComboBox(){
 
	var store = Ext.create('Ext.data.JsonStore', {
		autoLoad : true, 
		url : 'SourceType', 
                method : 'POST'
		fields : ['sourceName'],
		proxy : {
			type : 'memory', 
			reader : {
				type : 'json', 
				root : 'data', 
			}
		}
	});
 
	store.load(); 
        return store; 
}
 
 
 
function createForm(){
 
       var store = createComboBox();
 
	Ext.create('Ext.form.Panel', {
		renderTo : 'addSourceForm',  
		title : 'Add a new source event ', 
		height : 130, 
		width : 280, 
		boddyPadding : 10, 
		defaultType : 'textfield', 
		items : [
	         {
	        	 fieldLabel : 'Name ',
	        	 name : 'sourceEventName', 
	        	 allowBlank : false, 
	         }, {
	        	 xtype : 'datefield',
	        	 fieldLabel : 'Date ', 
	        	 name : 'sourceEventDate', 
	        	 allowBlank : false, 
	         }, {
	        	  xtype : 'combo', 
	        	  name : 'comboBox',
	        	  fieldLabel : 'Select a source type ',
	        	  editable : 'false', 
                          queryMode : 'local', 
                          displayField : 'sourceName',
	        	  store : store
 
	         }
 
         ]
	});
}

Quelqu'un pourrait-il me donner un coup de main ?

**sekaijin** · 14/07/2014, 19h42

sans le JSON on peu pas faire grand chose

de plus comment un proxy "memory" peut-il recevoir des donnée d'une requete SQL ??

A+JYT

**Mornor** · 15/07/2014, 09h20

Bonjour,

Effectivement, petite erreur, mais le proxy est bien de type Ajax.
Je viens de remarquer que mon servlet n'est jamais appelé, pourquoi ?
Dois-je placer à un endroit particulier l'URL du servlet et/ou la méthode utilisée (POST) ?

Pour rappel, voici la création du store :

Code javascript :

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
 
var store = Ext.create('Ext.data.JsonStore', {
	autoLoad : true,   
	fields : ['sourceName'],
	url : 'SourceType', 
	method : 'POST',
	proxy : {
		type : 'ajax', 
		reader : {
			type : 'json', 
			root : 'data', 
			successProperty: 'success'
		}
	}
});
 
store.loadRawData();

Et voici la méthode utilisée dans mon servlet :

Code java :

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
 
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 
	SqlConnector sqlConnector = new SqlConnector(); 
	ArrayList<String> items = sqlConnector.getSourceType(); 
	JSONObject toSendBack = new JSONObject(); 
	JSONArray dataArray = new JSONArray(); 		
	JSONObject row1 = new JSONObject(); 
 
	for(int i = 0 ; i < items.size() ; i++){
		row1.put("dataSent", items.get(i)); 
	}
 
	dataArray.put(row1); 
	toSendBack.put("data", dataArray); 
	toSendBack.put("success", true); 
	response.getWriter().print(toSendBack.toString());
	response.setStatus(HttpServletResponse.SC_OK);
	sqlConnector.close();
}

**Mornor** · 16/07/2014, 10h24

J'ai finalement réussi à obtenir le JSON envoyé par le servlet, le voici :

Code javascript :

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

{"data":["Polo","BMW"],"success":true}

Comment faire pour envoyer les données dans la comboBox ?

**sekaijin** · 16/07/2014, 10h48

ton JSON n'est pas conforme à ce qu'attend ton store

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var store = Ext.create('Ext.data.JsonStore', {
	autoLoad : true,   
	fields : ['sourceName'],  //<==== ICI tu donne la liste des champs de chaque row
	url : 'SourceType',       //<==== ICI tu donne l'url de lecture
	method : 'POST',
	proxy : {
		type : 'ajax', 
		reader : {
			type : 'json', 
			root : 'data',  //<==== ICI tu donne le nom du champs référençant la liste des données
			successProperty: 'success'
		}
	}
});

Ton store lit ses données dans le champs data. sur ce point pas de problème. mais la liste des champs de chaque enregistrement est [CODEnline]fields : ['sourceName'],[/CODEinine]. Or ton Json s'il contient un tableau de data, ces data ne sont pas des objet avec un champ sourcename. il faut que ton JSON réponde à cette structure.

Code json :

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

1
2
3
4
5
6
7
{
  "success":true,
  "data":[
    {"sourcename": "Polo"},
    {"sourcename": "BMW"}
  ]
}

Je te conseil de travailler en deux étapes
tu fais ton appli Ext et tu mes des url comme [CODEnline]"sourcetype.json"[/CODEnline] Tu mes des fichiers JSON qui contiennent des données bouchons comme celui ci dessus. Ainsi tu peux faire fonctionner ton appli Ext JS sans la partie serveur et être sur que tout est OK.

une foi que tout est OK côté client tu peux t'atteler au serveur.

tu ouvre ton fichier web.xml et ajoute tes servelts ensuite tu mets un mapping. tu associe l'url [CODEnline]"sourcetype.json"[/CODEnline] avec le servlet [CODEnline]"SourceType"[/CODEnline].
une fois le mapping fait tu invoque ton url et tu vérifie que ce qu'elle produit est conforme au fichier json correspondant.

le deux peuvent alors marcher ensemble.
c'est une méthode de travail que j'ai mis en place dans de gros développements pour lesquels plusieurs équipes travaillaient ensemble.
la Partie ExtJS à pu être proposé au client avant la fin car avec des bouchons (fichier json) tout fonctionne. et la partie JAVA ou PHP a été développé par une autre équipe donc en parallèle.

A+JYT

**sekaijin** · 16/07/2014, 11h06

Voici un exemple de fichier web.xml

Code xml :

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
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
                        http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
                        version="3.0">
	<display-name>Console Olympe</display-name>
    <!-- default responses properties -->
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
 
    <mime-mapping>
        <extension>html</extension>
        <mime-type>text/html;charset=UTF-8</mime-type>
    </mime-mapping>
 
    <mime-mapping>
        <extension>json</extension>
        <mime-type>application/json;charset=UTF-8</mime-type>
    </mime-mapping>
 
    <servlet>
        <servlet-name>properties</servlet-name>
        <servlet-class>fr.sample.console.web.services.PropertiesServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>properties</servlet-name>
        <url-pattern>/olympe/user/properties.json</url-pattern>
    </servlet-mapping>
    <servlet>
        <servlet-name>jsproperties</servlet-name>
        <servlet-class>fr.sample.console.web.services.JsPropertiesServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>jsproperties</servlet-name>
        <url-pattern>/olympe/user/properties.js</url-pattern>
    </servlet-mapping>
 
    <!-- Transco -->
    <!-- Gestion -->
    <!-- Servlet Json -->
    <servlet>
        <servlet-name>centrecout</servlet-name>
        <servlet-class>fr.sample.console.web.transco.gestion.CentreCoutServlet</servlet-class>
    </servlet>
 
    <servlet>
        <servlet-name>codelieu</servlet-name>
        <servlet-class>fr.sample.console.web.transco.gestion.CodeLieuServlet</servlet-class>
    </servlet>
 
    <servlet>
        <servlet-name>application</servlet-name>
        <servlet-class>fr.sample.console.web.transco.gestion.ApplicationServlet</servlet-class>
    </servlet>
 
    <servlet>
        <servlet-name>route</servlet-name>
        <servlet-class>fr.sample.console.web.transco.gestion.RouteServlet</servlet-class>
    </servlet>
    <!-- /Servlet Json -->
 
    <!-- Servlet Mapping -->
    <servlet-mapping>
        <servlet-name>centrecout</servlet-name>
        <url-pattern>/transco/gestion/centrecout.json</url-pattern>
    </servlet-mapping>
 
    <servlet-mapping>
        <servlet-name>codelieu</servlet-name>
        <url-pattern>/transco/gestion/codelieu.json</url-pattern>
    </servlet-mapping>
 
    <servlet-mapping>
        <servlet-name>application</servlet-name>
        <url-pattern>/transco/gestion/application.json</url-pattern>
    </servlet-mapping>
 
    <servlet-mapping>
        <servlet-name>route</servlet-name>
        <url-pattern>/transco/gestion/route.json</url-pattern>
    </servlet-mapping>
    <!-- /Servlet Mapping -->
    <!-- /Gestion -->
    <!-- /Transco -->
 
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationContext-web.xml</param-value>
    </context-param>
 
    <!-- Filtre Spring Security -->
    <filter>
        <filter-name>springSecurityFilterChain</filter-name>
        <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
    </filter>
 
    <!-- Mapping des filtres dans l'ordre dans lequel ils seront appliqués -->
    <filter-mapping>
        <filter-name>springSecurityFilterChain</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
 
    <filter-mapping>
        <filter-name>app</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
 
    <!-- Temps d'inactivité avant expiration de la session (en minutes) -->
    <session-config>
        <session-timeout>240</session-timeout>
    </session-config>
</web-app>

**Mornor** · 16/07/2014, 11h27

Merci pour tout ces conseils !

J'ai effecrtivement eu le temps de tester mon application avec des fichiers JSON hard codés, donc typiquement :

Code :

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

1
2
3
4
5
6
7
{
  "success":true,
  "data":[
    {"sourcename": "Polo"},
    {"sourcename": "BMW"}
  ]
}

Et cela fonctionne.

Le problème, c'est que je ne vois pas comment faire des champs "dynamiques" avec ext-js, pour m'adapter au JSON reçu.
Comment faire pour indiquer d'afficher la row x dans le JSON commençant par "data" ?

En somme :
Comment indiquer à sencha de créer à chaque fois une nouvelle paire :

Code :

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

{"sourcename": "Valeur"}

en fonction du nombre d'entrées dans le champs "data'" ?

**sekaijin** · 16/07/2014, 11h48

c n'est pas sencha qui est en cause c'est ton servlet
c'est lui qui doit produire le JSON correct.

A+JYT

**Mornor** · 16/07/2014, 12h13

Envoyé par sekaijin

c n'est pas sencha qui est en cause c'est ton servlet
c'est lui qui doit produire le JSON correct.

Ahhh, j'y suis presque, je créer mon JSON ainsi :

Code :

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

1
2
3
 
while(result.next())
   items.add("sourcename"+"\""+":"+"\""+result.getString("name"));

Mais le JSON qui en ressort est :
{"data":["sourcename\":\"Polo","sourcename\":\"BMW"],"success":true}

Pourquoi ?

EDIT :
Ce n'est pas à la création du JSON, mais lors de l'envoie de celui ci à extjs :

Code :

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

1
2
3
4
5
6
7
8
 
ArrayList<String> items = sqlConnector.getSourceType(sqlConnector.getId("users", "username", username)); 
JSONObject toSendBack = new JSONObject(); 
JSONArray dataArray = new JSONArray(items); 
toSendBack.put("data", dataArray); 
toSendBack.put("success", true); 
response.getWriter().print(toSendBack.toString());
response.setStatus(HttpServletResponse.SC_OK);

Une idée ?

**sekaijin** · 16/07/2014, 13h27

Je ne comprends rien on ne bricole pas le JSON à coup de string il te faut utiliser l'API JSON.

tu l'as fait pour pour data et success pourquoi bricoler pour le reste ?

Code java :

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

1
2
3
4
5
6
7
8
9
10
11
12
ArrayList<String> items = sqlConnector.getSourceType(sqlConnector.getId("users", "username", username)); 
JSONObject toSendBack = new JSONObject(); 
JSONArray dataArray = new JSONArray();
for (String item: items) {
   JSONObject row = new JSONObject();
   row.put ("sourcename", item);
   dataArray.add(row)
} 
toSendBack.put("data", dataArray); 
toSendBack.put("success", true); 
response.getWriter().print(toSendBack.toString());
response.setStatus(HttpServletResponse.SC_OK);

attention tu ne gère pas l'encodage de tes réponse vérifie que l'encodage par défaut est cohérent.

je ne sais pas quelle est ta maitrise de Java mais ce n'est pas une bonne pratique que de mettre du SQL dans un servlet

A+JYT

**Mornor** · 16/07/2014, 14h55

Ouf,

J'étais parti dans une aventure ...

Grand merci pour ton aide

Ps : Je n'utilise pas de code SQL dans mon servlet, mais je créer juste une instance de SQLConnector (qui est dans un autre package).

Créer combobox extjs avec Json

Ext JS / Sencha

Discussions similaires

Partager

Partager