Discussion :

[Trinou]

Bonjour tout le monde !

Voilà, je ne suis pas vraiment callée en JS mais je dois afficher des infos dans une data grid. Ces données sont importées depuis un fichier xml.
J'utilise les classes de Sencha ExtJS, et ils ont fait un truc qui à l'air super : le grouping view.
J'ai essayé de refaire tout comme eux et ça ne marche pas, c'est vraiment mystérieux pour moi puisqu'il me semble que ce que j'ai fait est bon...
Je précise que la grid s'affiche bien et que les données sont OK, c'est juste le grouping qui ne marche pas.
Dans ma page j'ai un import de groupingStore et de groupingView.

Si quelqu'un a des idées, ce serait vraiment gentil parce que moi je n'en ai plus

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
77
78
79
80
81
82
83
84
85
86
87
88
89
/*!
 * Ext JS Library 3.2.1
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){
 
    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.    
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    // create the data store
    var store = new Ext.data.GroupingStore({
        // load using HTTP
        proxy: new Ext.data.HttpProxy({
            url: 'http://localhost/Action_Plan_Site/Action_Plan_Site/taskExport.xml'
                }),
 
        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "task" tag
               record: 'task',
               id: 'Task_Id',
               totalRecords: '@total'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               {name: 'Task_Id', type: 'int'},
               {name: 'Action_Id', type: 'int'},
               {name: 'Cntry_Name'},
               {name: 'Task_Owner_email'},
               {name: 'Task_Desc'},
               {name: 'SEM_Id'},
               {name: 'Task_Comment1'},
               {name: 'Task_Status_Cd'},
               {name: 'Task_Update_dt'},
               {name: 'Task_Target_dt'}
           ]),
         sortInfo:{field: 'Task_Id', direction: "ASC"},
         groupField: 'Action_Id'
    });
 
    // manually load local data
    store.load();
 
    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'Task_Id',header: 'Task Id', width: 160, sortable: true, dataIndex: 'Task_Id'},
            {header: 'Action Id', width: 75, sortable: true, dataIndex: 'Action_Id'},
            {header: 'Country Name', width: 75, sortable: true, dataIndex: 'Cntry_Name'},
            {header: 'Owner Email', width: 75, sortable: true, dataIndex: 'Task_Owner_email'},
            {header: 'Description', width: 75, sortable: false, dataIndex: 'Task_Desc'},
            {header: 'SEM Id', width: 75, sortable: true, dataIndex: 'SEM_Id'},
            {header: 'Comment', width: 75, sortable: false, dataIndex: 'Task_Comment1'},
            {header: 'Status', width: 75, sortable: true, dataIndex: 'Task_Status_Cd'},
            {header: 'Last Update', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'Task_Update_dt'},
            {header: 'Target Date', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'Task_Target_dt'}
        ],
        view: new Ext.grid.GroupingView({
            forceFit:true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
        }),
        stripeRows: true,
        autoExpandColumn: 'Description',
        height: 200,
        width: 1000,
        collapsible: true,
        animCollapse: false,
        iconCls: 'icon-grid',
        fbar  : ['->', {
            text:'Clear Grouping',
            iconCls: 'icon-clear-group',
            handler : function(){
                store.clearGrouping();
            }
        }],
        title: 'Tasks array',
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid'        
    });
    // render the grid to the specified div in the page
    grid.render('grid-example');
 
});

[sekaijin]

A priori je ne vois pas d'erreur

mais tu groupe sur un ID et typiquement un id c'est unique donc grouper des objets unique revient à ne rien grouper.

normalement dans ton grid sur les entêtes de colonnes tu dois avoir un menu local qui te propose d'afficher ou pas diverses colonnes

dans ce menu si tu clique sur une colonne tu as aussi "grouper sur ce champs"

clique dessus et cela change le regroupement

je pense que ton pb c'est que tu cherche à grouper des élément qui sont par définition seul dans leur groupe (id)

A+JYT