Intégrer des charts extJS 4.0 dans un site web

[aegedus]

Bonjour à tous,


Je suis en train de développer une appli web .Net 4.0 MVC 3.0 en C# et je souhaite intégrer des composants Chart de Sencha ExtJS.
Même s'il s'agit d'un framework applicatif et que normalement ce n'est pas trop fait pour, j'ai déjà réussi à afficher des fenêtres, des messages box et même des charts dans une Ext.window.

Pensez-vous qu'il est possible d'aller jusqu'au bout d'une telle intégration ? Si oui, quelle est la logique pour créer des panels (intégrant les charts) et les intégrer dans une page web existante ?

Merci d'avance.
Aegedus

Voici un exemple de partialView que je souhaiterais faire fonctionner mais qui pour l'instant n'affiche rien et ne génère même pas d'erreur (console ou autre):

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
 
<!-- ExtJS -->
<script src="@Url.Content("~/Scripts/ext-4.0.7/ext.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ext-4.0.7/ext-all.js")" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/ext-4.0.7/resources/css/ext-all.css")" />
 
 
 
<script type="text/javascript">
Ext.onReady(function () {
 
        var dd = new Array();
        dd.push({ name: 'Jul 07', visits: 245000, views: 3000000 });
        dd.push({ name: 'Aug 07', visits: 240000, views: 3500000 });
        dd.push({ name: 'Sep 07', visits: 355000, views: 4000000 });
        var store = new Ext.data.JsonStore({
            fields: ['name', 'visits', 'views'],
            data: dd
        });
 
        var lineChart = new Ext.chart.LineChart({
            store: store,
            xField: 'name',
            yField: 'visits'
        });
 
        var panel3 = new Ext.panel.Panel({
            renderTo: 'ggg',
            width: 700,
            height: 200,
            items: [lineChart]
        });
 
    });
 
 
</script>
 
<div id="ggg">
</div>

[kenny.kev]

alors je ne peux que de te conseiller de d'inspirer des exemple que met a disposition sencha. Presque tous font ce que tu demande.

[Tilwan]

Ton problème vient du fait que le code javascript doit être placé dans le head de ta page html.

Une simple fonction alert dans la fonction onReady de Ext ne fonctionnera pas car la fonction onReady est déclaré après le chargement de la page alors qu'elle est sensée intercepter cet évènement.