close windows [Résolu]

jicaygg · 25/11/2010, 10h33

Bonjour,

Je rencontre un problème sur la fermeture d'une Window.
Ma window se ferme bien mais le problème c'est que cela flingue le DOM et lorsque je veux rappeller ma window, il ne la reconnait plus.

Voici ma window :

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
 
 
var saveWindow = function(saveItem) {
    var sWindow = function () { return new Ext.Window( {
    	title : 'Save As',    	
    	id : 'mySave',		
		width : 563,
		height : 430,
		closeAction : 'close',		
		plain : false,
		items : new Ext.FormPanel( {
			standardSubmit: true,
			id: 'savePref',	
			submit: function() { 
				       this.getForm().submit({ 
				         url: '../ws/ACC/saveUserPreference', 
				         scope: this, 		
				         waitMsg: 'Message d\'attente' 
			            }); 
			},
			border : true,
			width : 550,			
			bodyStyle: 'padding: 5px',	    
			  items: [{
				xtype     : 'textfield',
                name      : '', 
                id        : 'name',
                fieldLabel: 'Name', 
                width     : 100,                
                allowBlank: false,
                anchor    : '-150'
	        },
	        {
	    		xtype: 'checkboxgroup',	    		
	    		fieldLabel: '',	    		
	    		border: true,	    		
	    		checked: false,
	            columns: 1,    
	    	          items: [	             
	    	              {boxLabel: 'Is defaults', id: 'testCheck2', labelSeparator: '', inputValue: 'isDefault'}	                                  
	                    ]
	        }, 
 
	        {
	            xtype:'fieldset',
	            checkboxToggle: true,
	            title: 'Share groups',
	            id: 'shareGroups',
	            autoHeight: true, 
	            autoWidth: true,
	            defaultType: 'checkbox',
	            collapsed: true,
	            checked: false,
	               items: [ grid ]	        
	        }]
		}),
		buttons: [{			
			text: 'Save',
			id: 'btSave',
			cls: 'x-btn-text-icon' 			
		},{
			text: 'Close',
			handler: function() {
			   Ext.getCmp('mySave').close();
 
			}
		}]
	}); };    	
    Ext.get('btSave').on('click', function(){
    	Ext.MessageBox.alert( 'Success : <br> Nom de la preference :'+ Ext.getCmp('name').getValue() + '<br>Vue par default :'+ Ext.getCmp('testCheck2').getValue() + '<br>Share Groups :'+ Ext.getCmp('shareGroups').isVisible() );
    });	
};

Je fais un close sur mon button :

Code :

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

1
2
3
4
5
6
7
 
 
{
			text: 'Close',
			handler: function() {
			   Ext.getCmp('mySave').close();		  
			}

Ma Window se ferme bien, mais quand je veux la rappeller, j'ai une erreur :

Operation is not supported" code: "9
[Break on this error] window.undefined=window.undefined;Ext=...window.attachEvent("onunload",a)}})();

Il ne la reconnaît plus, vu que mon DOM a été supprimé...

Comment m'y prendre pour contourner ce problème ??

jicaygg · 25/11/2010, 11h10

En continuant mes recherches, je me suis rendu compte que le problème vient d'un Item :

Citation:

{
xtype:'fieldset',
checkboxToggle: true,
title: 'Share groups',
id: 'shareGroups',
autoHeight: true,
autoWidth: true,
defaultType: 'checkbox',
collapsed: true,
checked: false,
items: [ grid ]
}

En fait, il ne retrouve pas mon item [ grid ] une fois que je fais un close de ma window.

Voila mon grid :

Citation:

var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "value", id: 'value', width: 180, dataIndex: 'value', sortable: true},
{header: "label", id: 'label', width: 200, dataIndex: 'label', sortable: true}
],
width: 540,
height: 200
});
};

Au premier chargement cela fonctionne, mais dès que je fais un close de ma window, impossible de trouver une trace de mon GridPanel...

JulienFio · 25/11/2010, 12h11

Bonjour,

Essayes comme ça:

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
{
	            xtype:'fieldset',
	            checkboxToggle: true,
	            title: 'Share groups',
	            id: 'shareGroups',
	            autoHeight: true, 
	            autoWidth: true,
	            defaultType: 'checkbox',
	            collapsed: true,
	            checked: false,
	               items: [{
xtype: 'gridpanel',
store: store,
columns: [
{header: "value", id: 'value', width: 180, dataIndex: 'value', sortable: true},
{header: "label", id: 'label', width: 200, dataIndex: 'label', sortable: true}
],
width: 540,
height: 200
}
}]	        
	        }

Par contre, même si ça résoud ton problème il doit y avoir une façon plus propre de coder.

Tu pourrais par exemple définir tes propres classe et les appeler ainsi:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
xtype:'fieldset',
checkboxToggle: true,
title: 'Share groups',
id: 'shareGroups',
autoHeight: true,
autoWidth: true,
defaultType: 'checkbox',
collapsed: true,
checked: false,
items: [{
xtype: 'monGridPanel'
} ]
}

