Affichage Xml dans un textarea

Version imprimable

03/12/2010, 07h17
mialy.rakot

Affichage Xml dans un textarea
Bonjour à tous,
J'ai un problème sur un textarea.
J'ai une requête Ajax qui retourne un fichier texte et que je dois afficher dans un textarea. Si je fais le traitement avec json il y a quelques problèmes puisque les caractères spéciaux ne sont pas traités. Problèmes surtout liés au fait que json et iso ne sont pas vraiment compatibles. Du coup j'ai des érreurs du genre
Code:

1 2 3 Allées ça va piège à droite en Allees ca va piege a droite
On m'a alors demandée d'opter pour affichage xml. Et là je galère. Je ne sais pas comment loader mes résultats dans le textarea. Si c'est un grid, j'aurais pas eu de problèmes mais là c'est :calim2:.
Pourriez-vous m'indiquer une piste? J'ai testé (je sais pas si c'est correct) de créer un store dans le textarea mais ça ne passe pas.
Merci d'avance pour votre aide.

J'ai éssayé d'utiliser un reader

Code:

1
2
3
4
5
6
7
8
9
10
11
12
var pnl = {xtype:'textarea',id:'montext',name:'montext',width:'100%',height:300,reader : new Ext.data.XmlReader({
            record : 'valeurfichier',
        }, [
            {name: 'fichier', mapping:'fichier'}
        ])};
var fiche = {title:'Fiche',layout:'form',height:'100%',items:[pnl]};
 
 
Ext.Ajax.request({url:'php/exemple2.php?id='+id,success:function(x){
			 var res = x.responseXML;
			 Ext.getCmp('mintext').load(res);
			 }});

mais ça ne marche pas :cry:

03/12/2010, 14h57
JulienFio

Peut-être que ce post pourra t'aider

Read-Writting Xml
04/12/2010, 14h21
sekaijin

Salut

un simple html entitie coté serveur est c'est fait
A+JYT
06/12/2010, 08h49
mialy.rakot

Bonjour,
ok je vais tester ce que vous m'avez proposée
06/12/2010, 09h33
mialy.rakot
JulienFio,
j'ai cette erreur :
Code:

1 2 3 4 5 Erreur*: missing ] after element list Fichier Source*: http://localhost/Notes/ext/ext-all.js Ligne*: 7, Colonne*: 9 Code Source*: ([object XMLDocument])
en utilisant ce que tu m'as proposée. Franchement, je ne sais pas ce qui cloche ici. J'ai parcouru mon code mais pas de ] manquant 8O
06/12/2010, 09h44
JulienFio

Je ne sais pas trop quoi répondre, c'est difficile ne connaissant pas ton code. Effectivement s'il s'agissait juste d'un crochet manquant tu le verrais dessuite avec ton éditeur de code (Netbean ? Eclipse?).

Il reste sinon la solution proposé par sekaijin, à savoir utiliser un html entitie coté serveur
06/12/2010, 09h48
mialy.rakot

Citation:

Envoyé par sekaijin

Salut

un simple html entitie coté serveur est c'est fait
A+JYT

Ca ne change rien. J'utilises déjà iso (pas de caractères spéciaux du style &,<,>,...) pour l'encodage de mes fichiers xml. Côté serveur ça marche impec mais c'est dans l'affichage que ça pose problèmes.
Merci quand même.

C'est surtout notepad que j'utilise pour vérifier mes codes.

Voici une partie de mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
//Ceci est constitué de plusieurs textfields, datefields,...
var infos_pnl = {layout:'column',width:'100%',layoutConfig:{columns:2},border:false,items:[dest_pnl,user_pnl]};
 
var note_pnl = {xtype:'textarea',id:'contenu',name:'contenu',width:'100%',height:300};
 
 
var fiche = {title:'Fiche',
layout:'form',
height:'100%',
items:[infos_pnl,note_pnl],
reader: new Ext.data.XmlReader({record:'root',fields: [{name:'nte_reference',mapping:'nte_reference'},'nte_objet','nte_redacteur','nte_approbateur','nte_dateredaction','nte_dateapprobation','nte_dateapplication','nte_remplacee','nte_reference_remplacee','nte_destinataire','nte_key','contenu']})};
 
Ext.Ajax.request({url:'php/exemple2.php?id='+id,success:function(xhr)
			 {
			 var resultat = Ext.decode(xhr.responseXML);
			 //Je pense que le problème est surtout ici
fiche.loadData(resultat);
			 }
			 });

