我需要创建 2X2 布局，因为我使用布局作为边框并且我尝试了下面的代码，我在浏览器控制台上收到以下异常: Uncaught TypeError: Cannot set property 'component' of 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>
最佳答案
您遇到此问题是因为您的 DOM未创建。有关更多详细信息，您可以引用此链接 sencha forum理解 Uncaught TypeError: Cannot read property 'dom' of null 这个错误。
在您的情况下，这一行 renderTo: 'content' 正在创建 error。
在这个 FIDDLE ，我已经使用了您的代码并根据您的要求进行了一些更改。希望这会对您有所帮助或指导您解决问题。
代码片段
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());
});
关于javascript - 如何在带边框的 ext js 中创建 Layout 2X2 布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47815558/