le 'monGridPanel' serait en fait une extension du gridPanel standard. Tu aurais tes sources organisées en parties fonctionnelles (avec tes propres classes)

Exemple de classe 'monGridPanel':

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
 
Ext.ns('tonNameSpace');
 
//Tu défini ton store
var store = new Ext.data.JsonStore({
           //tes paramètres
        });
 
//Constructeur de ton gridPanel
monGridPanel = function (config) {
    Ext.apply(config,{});
    //On appelle le constructeur de base
    monGridPanel.superclass.constructor.call(this, config);
//Chargement du store
    store.load();
}
 
 
Ext.extend(monGridPanel, Ext.grid.GridPanel, {
    store: store,
columns: [
{header: "value", id: 'value', width: 180, dataIndex: 'value', sortable: true},
{header: "label", id: 'label', width: 200, dataIndex: 'label', sortable: true}
],
width: 540,
height: 200
});
 
 
//On référencie ce nouveau constructeur comme xtype
Ext.reg('monGridPanel', monGridPanel);

jicaygg · 25/11/2010, 13h35

Citation:

Envoyé par JulienFio

Bonjour,

Essayes comme ça:

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
{
	            xtype:'fieldset',
	            checkboxToggle: true,
	            title: 'Share groups',
	            id: 'shareGroups',
	            autoHeight: true, 
	            autoWidth: true,
	            defaultType: 'checkbox',
	            collapsed: true,
	            checked: false,
	               items: [{
xtype: 'gridpanel',
store: store,
columns: [
{header: "value", id: 'value', width: 180, dataIndex: 'value', sortable: true},
{header: "label", id: 'label', width: 200, dataIndex: 'label', sortable: true}
],
width: 540,
height: 200
}
}]	        
	        }

Par contre, même si ça résoud ton problème il doit y avoir une façon plus propre de coder.

Tu pourrais par exemple définir tes propres classe et les appeler ainsi:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
xtype:'fieldset',
checkboxToggle: true,
title: 'Share groups',
id: 'shareGroups',
autoHeight: true,
autoWidth: true,
defaultType: 'checkbox',
collapsed: true,
checked: false,
items: [{
xtype: 'monGridPanel'
} ]
}

le 'monGridPanel' serait en fait une extension du gridPanel standard. Tu aurais tes sources organisées en parties fonctionnelles (avec tes propres classes)

Exemple de classe 'monGridPanel':

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
 
Ext.ns('tonNameSpace');
 
//Tu défini ton store
var store = new Ext.data.JsonStore({
           //tes paramètres
        });
 
//Constructeur de ton gridPanel
monGridPanel = function (config) {
    Ext.apply(config,{});
    //On appelle le constructeur de base
    monGridPanel.superclass.constructor.call(this, config);
//Chargement du store
    store.load();
}
 
 
Ext.extend(monGridPanel, Ext.grid.GridPanel, {
    store: store,
columns: [
{header: "value", id: 'value', width: 180, dataIndex: 'value', sortable: true},
{header: "label", id: 'label', width: 200, dataIndex: 'label', sortable: true}
],
width: 540,
height: 200
});
 
 
//On référencie ce nouveau constructeur comme xtype
Ext.reg('monGridPanel', monGridPanel);

Super !!
Merci beaucoup, cela fonctionne

C'est sur que c'est beaucoup plus propre en implémentant des classes.

Encore merci !!

JulienFio · 25/11/2010, 13h41

Si la réponse te convient penses à mettre la discussion 'Résolu'

jicaygg · 25/11/2010, 13h54

Une dernière petite chose...

Je fais appel à un service et il ne m'affiche pas les valeurs dans mon grid.

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
 
var proxy = new Ext.data.HttpProxy(
		{url:'../ws/ACC/listGroups', method: 'POST'});
 
var reader = new Ext.data.JsonReader({
			root: 'data',
			url: '../ws/ACC/listGroups',
			method: 'POST'
		},[
			{name: 'value', mapping: 'value'},
			{name: 'label'}           
		]
	);
 
Ext.ns('tonNameSpace');
 
var store = new Ext.data.JsonStore({
	  proxy: proxy,
	  reader: reader,
	  url: '../ws/ACC/listGroups',
	  method : 'POST'
      });
 
monGridPanel = function (config) {
  Ext.apply(config,{});
  monGridPanel.superclass.constructor.call(this, config);
  store.load();
};
 
var xg = Ext.grid;
 
var sm = new xg.CheckboxSelectionModel();
 
Ext.extend(monGridPanel, Ext.grid.GridPanel, {
  store: store,  
  columns: [
        sm,
       {header: "value", id: 'value', width: 180, dataIndex: 'value', sortable: true},
       {header: "label", id: 'label', width: 200, dataIndex: 'label', sortable: true}
  ],
sm: sm,    
columnLines: true,
frame: true,
title: 'Selection Groups',
width: 500,
height: 200
});
 
Ext.reg('monGridPanel', monGridPanel);

Mon service fonctionne bien car j'ai un retour :

Code :

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

