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
    6,006
    Vote Rating
    212
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      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