如何在带有边框的 ext js 中创建 Layout 2X2 布局？
Posted
技术标签:
【中文标题】如何在带有边框的 ext js 中创建 Layout 2X2 布局？【英文标题】：How do I create Layout 2X2 layout in ext js with border? 【发布时间】：2017-12-14 14:19:55 【问题描述】：我需要创建 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>
【问题讨论】：
【参考方案1】：您遇到此问题是因为您的 DOM 未创建。更多详情可以参考这个链接sencha forum了解Uncaught TypeError: Cannot read property 'dom' of null这个error。
在您的情况下，这条线 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());
);
【讨论】：
以上是关于如何在带有边框的 ext js 中创建 Layout 2X2 布局？的主要内容，如果未能解决你的问题，请参考以下文章