[CLOSED] Possible to use v2 Charts in v1 app?

  1. #1

    [CLOSED] Possible to use v2 Charts in v1 app?

    Is it possible to use v2 Charts in v1 app? Even if I have to create everything in javascript, that's fine (and preferred).
    Last edited by Daniil; May 02, 2012 at 9:44 PM. Reason: [CLOSED]
  2. #2
    Hi,

    You can create separate page with ExtJS 4.1 scripts only (without Ext.Net)
    And load that page via AutoLoad (with iframe mode) to Ext.Net panel
  3. #3
    hmm...so it's not possible to Ext.NET v1 scripts plus the chart scripts loaded onto the same page?
  4. #4
    will this be possible with Ext.NET : http://dev.sencha.com/deploy/ext-4.1...x/sandbox.html
  5. #5
    Well, sandbox is possible but you cannot mix ExtJS 3 and ExtJS 4 widgets still, i mean that it is impossible to add ExtJS 4 widget as item of ExtJS 3 container. You have to use content of ExtJS 3 widget to add ExtJS4 control (in this case, ExtJS4 is out layout logic of ExtJS 3 container)

    Here is Ext.Net 1.x sample
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext4.NET Example</title>
    
    
        <link href="ExtJS4/resources/css/ext-sandbox.css" rel="stylesheet" type="text/css" />
        <script src="ExtJS4/ext-all-sandbox.js" type="text/javascript"></script>
        
        <script type="text/javascript">
            function generateData (n, floor){
                var data = [],
                    p = (Math.random() *  11) + 1,
                    i;
                    
                floor = (!floor && floor !== 0)? 20 : floor;
                
                for (i = 0; i < (n || 12); i++) {
                    data.push({
                        name: Ext4.Date.monthNames[i % 12],
                        data1: Math.floor(Math.max((Math.random() * 100), floor)),
                        data2: Math.floor(Math.max((Math.random() * 100), floor)),
                        data3: Math.floor(Math.max((Math.random() * 100), floor)),
                        data4: Math.floor(Math.max((Math.random() * 100), floor)),
                        data5: Math.floor(Math.max((Math.random() * 100), floor)),
                        data6: Math.floor(Math.max((Math.random() * 100), floor)),
                        data7: Math.floor(Math.max((Math.random() * 100), floor)),
                        data8: Math.floor(Math.max((Math.random() * 100), floor)),
                        data9: Math.floor(Math.max((Math.random() * 100), floor))
                    });
                }
                return data;
            }
            
            function showChart(){
                var textArea;
                
                Ext4.chart.theme.White = Ext4.extend(Ext4.chart.theme.Base, {
                    constructor: function() {
                       Ext4.chart.theme.White.superclass.constructor.call(this, {
                           axis: {
                               stroke: 'rgb(8,69,148)',
                               'stroke-width': 1
                           },
                           axisLabel: {
                               fill: 'rgb(8,69,148)',
                               font: '12px Arial',
                               'font-family': '"Arial',
                               spacing: 2,
                               padding: 5,
                               renderer: function(v) { return v; }
                           },
                           axisTitle: {
                              font: 'bold 18px Arial'
                           }
                       });
                    }
                });
                
                var store1 = Ext4.create('Ext.data.JsonStore', {
                    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
                    data: generateData()
                })
                
                var chart = Ext4.create('Ext4.chart.Chart', {
                        id: 'chartCmp',
                        xtype: 'chart',
                        animate: true,
                        shadow: true,
                        store: store1,
                        axes: [{
                            type: 'Numeric',
                            position: 'bottom',
                            fields: ['data1'],
                            label: {
                                renderer: Ext4.util.Format.numberRenderer('0,0')
                            },
                            title: 'Number of Hits',
                            grid: true,
                            minimum: 0
                        }, {
                            type: 'Category',
                            position: 'left',
                            fields: ['name'],
                            title: 'Month of the Year'
                        }],
                        theme: 'White',
                        background: {
                          gradient: {
                            id: 'backgroundGradient',
                            angle: 45,
                            stops: {
                              0: {
                                color: '#ffffff'
                              },
                              100: {
                                color: '#eaf1f8'
                              }
                            }
                          }
                        },
                        series: [{
                            type: 'bar',
                            axis: 'bottom',
                            highlight: true,
                            tips: {
                              trackMouse: true,
                              width: 140,
                              height: 28,
                              renderer: function(storeItem, item) {
                                this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
                              }
                            },
                            label: {
                              display: 'insideEnd',
                                field: 'data1',
                                renderer: Ext4.util.Format.numberRenderer('0'),
                                orientation: 'horizontal',
                                color: '#333',
                              'text-anchor': 'middle'
                            },
                            xField: 'name',
                            yField: ['data1']
                        }]
                    });
                    
                var win = Ext4.create('Ext4.Window', {
                    width: 800,
                    height: 600,
                    minHeight: 400,
                    minWidth: 550,
                    hidden: false,
                    maximizable: true,
                    title: 'Bar Chart',
                    renderTo: Ext4.getBody(),
                    layout: 'fit',
                    tbar: [{
                        text: 'Save Chart',
                        handler: function() {
                            Ext4.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
                                if(choice == 'yes'){
                                    chart.save({
                                        type: 'image/png'
                                    });
                                }
                            });
                        }
                    }, {
                        text: 'Reload Data',
                        handler: function() {
                            store1.loadData(generateData());
                        }
                    }],
                    items: chart
                });
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:Button runat="server" Text="I am ExtJS 3.4 button" Handler="function(){showChart();}">
            </ext:Button>
        </form>
    </body>
    </html>
  6. #6
    There is a related discussion. With some efforts there is a possibility to use different versions of Ext.NET within one application:
    http://forums.ext.net/showthread.php?26299

Similar Threads

  1. [CLOSED] Using ExtJS 4 charts with Ext.Net
    By PLoch in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 12, 2012, 4:06 PM
  2. [CLOSED] Charts
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 12, 2012, 4:06 PM
  3. Charts with Coolite
    By flaviodamaia in forum 1.x Help
    Replies: 1
    Last Post: Jan 12, 2012, 4:06 PM
  4. [CLOSED] How to add charts in ext.net or coolite
    By Vasudhaika in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 12, 2012, 4:05 PM

Tags for this Thread

Posting Permissions