Créer combobox extjs avec Json

Version imprimable

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:

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 ?

14/07/2014, 19h42
sekaijin

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

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:

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:

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();
}

16/07/2014, 10h24
Mornor

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

Code:

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

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

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

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:

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

Voici un exemple de fichier web.xml

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
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>

16/07/2014, 11h27
Mornor
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:

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:

{"sourcename": "Valeur"}

en fonction du nombre d'entrées dans le champs "data'" ?
16/07/2014, 11h48
sekaijin

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

A+JYT

Citation:

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:

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:

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 ?

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:

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

16/07/2014, 14h55
Mornor

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).