Question

我需要创建2X2布局，因为我使用布局作为边框，我尝试了下面的代码，我在浏览器控制台上得到以下异常： 未捕获的TypeError：无法设置属性＆＃39;组件＆＃39; null 及以下是我试过的代码。任何人都可以帮助我如何在ext js中创建2X2布局？（我使用的是Ext JS Library 3.3.1版本）

<!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>

Answer 1

由于您的DOM未创建，因此您遇到此问题。有关详细信息，请参阅此链接sencha forum以了解Uncaught TypeError: Cannot read property 'dom' of null此error。

在您的情况下，此行renderTo: 'content'正在创建error。

在 FIDDLE 中，我使用了您的代码并根据您的要求进行了一些更改。希望这能帮助您或指导您解决问题。

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());
});

如何在带边框的ext js中创建Layout 2X2布局？

1 个答案: