close windows

Version imprimable

close windows

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:

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:

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

25/11/2010, 11h10
jicaygg

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

Bonjour,

Essayes comme ça:

Code:

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:

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:

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

Citation:

Envoyé par JulienFio

Bonjour,

Essayes comme ça:

Code:

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:

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:

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

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

Encore merci !!

25/11/2010, 13h41
JulienFio

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

Une dernière petite chose...

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

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

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:

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

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:

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'}   
            ]
        });

25/11/2010, 14h42
jicaygg
Effectivement, j'ai fais nimp...
De plus j'avais oublié de lui dire de charger les "data".
Code:

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é ! :ccool:

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