C'est quand j'affiche les résultats que je penses qu'il y a problèmes.
Merci d'avance

06/12/2010, 09h58
JulienFio

Peux-tu poster ton code ? si j'ai un peu de temps je regarderais si je vois d'où cette erreur peut provenir

Edit: tu m'as devancée

Alors, essayes déjà comme ça:

Code:

1
2
3
4
5
6
7
8
9
var infos_pnl = {
xtype: 'panel',
    layout:'column',
    width:'100%',
    layoutConfig:{columns:2},
    border:false,
    items:[dest_pnl,user_pnl]
};

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var fiche = {
    xtype: 'form',
    title:'Fiche',

layout:'form',
height:'100%',
items:[infos_pnl,note_pnl],
reader: new Ext.data.XmlReader({record:'root',fields: [{name:'nte_reference',mapping:'nte_reference'},'nte_objet','nte_redacteur','nte_approbateur','nte_dateredaction','nte_dateapprobation','nte_dateapplication','nte_remplacee','nte_reference_remplacee','nte_destinataire','nte_key','contenu']})};
 
Ext.Ajax.request({url:'php/exemple2.php?id='+id,success:function(xhr)
			 {
			 var resultat = Ext.decode(xhr.responseXML);
fiche.loadData(resultat);
			 }
			 });

Edit:
et ceci donne quoi ?

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
 
var fiche = {
    title:'Fiche',
    layout:'form',
    height:'100%',
    items:[infos_pnl,note_pnl],
    reader: new Ext.data.XmlReader({
        record:'root',
        fields: [{
            name:'nte_reference',
            mapping:'nte_reference'
        },'nte_objet','nte_redacteur','nte_approbateur','nte_dateredaction','nte_dateapprobation','nte_dateapplication','nte_remplacee','nte_reference_remplacee','nte_destinataire','nte_key','contenu']
    })
};
 
fiche.on('afterrender', function(){
    fiche.getForm().load({
                            url:'ton fichier xml',
                            method:'GET',
                            success:function(form, action){
                            //any additional handling 
                            },
                            failure:function(form, action){
                            //some msg here
                            } ,
                            scope:this
                        });
})

Citation:

Envoyé par JulienFio

et ceci donne quoi ?

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
 
var fiche = {
    title:'Fiche',
    layout:'form',
    height:'100%',
    items:[infos_pnl,note_pnl],
    reader: new Ext.data.XmlReader({
        record:'root',
        fields: [{
            name:'nte_reference',
            mapping:'nte_reference'
        },'nte_objet','nte_redacteur','nte_approbateur','nte_dateredaction','nte_dateapprobation','nte_dateapplication','nte_remplacee','nte_reference_remplacee','nte_destinataire','nte_key','contenu']
    })
};
 
fiche.on('afterrender', function(){
    fiche.getForm().load({
                            url:'ton fichier xml',
                            method:'GET',
                            success:function(form, action){
                            //any additional handling 
                            },
                            failure:function(form, action){
                            //some msg here
                            } ,
                            scope:this
                        });
})

il me renvoit cette erreur

Code:

1
2
3
Erreur*: fiche.on is not a function
Fichier Source*: http://localhost/Notes/js/notes.js
Ligne*: 527

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var fiche = {
    title:'Fiche',
    layout:'form',
    height:'100%',
    items:[infos_pnl,note_pnl],
    reader: new Ext.data.XmlReader({
        record:'root',
        fields: [{
            name:'nte_reference',
            mapping:'nte_reference'
        },'nte_objet','nte_redacteur','nte_approbateur','nte_dateredaction','nte_dateapprobation','nte_dateapplication','nte_remplacee','nte_reference_remplacee','nte_destinataire','nte_key','contenu']
    })
};
 
 
var resultats_liste = new Ext.grid.GridPanel({stripeRows:true,stateful:true,columns:[{header:'Référence',width:120,id:'grid',sortable:true,dataIndex:'reference'},{header:'Rédaction',sortable:true,dataIndex:'redacteur'},{header:'Date',sortable:true,dataIndex:'dateredaction',width:70},{header:'Approbation',sortable:true,dataIndex:'approbateur'},{header:'Date',sortable:true,dataIndex:'dateapprobation',width:70},{header:'Objet',sortable:true,dataIndex:'objet',width:290}],ds:ds,height:500,listeners: {
   			 rowdblclick: function(grid,rowindex,record) {
			 tabpane.setActiveTab(1);
			 var record2  = grid.getStore().getAt( rowindex );
			 var id = record2.data.reference;
			 fiche.getForm().load({url:'url.php?id='+id,method:'GET'});			 
          }
      }});

