1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    14
    Vote Rating
    0
    nitinkalra2000 is on a distinguished road

      0  

    Default Need help in Grid Panel with checkboxes and stackedBar chart

    Need help in Grid Panel with checkboxes and stackedBar chart


    Hi All,

    I am working on ExtJS4.1 and trying to render a GridPanel with Checkboxes and StackedBar/Thermometer chart.

    Here is the code :

    gridPanelChart.html
    Code:
    <!DOCTYPE HTML>
    <html> 
    <head>
    <title>Grid Panel</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />    
        <link rel="stylesheet" type="text/css" href="extjs/examples/ux/css/CheckHeader.css" />    
        <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
        <script type="text/javascript" src="gridPanelChart.js"></script>
        <script type="text/javascript" src="extjs/examples/ux/CheckColumn.js"></script>
        <script type="text/javascript" src="ThermometerClass.js"></script>
    </head>
    <body></body>
    </html>
    gridPanelChart.js
    Code:
    Ext.Loader.setConfig({
        enabled: true
    });
    Ext.require([
        'Ext.String',
    ]);
    
    
    function extjsRenderer(value) {
        var id = 'thermometer';//Ext.id();
        return (Ext.String.format('<div id="{0}"></div>', id));
    }
    Ext.onReady(function() {
        Ext.create('Ext.data.Store', {
            storeId: 'userStore',
            fields: [
            { name: 'name', type: 'string' },
            { name: 'read', type: 'bool' },
            { name: 'write', type: 'bool' },
            { name: 'readwrite', type: 'bool' }
            ],
            data: { 'items': [
                { 'name': 'Lisa', "read": "true", "write": "true", "readwrite": "false" },
                { 'name': 'Bart', "read": "true", "write": "true", "readwrite": "false" },
                { 'name': 'Homer', "read": "true", "write": "true", "readwrite": "false" },
                { 'name': 'Marge', "read": "true", "write": "true", "readwrite": "false" }
            ]},
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                    }
                }
            });
        var myGridPanel = Ext.create('Ext.grid.Panel', {
            title: 'Permissions',
            store: Ext.data.StoreManager.lookup('userStore'),
            columns: [
                { header: 'Name', dataIndex: 'name' },
                { header: 'Read', dataIndex: 'read' },
                { header: 'Write', dataIndex: 'write', xtype: 'checkcolumn'/*renderer: extjsRenderer*/ },
                { header: 'readwrite', dataIndex: 'readwrite',renderer: extjsRenderer }
            ],
            height: 200,
            width: 800,
            renderTo: Ext.getBody()
            });
           
          // Below 3 lines of code works perfectly fine when I have to render just the StackedBarChart
              // but when I am trying to render the same in above Gridpanel then its not happening
              //'thermometer' is the ID to which stackedBar chart will be render, the division element for this id 
              //gets generated dynamically
    
                    var chart = new Thermometer('thermometer');   //This class generates the StackedBarChart
                    chart.generateStore()
                chart.generateChart()
        }
    });
    Here is the snapshot of GridPanel with only check boxes as it fails to render chart which should gets rendered in the 4th column ie. of readwrite
    GridPanel_Checkboxes.png

    and here is the snapshot of Thermometer/StackedBar chart which is getting generated by Thermometer class when used standalone.

    ThermometerChart.png


    From the logs I below are the execution steps that are happening

    1) Thermometer class gets initialized.
    2) generateStore gets called
    3) generateChart gets called // here is error in the browser i.e Uncaught TypeError: Cannot read property 'dom' of null

    4) extjsRenderer method from gridPanel.js gets called.

    I think the sequence of execution is not correct . Dynamic creation of div should happen before step 3

    Could anybody please help me in this ?

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,913
    Vote Rating
    179
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    It looks like extjsRenderer is creating a div with a unique ID and then rendered to multiple cells in the grid, but you can't have the same ID in multiple places on the same page.

  3. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    14
    Vote Rating
    0
    nitinkalra2000 is on a distinguished road

      0  

    Default


    @ slemmon : That's right. But I need to excute the code of stacked/Thermometer chart after extjsRenderer has executed. How could I do that ?

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi