champ image dans une form

Version imprimable

04/05/2011, 19h25
kimlee

champ image dans une form

Bonjour,

J'ai construit une Ext.FormPanel à partir de laquelle je lis (et éventuellement modifie) les enregistrements d'une table MySQL par la méthode form.load. Tout se passe bien sauf pour un des champs qui est un BLOB contenant des images.

En me référant à un exemple de Sencha, j'ai mis, pour recevoir cette image, un composant de xtype:box et j'ai mis le paramètre isFormField:true. Mais je n'arrive pas à afficher l'image contenue dans le BLOB. Pire même, cela me bloque ma page HTML au chargement en m'affichant une petite boite de dialogue animée "loading".
Bref, je ne sais pas faire ...
Si l'un ou l'une d'entre vous a un exemple de code pour me débloquer, ou un conseil, ou une idée, et qu'il (qu'elle) veuille bien m'en faire part, qu'il (qu'elle) en soit remercié(e) par avance.

Kim
05/05/2011, 09h06
sekaijin

salut
ben si tu nous en dis pas plus sur ce que tu fais ....

A+JYT

Complément

Bonjour,
Puisqu'apparemment je n'ai pas été assez clair dans la définition de mon problème, voici une description plus détaillée :
J'ai une formPanel dont la liste des items est (raccourcie) ci-dessous :

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
 
               items: [{
			id:'recordid',
                        fieldLabel: 'recordID',
                        name: 'recordid',
                        disabled:true,
                        width:40
                    }, {
                        fieldLabel: 'First Name',
                        name: 'first',
                        width:190
                    }, 
..............
{
                 xtype:'box'
				 ,name:'img'
                ,anchor:''
                ,isFormField:false
                ,fieldLabel:'Image'
                ,autoEl:{
                    tag:'div', children:[{
                         tag:'img'
                        ,qtip:'You can also have a tooltip on the image'
                        ,src:'getimage.php'
                    },{
                         tag:'div'
                        ,style:'margin:0 0 4px 0'
                        ,html:'Image Caption'
                    }]
                }
            },
.............................

Sur ma FormPanel, j'ai également un bouton Load qui appelle la fonction form.load

Code:

1
2
3
4
5
6
7
 
fs.form.load ({
            url:'getadherent.php', // PHP
            method:'GET', 
            waitMsg:'Loading'            
        });
	}

Le fichier getadherent.php retourne un certain nombre de données dans un tableau

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
// requête SQL pour récupérer une image dans une base de données
......................
// traitement de la requête
............................
// le tableau $col contient les valeurs des colonnes, résultat de la requête SQL
	$data[] = array(
			'recordid' => $col[0],
			'first' => $col[3],
			'last' => $col[4],
			'company' => $col[5],
			'richtext' => $col[6],
			'email' => $col[7],
			'img'=>$col[2], // champ BLOB contenant l'image !!!
			'classement' => $col[8],
			'dob' => $col[9],
			'fee' => $col[10]);
 
	$tmpData = json_encode($data);
	$tmpData = substr($tmpData,1,strlen($tmpData)-2); // strip the [ and ]
	$tmpData = str_replace("\\/","/",'{success:true,data:'.$tmpData.'}'); 
 
	$result = $tmpData;

et les champs de ma FormPanel se trouvent ainsi correctement renseignés avec les valeurs des champs de la requête. Le suel que je n'arrive pas à afficher correctement dans la forme est $col[2] qui contient une image.
Je voudrais donc savoir quel type de champ et comment le paramétrer dans ma Form pour qu'il affiche cette variable, à moins qui'il ne faille agir aussi sur le fichier php.

J'espère que j'ai été plus clair cette fois-ci.
D'avance merci pour toute piste, exemple, renseignement.

Kim

Pour info, l'exemple Sencha dont je suis parti (mais qui ne traite pas le problème de l'image) est à
http://www.sencha.com/forum/showthre...dfusion-or-PHP

Citation:

Envoyé par kimlee

Bonjour,
....

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
// requête SQL pour récupérer une image dans une base de données
......................
// traitement de la requête
............................
// le tableau $col contient les valeurs des colonnes, résultat de la requête SQL
	$data[] = array(
			'recordid' => $col[0],
			'first' => $col[3],
			'last' => $col[4],
			'company' => $col[5],
			'richtext' => $col[6],
			'email' => $col[7],
			'img'=>$col[2], // champ BLOB contenant l'image !!!
			'classement' => $col[8],
			'dob' => $col[9],
			'fee' => $col[10]);
 
	$tmpData = json_encode($data);
	$tmpData = substr($tmpData,1,strlen($tmpData)-2); // strip the [ and ]
	$tmpData = str_replace("\\/","/",'{success:true,data:'.$tmpData.'}'); 
 
	$result = $tmpData;

...

Salut
c'est le script getimage.php qui semble être le plus intéressant dans cette affaire

il ne te faut pas mettre ton blob dans ton retour
mais c'est le script getimage.php qui doit aller le chercher

un note tout de même pour quoi ces str_replace et substr ???

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  $response = array(
    'data' => array(
      'recordid' => $col[0],
      'first' => $col[3],
      'last' => $col[4],
      'company' => $col[5],
      'richtext' => $col[6],
      'email' => $col[7],
      'classement' => $col[8],
      'dob' => $col[9],
      'fee' => $col[10]),
    'success' => true
  );
  $result = json_encode($response);

A+JYT

08/05/2011, 10h59
kimlee

Champ image avec ExtJS
Merci sekaijin pour ta réponse.
Néanmoins, le contenu de getimage.php est exactement ce que je voudrais connaitre. Pour l'instant, je suis capable d'afficher une image statique avec le code ci-dessous, par exemple, mais je ne sais pas afficher dans ce composant ma variable $col[2] qui est un champ provenant d'une requête SQL.
J'ai essayé diverses variantes de code, mais sans succès.
Code:

1 2 3 4 5 6 7 8 <? header("Content-type: image/gif"); $image = "comete1.jpg"; readfile($image); ?>
Le débat reste ouvert

Kim
08/05/2011, 12h24
sekaijin

tu ajoute un paramètre idimage à ton script
et en fonction de l'idimage tu retourne l'image apropriée

un simple http://...../getimage.php?idimage=....
te donne l'image que tu veux.

A+JYT