close windows

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

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

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

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

close windows

Ext JS / Sencha

Vue hybride

Discussions similaires

Partager

Partager