layout de column [Résolu]

[jicaygg]

Bonjour,

Je rencontre des difficultés à créer une Window avec un panel en 2 colonnes.
Je commence un peu à m'y perdre...

J'aimerais créer une window avec 2 colonnes :
- Dans la 1ère colonne : un grid Panel,
- Dans la 2ème colonne : un form avec plusieurs champs (name, 1 checkbox) + un grid panel

Voici mon code :

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
 
HHH = null;
var manageWindow = function(manageItem) {
    var mWindow = function () { return new Ext.Window( {
    	title : 'Manage',    	
    	id : 'myManage',		
		width : 963,
		height : 430,
		closeAction : 'close',		
		plain : false,
		modal: true,
 
	items : new Ext.Panel( {
		layout : 'column',
		columnWidth: 0.50,            
		items : new Ext.Panel( {    	  
				    items: [{
		        	    xtype:'fieldset',
		        	    checkboxToggle: true,
		        	    title: 'Share groups',
		        	    id: 'shareGroups',
		        	    autoHeight: true, 
		        	    autoWidth: true,
		        	    defaultType: 'checkbox',
		        	    collapsed: true,
		        	    layout: 'column',
		        	    checked: false,
		        	      items: {
		        		    xtype: 'monGridPanel'
		        	      } 	 
				    }] }),
 
	    items : new Ext.FormPanel( {        
	     columnWidth: 0.50,
	     layout : 'column',
 
		            items: [{
		        	    xtype     : 'textfield',
		        	    name      : 'Name', 
		        	    id        : 'name',
		        	    fieldLabel: 'Name', 
		        	    width     : 100,                
		        	    allowBlank: false,
		        	    anchor    : '-150'
		            },
		            {
		        	    xtype: 'checkboxgroup',	    		
		        	    fieldLabel: '',
		        	    // height: 30,
		        	    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: 'Upload',
				id: 'btUp'
					//disabled : true			
			},{ 
				text : 'Delete',
				id: 'btDel'
					//disabled : true			
			},{
				text: 'Close',
				handler: function() {
				Ext.getCmp('myManage').close();			   
			}
			}]
	  	});
    	};
	var m = mWindow();
	HHH = mWindow;
    m.show(this);	
    Ext.get('btUp').on('click', function(){
    	var selected = [];
    	sm.each( function ( record ) {
    		  selected.push( record.get('value') || '?' ); } );
    	// alert( selected.join('\n-----\n') );    	
    	Ext.MessageBox.minWidth = 600;
    	Ext.MessageBox.minHeight = 400;
    	Ext.MessageBox.alert( 'Update ! <br><br> Nom de la preference :<br>'+ Ext.getCmp('name').getValue() + '<br><br>Vue par default :<br>'+ Ext.getCmp('testCheck2').getValue() + '<br><br>Share Groups :<br>'+ Ext.getCmp('shareGroups').isVisible() + '<br><br>Group(s) selected :<br>'+ selected.join('\n <br> \n')  );
    });	
};

En fait j'ai bien ma 2ème colonne avec mon Form et le grid Panel, mais je ne vois pas apparaître ma 1ère colonne avec le Grid panel.

J'ai mis en pièce jointe un jpg.

[ninatity]

Bonjour,
quelles sont les erreurs renvoyées (firebug)?
Ou tu peux essayer de mettre des regions dans ton code. Un region:'west' pour ta première colonne et un region:'center' pour ta 2ème colonne.
Bonne continuation!

[JulienFio]

Bonjour,

Essayes de rajouter

Code :

layout: 'column'

dans les propriétés de ton composent window (et non pas seulement sur ces items).


Sinon tu peux aussi utiliser un layout border, comme l'indique Ninatity

[jicaygg]

Merci pour votre aide !!

Je voulais éviter d'implémenter des régions, que je trouve personnellement moins facile à gérer.

Mais c'est tout bon j'ai réussi !
En fait, cela venait du fait que j'ai mal implémenté tous mes items :

var manageWindow = function(manageItem) {
var mWindow = function () { return new Ext.Window( {
title : 'Manage',
id : 'myManage',
width : 963,
height : 530,
closeAction : 'close',
plain : false,
modal: true,
layout : 'fit',
items : new Ext.Panel( {
frame: true,
labelAlign: 'left',
// title: 'Company data',
width: 950,
layout: 'column',
items: [{
columnWidth: 0.40,
layout: 'fit',
items: [{
xtype: 'prefGridPanel'
}]
},{

columnWidth: 0.60,
layout: 'fit',
items: [{

Encore merci à vous !