CODEWITHSUNDEEP
javascriptjqueryhtmlextjsextjs3
ASR
ASR

Reputation: 3549

How do I create Layout 2X2 layout in ext js with border?

I have a requirement to create 2X2 layout, for that I am using the layout as the border and I have tried the below code,I am getting the below exception on the browser console: Uncaught TypeError: Cannot set property 'component' of null and below is my code that I have tried. Can anyone help me on how do I create 2X2 layout in ext js ? ( I am using Ext JS Library 3.3.1 version)

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">

          Ext.onReady(function() {
    var panelHeightLandingPage = (screen.height / 2) - 150; 
    var viewPort = new Ext.Viewport({
    layout: 'border',
    autoScroll: true,
    items: [{
        // The header bar.
        region: 'north',
        layout: 'fit',
        margins: '0 0 0 0',
        border: false,
        contentEl: 'header',
        autoHeight: true
    },{
        region: 'center',                   
        layout: 'fit',
        border: false,
        margins: '5 5 5 5',
        items: [tabPanelLayout],
        contentEl: 'content'
    }],
    renderTo: Ext.getBody()
    });

        var tabPanelLayout = new Ext.TabPanel({
    id:'tabPanel',
    renderTo: 'content',
    activeTab: 0,
    deferredRender:true,
    defaults:{ height: 500 },
    listeners: {
        tabchange: function (tabPanel,newTab) {
            if( newTab.getId() == 'landingTab' ) {
                currentTab = 1;
                //this is the initial load

            } 
        }
    },
    items:[{
        id: 'landingTab',
        title:"Booking Summary & Inventory View",
        layout: 'fit',
        items: landingPanel
    }]
}); 

    var landingPanel = new Ext.Panel({
    layout:'border',    
    items: [{
        region:'east',
        width: 500,
        layout: 'fit',
        border: false,
        items: chartPanels
    },{
        region:'center',
        layout: 'fit',
        border: false,   
        items: gridPanels
    }]
});

var gridPanels = new Ext.Panel({
    layout:'border',
    items: [{
        region: 'north',
        height: panelHeightLandingPage,
        layout: 'fit',
        border: false,
        items : {
              title: 'Chassis Pool Maintenance',
             // region:'west',
              html: 'This is Panel 1',
              width: screen.availWidth-600
           }            
    },{
        region: 'center',
        layout: 'fit',
        border: false,
        items : {
              title: 'Chassis Pool Maintenance',
             // region:'west',
              html: 'This is Panel 1',
              width: screen.availWidth-600
           }            
    }]      
});

//This contains the charts layout
var chartPanels = new Ext.Panel({
    layout:'border',
    items: [{
        region:'north',
        title: 'Booking Summary Chart',
        height: panelHeightLandingPage,
        layout: 'fit',
        border: true,
        id: 'pie',
        contentEl:'pieChart',
        autoScroll: true            
    },{
        region: 'center',
        title:  'Inventory View Chart',
        layout: 'fit',
        border: true,
        id: 'bar',
        contentEl: 'barGraph',
        autoScroll: true
    }]
}); 

});

      </script>
   </head>

   <body>
   </body>
</html>

Upvotes: 1

Views: 110

Answers (1)

Narendra Jadhav
Narendra Jadhav

Reputation: 10262

You are getting this issue because of your DOM is not created. For more details you can refer this links sencha forum to understand Uncaught TypeError: Cannot read property 'dom' of null this error.

In your case this line renderTo: 'content' is creating error.

In this FIDDLE, I have used your code and made some change as per your requirement. Hope this will help you or guide you to solve your problem.

CODE SNIPPET

Ext.onReady(function() {
    var panelHeightLandingPage = (screen.height / 2) - 150,
        gridPanels = new Ext.Panel({
            layout: 'border',
            items: [{
                region: 'north',
                height: panelHeightLandingPage,
                layout: 'fit',
                border: false,
                items: {
                    title: 'Chassis Pool Maintenance',
                    // region:'west',
                    html: 'This is Panel 1',
                    width: screen.availWidth - 600
                }
            }, {
                region: 'center',
                layout: 'fit',
                border: false,
                items: {
                    title: 'Chassis Pool Maintenance',
                    // region:'west',
                    html: 'This is Panel 1',
                    width: screen.availWidth - 600
                }
            }]
        }),
        chartPanels = new Ext.Panel({ //This contains the charts layout
            layout: 'border',
            items: [{
                region: 'north',
                title: 'Booking Summary Chart',
                height: panelHeightLandingPage,
                layout: 'fit',
                border: true,
                id: 'pie',
                //   contentEl: 'pieChart',
                autoScroll: true
            }, {
                region: 'center',
                title: 'Inventory View Chart',
                layout: 'fit',
                border: true,
                id: 'bar',
                // contentEl: 'barGraph',
                autoScroll: true
            }]
        }),
        landingPanel = new Ext.Panel({
            layout: 'border',
            items: [{
                region: 'east',
                width: 500,
                layout: 'fit',
                border: false,
                items: chartPanels
            }, {
                region: 'center',
                layout: 'fit',
                border: false,
                items: gridPanels
            }]
        }),
        tabPanelLayout = new Ext.TabPanel({
            id: 'tabPanel',
            activeTab: 0,
            deferredRender: true,
            defaults: {
                height: 500
            },
            listeners: {
                tabchange: function(tabPanel, newTab) {
                    if (newTab.getId() == 'landingTab') {
                        currentTab = 1;
                        //this is the initial load
                    }
                }
            },
            items: [{
                id: 'landingTab',
                title: "Booking Summary & Inventory View",
                layout: 'fit',
                items: landingPanel
            }, {
                title: 'Second Tab' //Only for test.
            }]
        }),
        viewPort = new Ext.Viewport({
            //renderTo:document.body, you can put renderTo here aslo 
            layout: 'border',
            autoScroll: true,
            items: [{
                // The header bar.
                region: 'north',
                layout: 'fit',
                margins: '0 0 0 0',
                border: false,
                // contentEl: 'header',
                autoHeight: true
            }, {
                region: 'center',
                layout: 'fit',
                border: false,
                margins: '5 5 5 5',
                items: [tabPanelLayout],
                //contentEl: 'content'
            }]
        });

    //you can put renderTo here aslo like this.
    viewPort.render(Ext.getBody());
});

Upvotes: 1

Related Questions