I have an html page and render a panel with layout: 'border' on it.
I render it to a div with renderBody config.
when I run the page I gives this error: layout run fails.
this is my ExtJs code
Ext.create('Ext.panel.Panel', {
//width: 500, // I want to fit this panel to parent element
//that i render this panel to it
//height: 300, //
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region',
region: 'south',
xtype: 'panel',
height: 100
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
width: 200,
id: 'west-region-container',
layout: 'fit'
},{
title: 'Center Region',
region: 'center',
xtype: 'panel',
layout: 'fit'
}],
renderTo: 'div-Id'
});
What should I do ?
Give you main panel a height...this will resolve the issue. See here for an example: https://fiddle.sencha.com/#fiddle/ma
Related
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>
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());
});
I am using ExtJS viewport border layout. in order to create a north, center and south region. The first issue faced is that the viewport could not display a scrollbar for its contents, so i used a panel inside the viewport and added panels inside them with the location i wanted:
Ext.create('Ext.container.Viewport', {
id: 'viewportContainer',
layout: {
type: 'border',
align: 'center'
},
forceFit: 'true',
items : [{
layout:'anchor',
scroll:true,
autoScroll:true,
region : 'center',
xtype : 'panel',
items : [ {
region: 'north',
xtype: 'panel',
bodyStyle: {
'background': 'none'
},
items: [upperPanel, messagePanel()]
},{
layout:'anchor',
form: searchForm.id,
id: 'innerBody',
region : 'center',
xtype : 'panel',
items : [searchForm, gridPanel ]
} ,{
region: 'south',
xtype: 'panel',
items: [bottomPanel]
} ]
} ]
}
What i want to do is
stick the bottomPanel to the bottom of the page, if the other
contents are shorter than the viewable area (clientHeight) and
if they are taller, let the footer be located right below the innerBody section.
The current implementation places the footer right below the innerBody panel but doesn't stick to the bottom when all the contents of the page are shorter than the viewable area(clientHeight)
Any help would be highly appreciated!
Thank you
I'm doing the following code please check it.
Mycode:
Ext.create('Ext.container.Viewport', {
id: 'viewportContainer',
layout: {
type: 'border',
align: 'center'
},
forceFit: 'true',
items : [{
layout:'anchor',
scroll:true,
autoScroll:true,
region : 'center',
xtype : 'panel',
items : [ {
region: 'north',
xtype: 'panel',
bodyStyle: {
'background': 'none'
},
items: [upperPanel, messagePanel()]
},{
layout:'anchor',
form: searchForm.id,
id: 'innerBody',
region : 'center',
xtype : 'panel',
minHeight:'540',
items : [searchForm, gridPanel ]
} ,{
region: 'south',
xtype: 'panel',
items: [bottomPanel]
} ]
} ]
}
I'm only applying the 'minHeight' property to the'innerBody' panel. It works. Please try it.
I have a problem with a collapsible panel that is an item of a panel with border layout in ExtJS 4.2.2.
Basiclly it is the following structure:
Ext.onReady(function() {
var panel = Ext.create('Ext.panel.Panel', {
height: 400,
width: 600,
title: 'TestPanel',
renderTo: Ext.getBody(),
items: [
{ xtype: 'toolbar', items: [{xtype: 'button', text: 'test1'}, {xtype: 'button', text: 'test2'}, {xtype: 'button', text: 'test3'}]},
{
xtype: 'panel',
items: [
{ xtype: 'toolbar', items: [{xtype: 'button', text: 'another1'}, {xtype: 'button', text: 'another2'}, {xtype: 'button', text: 'another3'}]},
{
xtype: 'panel',
layout: 'border',
height: 600,
width: 200,
items: [
{xtype: 'panel', title: 'options', html: 'lalalalalalalalalala', region: 'west', width: 100, height: 100, collapsible: true, collapsed: true},
{xtype: 'panel', html: 'lalalalalalalalalala', region: 'center', width: 100, height: 100}
]
}
]
}
]
});
});
Here is the corresponding fiddle:
http://jsfiddle.net/jLugR/
When you uncollapse the option panel everything works fine. When you collapse it again, it breaks the layout. Do you have any idea what the problem is and how I can handle it?
Looks like child panel's(border layout) height is more than the parent panel's height.. Make sure that the height of all child elements together not exceeds parents height.
Check the fiddle by changing the height of the panel with border layout to 250, it works..
I've two nested container and I wanto to fit vertically (only vertically) the first container to the page size, and the second container to the first container size.
In case of resize of the page all containers should resize themselves automatically.
I'm not able to do this feature. I think that is a layout problem.
This is my sample code and my jsfiddle:
Ext.onReady(function() {
myPanel = Ext.create('Ext.container.Container', {
layout:'fit',
flex:1,
width:100,
renderTo: Ext.getBody(),
items: [{
xtype:'container',
layout : {
type : 'vbox',
align : 'stretch'
},
items:[
{
//this is the right panel not collapsible
xtype : 'panel',
border:true,
//hidden:false,
bodyBorder:true,
padding: '5 5 5 5',
itemId:'right',
//default layout of inner element is hbox
layout : {
type : 'hbox',
//align : 'stretch'
},
//takes all possible space
flex : 1
}]}
]
});
});
http://jsfiddle.net/eternasparta/yxeSG/
thank you all!
View port is the key element that monitors browser size.
http://jsfiddle.net/dbrin/6r7Dd/
var myPanel = Ext.create('Ext.panel.Panel', {
layout: 'fit',
width: 200,
title: 'Panel 1',
items: [{
xtype: 'panel',
title: 'Panel 2',
layout: 'fit',
items: [{
xtype: 'panel',
title: 'Right P',
padding: '5'
}]
}]
});
Ext.create('Ext.container.Viewport', {
layout: {
type: 'hbox',
align: 'stretch'
},
items: [myPanel]
});
Panel with accordion layout is contained in vbox with another one item.
I have a 2 troubles:
When i'm trying to set flex to panel with accordion layout it causes the error "[E] Layout run failed"
When height is fixed by constand it not working as expected: first panel does not collapse.
Here is example of code:
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 500,
layout: 'vbox',
items: [{
xtype: 'datefield'
}, {
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
},
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: true,
animate: true
},
items: [{
title: 'Panel 1',
html: 'Panel content 1!'
}, {
title: 'Panel 2',
html: 'Panel content 2!'
}, {
title: 'Panel 3',
html: 'Panel content 3!'
}],
}],
renderTo: Ext.getBody()
});
http://jsfiddle.net/6DHM4/1/
I couldn't reproduce your error, but things look good for me with flex: 1 if I change the layout: 'vbox' to
layout: {
type: 'vbox',
align: 'stretch'
}
(see this fiddle)
may be the right way is to use layout 'anchor' against 'vbox'?
try that way?
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 500,
layout: 'anchor',
items: [
{xtype: 'datefield'},
{
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
,anchor: '100%'
},
...
I don't know why, but when i test it on jsfiddle.net it shows bug: 'first panel does not collapse'. But if i test it here http://try.sencha.com/ for example, it works fine.