1
2
 
{"data":[{"value":"gu-apps_mesuresbv_rw","label":"gu-apps_mesuresbv_rw"},{"value":"gu-asuprod_prospectus_rw","label":"gu-asuprod_prospectus_rw"},{"value":"gu-backup","label":"gu-backup"},{"value":"gu-callreports","label":"gu-callreports"},{"value":"gu-ctx-shadowing","label":"gu-ctx-shadowing"},{"value":"gu-efapolicies","label":"gu-efapolicies"},{"value":"gu-externes-wcp_rw","label":"gu-externes-wcp_rw"},{"value":"gu-helpdeskit","label":"gu-helpdeskit"},{"value":"gu-internetmailsread","label":"gu-internetmailsread"},{"value":"gu-itoperators","label":"gu-itoperators"},{"value":"gu-itprod","label":"gu-itprod"},{"value":"gu-ittous","label":"gu-ittous"},{"value":"gu-tng","label":"gu-tng"},{"value":"gu-webtechnologies_rw","label":"gu-webtechnologies_rw"}],"success":true}

Mais rien ne s'affiche dans mon GridPanel :

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
 
GGG = null;
var saveWindow = function(saveItem) {
    var sWindow = function () { return new Ext.Window( {
    	title : 'Save As',    	
    	id : 'mySave',		
		width : 563,
		height : 430,
		closeAction : 'close',		
		plain : false,
		items : new Ext.FormPanel( {
			standardSubmit: true,
			id: 'savePref',	
			submit: function() { 
				       this.getForm().submit({ 
				         url: '../ws/ACC/saveUserPreference', 
				         scope: this,		         
				         waitMsg: 'Message d\'attente' 
			            }); 
			},
			border : true,
			width : 550,
			bodyStyle: 'padding: 5px',
		  items: [{
				xtype     : 'textfield',
                name      : '', 
                id        : 'name',
                fieldLabel: 'Name', 
                width     : 100,                
                allowBlank: false,
                anchor    : '-150'
	        },
	        {
	    		xtype: 'checkboxgroup',	    		
	    		fieldLabel: '',	    		
	    		border: true,	    		
	    		checked: false,
	            columns: 1,    
	    	          items: [	             
	    	              {boxLabel: 'Is defaults', id: 'testCheck2', labelSeparator: '', inputValue: 'isDefault'}	                                  
	                    ]
	        }, 
 
	        {
	            xtype:'fieldset',
	            checkboxToggle: true,
	            title: 'Share groups',
	            id: 'shareGroups',
	            autoHeight: true, 
	            autoWidth: true,
	            defaultType: 'checkbox',
	            collapsed: true,
	            checked: false,
	              items: [{
	            	xtype: 'monGridPanel'
	            	} ]	                     	        
	        }]
		}),
		buttons: [{			
			text: 'Save',
			id: 'btSave',
			cls: 'x-btn-text-icon'  			
		},{
			text: 'Close',
			handler: function() {
			   Ext.getCmp('mySave').close();		
			}
		}]
	}); };
	var s = sWindow();
	GGG = sWindow;
    s.show(this);	
    Ext.get('btSave').on('click', function(){
    	Ext.MessageBox.alert( 'Success : <br> Nom de la preference :'+ Ext.getCmp('name').getValue() + '<br>Vue par default :'+ Ext.getCmp('testCheck2').getValue() + '<br>Share Groups :'+ Ext.getCmp('shareGroups').isVisible() );
    });	
};

JulienFio · 25/11/2010, 14h14

Tu n'as normalement pas besoin de spécifier un reader (voir même de proxy), ton paramètre 'url' gère ça tout seul.

Essayes de déclarer ton store comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
var store = new Ext.data.JsonStore({
            url:'../ws/ACC/listGroups'
            root: 'data',
            totalProperty: 'size de ton JSONdata', //tu devrais le définir dans ton JSON construit pas ton service
            fields:[
                {name: 'value', mapping: 'value'},
			{name: 'label'}   
            ]
        });

jicaygg · 25/11/2010, 14h42

Effectivement, j'ai fais nimp...
De plus j'avais oublié de lui dire de charger les "data".

Code :

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

1
2
3
4
5
6
7
 
var store = new Ext.data.JsonStore( {	
	url : '../ws/ACC/listGroups',
	root : 'data',
	idProperty : 'value',
	fields : [ 'value', 'label' ]
});

De cette facon cela fonctionne mieux...

Merci beaucoup pour tes explications, ta patience et le temps que tu m'as accordé !

Je vais m'amuser maintenant avec le stateManager pour la sauvegarde des préférences des vues : tri, ordre, filtre...etc des colonnes

25/11/2010, 13h41	#5
JulienFio Membre éclairé Julien Fiorentino Inscription : novembre 2007 Messages : 201 Détails du profil Informations personnelles : Nom : Julien Fiorentino Âge : 28 Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur) Informations forums : Inscription : novembre 2007 Messages : 201 Points : 336 Points : 336	Si la réponse te convient penses à mettre la discussion 'Résolu'
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email