Grid Store : enregistrer ordre des colonnes

[jicaygg]

Bonjour,

J'ai créé un tableau avec onglet, présentant des grid (type Inbox).
J'ai créé mes différentes colonnes, tout fonctionne correctement.

J'aimerais donner la possibilité aux users de pouvoir modifier l'ordre des colonnes, ainsi que choisir celles qu'ils veulent afficher.

J'ai créé un bouton Préférence, qui ouvre une window ou ils peuvent enregistrer les préférences de leur vue via un service Web.
Mon enregistrement s'effectue bien mais je ne sais pas comment m'y prendre pour pouvoir enregistrer les modifications des colonnes ??

Voila mon store avec mes différentes colonnes :

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
var storeInbox = new Ext.data.GroupingStore({    	        
	        reader: readerInbox,
	        url: urlService,
	        autoDestroy: true,
	        remoteSort: true,
	        remoteGroup: true
	    });
 
	    var columns=[{
            header: "<img src='../images/app/exclamation_b.gif'>",
            dataIndex: 'p_efa_proc_priority',
            renderer: function (value, p, record) {	    	
	    		var renderHtml="";
 
	    		if(value<3) 
	    		  renderHtml = "<img src='../images/app/arrow-up.png' title='Priority high'>";
	    		else if(value>3) 
	    		  renderHtml = "<img src='../images/app/arrow-down.png' title='Priority low'>";
 
    	        return renderHtml;
    	    },
            sortable: true,
            groupName: 'Priority',
            width: 2
        },
        {
            header: "<img src='../images/app/paperclip.png'>",
            width: 4,
            dataIndex: 'c_efa_acc_multiple_elem',
            renderer: function (value, p, record) {
    	        var renderHtml = "";
 
    	        if (value == '1') renderHtml += "<img src='../images/app/paperclip1.gif' title='Contains one or more attachments'>";
 
    	        return renderHtml;
    	    },
            sortable: true,
            groupName: 'Attachment'
        },
        {
            header: "<img src='../images/app/process.gif'>",
            dataIndex: 'p_efa_proc_is_in_process',
            renderer: function (value, p, record) {	    	
	    		var  renderHtml="";	    			
	    		if(value=="1") renderHtml= "<img src='../images/app/folder.gif'>";	    	
    	        return renderHtml;
    	    },
            sortable: true,
            groupName: 'Open process',
            width: 2
        },
        {
            header: 'By user',
            dataIndex: 'p_efa_proc_lock_owner',
            sortable: true,
            groupName: 'By user',
            width: 30
        },
        {
            header: 'Status',
            dataIndex: 'p_efa_proc_status',
            sortable: true,
            groupName: 'Status',
            width: 20
        },      
        {
            header: 'Receipt date',
            dataIndex: 'c_efa_acc_receipt_date',
            renderer: Ext.util.Format.dateRenderer('d/m/Y H:i'),
            sortable: true,
            groupName: 'Receipt date',
            width: 38
        },
        {
            header: 'Grouping',
            dataIndex: 'c_efa_case_grouping',
            sortable: true,
            groupName: 'Grouping',
            width: 25
        },
        {
            header: 'From',
            dataIndex: 'c_efa_acc_from',
            sortable: true,
            groupName: 'From',
            width: 30
        },
        {
            id: 'object_name',
            header: 'Subject',
            dataIndex: 'c_subject',
            sortable: true,
            groupName: 'Subject'
        },         
        {
            header: 'Alerts qualifiers',
            dataIndex: 'c_efa_case_act_warn',
            sortable: false,
            groupable : false,
            width: 50
        },
        {
            header: 'Last comment',
            dataIndex: 'c_efa_case_last_comment',
            sortable: true,
            groupName: 'Last comment',
            width: 50
        },
        {
            header: 'Last error',
            dataIndex: 'c_efa_case_act_error',
            sortable: false,
            groupable : false,
            width: 50
        }];
 
	    return getGridResults(tabId,storeInbox,columns);  
    }

Comment m'y prendre pour enregistrer les modifications de colonnes ??
Si vous pouvez m'aiguiller ou si vous avez des liens pouvant m'intéresser.

Merci d'avance !

[ultimus]

bonjour,

Pour réaliser l'opération, il faut rendre totalement dynamique la création des champs, voici un lien vers le forum sencha qui montre comment créer ou supprimer des champs dans un gridPanel.

http://www.sencha.com/forum/showthre...ds-and-columns


Après, pour l'enregistrement, perso je récupère un json de la config du columnModel que j'enregistre dans un base de donnée.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function gp_gridResultRequete2Json(){
	var chaine='[';
	Ext.each(gp_gridResultRequete.getColumnModel().config,function(col){
		if(chaine=='[')
			chaine=chaine+'{';
		else
			chaine=chaine+',{';
		chaine=chaine+'"header":"'+col.header+'"';
		chaine=chaine+',"width":"'+col.width+'"';
		chaine=chaine+',"table":"'+col.table+'"';
		chaine=chaine+',"champ":"'+col.champ+'"';
		chaine=chaine+',"format":"'+col.format+'"';
		chaine=chaine+'}';
	});
	chaine=chaine+']';
	return(chaine);
}

Au chargement, il suffit de récupérer le json et de reconstruire les champs.

En espérant que cela pourra t'aider