En cliquant sur le grid, l'utilisateur est renvoyé vers le second onglet et les résultats doivent s'afficher dans le form du second onglet mais là c'est cette erreur qui s'affiche :

Code:

1
2
3
Erreur*: fiche.getForm is not a function
Fichier Source*: http://localhost/Notes/js/notes.js
Ligne*: 487

Merci d'avance

14/12/2010, 08h27
JulienFio

Pas sûr mais peut être qu'en rajoutant

Code:

xtype: 'form'

ça sera mieux, le getForm est typique des formPanel, or 'var fiche' n'a pas de type configuré

Citation:

Envoyé par JulienFio

Pas sûr mais peut être qu'en rajoutant

Code:

xtype: 'form'

ça sera mieux, le getForm est typique des formPanel, or 'var fiche' n'a pas de type configuré

J'ai déjà éssayé mais ça n'affiche rien.
Code:

1 2 var tabpane = new Ext.TabPanel({activeTab:0,items:[liste,fiche],defaults:{autoHeight:true, bodyStyle:'padding:10px'}}); var form = {layout:'form',width:'100%',height:'100%',border:false,items:[tabpane]};
J'ai créé un form composé de 2 onglets et c'est pour ça que je n'ai plus mis de xtype:'form' dans fiche.

Merci beaucoup

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
var fiche = {
    title:'Fiche',
    height:'100%',
    items:[infos_pnl,note_pnl]
};
 
 
var tabpane = new Ext.TabPanel({activeTab:0,items:[liste,fiche],defaults:{autoHeight:true, bodyStyle:'padding:10px'}});
 
var form = {layout:'form',width:'100%',height:'100%',border:false,items:[tabpane]};
 
var corps = {region:'center',title:'Notes de service',items:[form]};
 
var content = new Ext.FormPanel({region:'center',layout:'border',items:[menu,corps],
    reader: new Ext.data.XmlReader({
        record:'root',
        fields: [{
            name:'nte_reference',
            mapping:'nte_reference'
        },'nte_objet','nte_redacteur','nte_approbateur','nte_dateredaction','nte_dateapprobation','nte_dateapplication','nte_remplacee','nte_reference_remplacee','nte_destinataire','nte_key','contenu']});

J'avais omis de le poster précédemment.
J'ai fait un content.getForm(),

Code:

content.getForm().load({url:'php/exemple2.php?id='+id});

mais il y a l'erreur

Code:

content.getForm is not a function

Vu que j'ai bloqué dessus depuis quelques temps, j'ai finalement opté pour du json avec quelques changements dans le fichier php

Code:

1
2
3
4
5
6
7
$contenu = str_replace("<br />", " ",$contenu);
			   $contenu = str_replace("é", "&eacute;",$contenu);
			   $contenu = str_replace("è", "&egrave;",$contenu);
			   $contenu = str_replace("ç", "&ccedil;",$contenu);
			   $contenu = str_replace("à", "&agrave;",$contenu);
			   $contenu = str_replace("ê", "&ecirc;",$contenu);
			   $contenu = str_replace("ù", "&ugrave;",$contenu);

et dans le fichier js pour le résultat dans le textarea

Code:

1
2
3
4
5
6
resultat.fichier = resultat.fichier.replace(/&eacute;/gi,"é");
			 resultat.fichier = resultat.fichier.replace(/&egrave;/gi,"è");
			 resultat.fichier = resultat.fichier.replace(/&ccedil;/gi,"ç");
			 resultat.fichier = resultat.fichier.replace(/&agrave;/gi,"à");
			 resultat.fichier = resultat.fichier.replace(/&ecirc;/gi,"ê");
			 resultat.fichier = resultat.fichier.replace(/&ugrave;/gi,"ù");

28/03/2011, 21h26
senacle

Il suffit de faire côté php :

Code:

$contenu = utf8_encode($contenu);

pour les caractères accentués.

et pour les retours à la ligne, voir ces deux post :
http://www.sencha.com/forum/showthre...ea-gt-New-Line
http://www.sencha.com/forum/showthre...tring-constant!!

Rien de particulier à faire côté Extjs, à part récupérer le json arrivé du php.