[Dynamic Grid] avec Extjs 4.2.2 (débutant! pour un temps)

**geforce** · 23/07/2015, 18h12

Bonjour à tous,
J'ai un exemple de Dynamic Grid (dans le but dans construire un Grid avec ExtJs extensible sur les lignes et les colonnes)

Tout autre exemple seront les bienvenu pour voir une mieux compréhension? (a date je ne compared pas tout les subtilité)

Voilà mon code : (il affiche une page blanche sans message d'erreur!)

index.html

Code html :

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" >
            "use strict";
            
        </script>
 
 
        <link rel="stylesheet" type="text/css" href="ext-4/resources/css/ext-all.css">
        <script type="text/javascript" src="ext-4/ext-all-debug.js"></script>
        <script type="text/javascript" src="appli.js"></script>  
    </head>
    <body> </body>
</html>

appli.js

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
Ext.Loader.setConfig({
    enabled: true,
    disableCaching: false
});
 
Ext.application({
    requires: ['Ext.container.Viewport'],
    name: 'Appli',
    appFolder: 'application',   
 
    enableQuickTips:true,
    controllers: [
        'MainBorder',
        'tree',
        'Stocks',
        'Onglet1'
//        'requeteControler'
    ],
    autoCreateViewport: true,    
 
    launch : function(){
        Ext.create('Ext.container.Viewport', 
        {
            layout : 'anchor',
            items : [{
                xtype: 'Viewport'
            }]
        });
    }
});

Viewport.js

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
Ext.define('Appli.view.Viewport', {
    extend: 'Ext.container.Viewport',
 
    initComponent: function() {
        var me = this;
        Ext.apply(me, {
            layout: 'fit',
            items: [{
                xtype: 'Mainborder',
                title: 'Builder v0.1'
            }]
        });
 
        me.callParent(arguments);
    }
 
});

DynamicGrid.js

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
Ext.define('Appli.view.DynamicGrid', {  
    extend: 'Ext.Viewport',    
    layout: 'fit',
    requires: [
        'Ext.ux.grid.DynamicGrid'
    ],
 
    initComponent : function(){
        console.log('Viewport initComponent!');
        var me = this;
 
        Ext.apply(me, 
        {
            items: [
                {
                    xtype: 'dynamicGrid',
                    url: './data.js',
                    dockedItems: [
                        {
                            xtype: 'toolbar',
                            dock: 'top',
                            items: [
                                {
                                    xtype: 'button',
                                    text: 'Load Data',
                                    action: 'btnLoadData'
                                },
                                {
                                    xtype: 'button',
                                    text: 'Load Data2',
                                    action: 'btnLoadData2'
                                }
                            ]
                        }
                    ]
                }
            ]    
        });
 
        me.callParent(arguments);
    }
});

MainBorder.js

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
 
Ext.define('Appli.view.MainBorder', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.mainborder',
    layout: 'border',
    initComponent: function () {
        var me = this;
        Ext.applyIf(me, {
            items: [{
                    xtype: 'treeView',
                    region: 'west',
                    title: 'Filtre <input type="text" name="filtered-tree" />',
                    width: 200,
                    split: true,
                    collapsible: true,
                    floatable: false
                }, {
                    xtype: 'tabpanel',
                    id: 'globaltab',
                    region: 'center',
                    items: [{
                        id: 'onglet1',    
//                        rtl: false,
                        title: 'Composé votre requête',
                        xtype: 'Onglet1'
                    }, {
                        id: 'onglet3',
                        title: 'Resultat tabulaire',
                        html: 'Hello world 3'
                    }, {
                        id: 'onglet4',
                        title: 'Code de requête',
                        html: 'Hello world 4',
                        closable: true
                    }]                    
                },{
                    xtype: 'toolbar',
                    region: 'north',
                    items: [{
                        text: 'Connexion'
                    },{
                        text: 'exécuter',
                    },{                        
                        text: 'A propo',
                        plain: true        
                    }]
 
                  }
            ]
 
 
        });
 
        me.callParent(arguments);
    }
 
 
});

Onglet1.js

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
 
Ext.define('Appli.view.Onglet1', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.Onglet1',
    layout: {
        type: 'vbox',
        align : 'stretch',
        pack  : 'start',
    },
    initComponent: function () {
        var me = this;
        Ext.applyIf(me, {
        items: [
            {
                html:"<iframe  src='http://rootServeur/index.html' height='100%' width='100%' ></iframe>",
                title: 'Requete graphique',
                flex:1
            },
            {
                xtype: 'DynamicGrid',
                title: 'Tableau des filtres',
                flex:2
            }
        ]
 
        });
 
        me.callParent(arguments);
    }
 
 
});

Grand merci d'avance.