I have two panels inside a container (layout: fit) and both panels need to be collapsible horizontal.
To realize this I need to have three panels (2 panels with region: west and one panel region center) like this:
defaults: {
collapsible: true,
split: true,
margin: 1,
padding: 1,
height: '100%'
},
items: [{
title: 'west 1',
floatable: false,
flex: 100,
region: 'west'
}, {
hidden: true,
collapsed: true,
region: 'center',
flex: 1,
split: false
}, {
title: 'west 2',
floatable: false,
flex: 100,
floatable: false,
region: 'west',
split: false
}]
It works but the extra panel is very uggly!. Does anyone have a better sollution?
regards,
Arno
Use it like below code snippet:
Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Container',
layout: 'hbox',
defaults: {
collapsible: true,
collapseDirection: 'left',
margin: 1,
height: '100%'
},
items: [{
title: 'west 1',
width: 100
}, {
title: 'west 2',
floatable: false,
flex: 1,
split: false
}],
renderTo: Ext.getBody()
});
Working Example
Hope this will help/guide you.
Related
As what the title suggest, is that I have a panel that will execute a command onRender to add items, like the code below, a treepanel. I wrapped treepanel in a layout - border and then on a vbox panel to be put on region west. Unfortunately the whole tree panel does not render. I inspected the HTML, and the elements are there but they are sort of disabled because the elements have that blurry font in the firebug. Why is it doing that? Please help.
Ext.define('anr.panels.report', {
extend : 'Ext.panel.Panel',
pageLimit : 15,
title : 'Report Generator',
layout : 'border',
border : false,
frame : true,
initComponent: function() {
this.callParent(arguments);
},
onRender:function() {
var me = this;
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "algebra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
var reportItem = {
xtype: 'panel',
layout: 'vbox',
id:'westpanel',
region:'west',
width: 350,
height: 300,
minSize: 350,
maxSize: 350,
border: false,
split: true,
margin: '1 0 5 1',
items: [
{
border: false,
layout: 'border',
items:[
{
xtype: 'treepanel',
height: 250,
width: 200,
store: store,
id: 'menu-panel',
frame: false,
rootVisible: false
}
]
}
]
};
this.add(reportItem);
this.callParent(arguments);
}
});
Im not really sure why you are using the onRender method instead of placing the panels in the items but there are too many errors there anyway.
Every border panel needs height, width or flex and it is required to have one panel with the center region.
If you change your code to this, it will work but be careful with all these nested panels, it seems like you are getting lost.
CODE
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "detention", leaf: true
},{
text: "homework", expanded: true,
children: [{
text: "book report", leaf: true
},{
text: "algebra", leaf: true
}]
}, {
text: "buy lottery tickets",
leaf: true
}]
}
});
Ext.define('anr.panels.report', {
extend : 'Ext.panel.Panel',
width: 800,
height: 400,
border: true,
title : 'Report Generator',
layout : 'border',
items: [{
xtype: 'panel',
layout: 'vbox',
region:'west',
width: 350,
height: 300,
minSize: 350,
maxSize: 350,
border: false,
split: true,
margin: '1 0 5 1',
items: [{
xtype: 'panel',
border: false,
layout: 'border',
flex: 1,
width: 350,
items:[{
xtype: 'treepanel',
height: 250,
width: 200,
store: store,
id: 'menu-panel',
region: 'center',
frame: false,
rootVisible: false
}]
}]
},{
xtype : 'panel',
region: 'center'
}]
});
Ext.create('anr.panels.report',{
renderTo: Ext.getBody()
});
I have a vbox layout consisting of 3 parts. I need to center a form panel horizontally and vertically in the second part of the layout.
Please see the demo
Code:
Ext.define('Test.Viewport', {
extend: 'Ext.container.Viewport',
requires: [
'Ext.layout.container.Border',
'Ext.layout.container.HBox'
],
autoScroll: true,
layout: {
type: 'vbox',
align: 'center'
},
items: [
{
width: '100%',
html:'header'
},
{
margin: '0 100 0 100',
width: '100%',
header: false,
height: 600,
items:[{
xtype:'form',
frame: true,
bodyPadding: 10,
width: 300,
height: 100,
defaultType: 'textfield',
items: [{
fieldLabel: 'User',
name: 'user'
}, {
fieldLabel: 'Pass',
name: 'pass',
inputType: 'password'
}]
}]
},
{
html: 'XXXX'
}]
});
I've tried to add pack: 'center' to the layout config, but that doesn't work anyway.
To align form panel, set the layout of form's parent container..
width: '100%',
header: false,
height: 600,
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [{
xtype: 'form',
...
You have to override the layout type and pack in the items also..check this
Ext.define('Test.Viewport', {
extend: 'Ext.container.Viewport',
requires: [
'Ext.layout.container.Border',
'Ext.layout.container.VBox'
],
autoScroll: true,
layout: {
type: 'vbox',
align: 'center'
},
items: [
{
width: '100%',
html:'header'
},
{
margin: '0 100 0 100',
//bodyStyle: { background: '#DFE8F6' },
width: '100%',
layout:{
type: 'vbox',
align: 'center',
pack: 'center',
},
header: false,
height: 300,
items:[{
xtype:'form',
frame: true,
bodyPadding: 10,
width: 300,
height: 100,
defaultType: 'textfield',
items: [{
fieldLabel: 'User ID',
name: 'user'
}, {
fieldLabel: 'Password',
name: 'pass',
inputType: 'password'
}]
}]
//html:'body'
},
{
html: 'XXXX'
}]
});
Ext.create('Test.Viewport');
I got a viewport and within the center region a window.
When I try to move the window to the top of the center region, the window doesn't stay on the top.
I note that the window is positioned at the top + the height of the north region.
This is the code:
Ext.onReady(function(){
Ext.create('Ext.container.Viewport', {
layout: 'border',
forceFit: true,
hideMode: 'offsets',
items: [
{
region:'north',
id:'btns',
height: 150,
layout:
{
type: 'hbox',
padding:'5',
align:'stretch'
},
items:[]
}, {
region: 'east',
autoScroll: true,
border: false,
items:[{
xtype: 'container',
id: 'page_gauche1',
width: 500,
height: 920,
border: false
}]
}, {
region: 'center',
id: 'center',
autoScroll: true,
border: true,
items: {
xtype: 'container',
id: 'page_gauche4',
width: 1400,
height: 920,
border: false,
hidden: true
}
}]
});
Ext.create('Ext.Window', {
layout: 'fit',
border: false,
header: true,
draggable: true,
resizable: true,
autoShow: true,
constrain: true,
renderTo: 'center',
width: 300,
height: 200
});
});
A window is a floating component you should not use renderTo here! In addition you should never set the id on your own if it can be avoided!
Do you this?
Fiddle
{
region: 'center',
id: 'center',
autoScroll: true,
border: true,
items: {
xtype: 'container',
id: 'page_gauche4',
width: 1400,
height: 920,
border: false,
hidden: true
},
listeners: {
boxready: function(self) {
Ext.create('Ext.Window', {
layout: 'fit',
border: false,
autoShow: true,
constrain: true,
constrainTo: self.getEl(),
width: 300,
height: 200
});
}
}
}
I'm creating a toolbar then later adding it to a Panel in ExtJS. It looks great except in IE7 where it has a much larger height than other browsers. ExtJS is hardcoding the height in an inline CSS style. Some of the menus are created before the toolbar...
var menu = Ext.create('Ext.menu.Menu', {
id: 'mainMenu',
style: {
overflow: 'visible'
},
items: [
{
text: 'choice1'
},{
text: 'choice2'
},{
text: 'choice3'
}]
});
var tb = Ext.create('Ext.toolbar.Toolbar');
tb.suspendLayouts();
tb.add({
text:'Choice 1',
iconCls: 'bmenu',
menu: menu
},{
xtype: 'tbfill'
},{
xtype: 'tbtext',
text: 'Last name'
});
menu.add(' ');
tb.add('-', {
iconCls: 'icon-help',
clickEvent: 'mousedown'
});
tb.resumeLayouts(true);
var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'north',
id: 'North',
items: [{
region: 'center',
style: {
overflow: 'visible'
},
}, tb]
},{
region: 'west',
id: 'West',
xtype: 'panel',
layout: 'vbox',
collapsible: true,
split: true,
width: 200,
items: [{
xtype: 'panel',
id: 'upperWest',
width: 200,
flex: 1,
html: myAlerts
},{
xtype: 'panel',
id: 'lowerWest',
width: 200,
flex: 3,
html: quickView
}
]
]
},{
region: 'center',
id: 'center',
height: '100%',
minheight: 200,
minwidth: 200,
layout: 'border',
border: false,
autoScroll:true,
tbar: [
{xtype: 'tbfill'},
{
xtype: 'combo',
height: 20,
editable: false,
store: [
'choice1',
'choice2',
'choice3',
],
value: 'choice1'
},
{xtype: 'tbfill'}
],
items: [{
region: 'east',
id: 'center-east',
height: '100%',
minheight: 200,
width: 200,
items: barChartPanel
},{
region: 'center',
id: 'center-center',
layout: 'fit',
baseCls:'x-plain',
items: columnChartPanel
}]
},{
region: 'east',
id: 'moreOptions',
xtype: 'panel',
title: 'More Options',
collapsible: true,
split: true,
width: 200,
items: [
{xtype: 'panel',
id: 'rightPanel1',
collapsible: true,
collapsed: true,
}
]
},{
region: 'south',
xtype: 'container',
}]
});
Found the solution. HTML 5 Boilerplate included a CSS property that was adding bottom padding to some elements. This was causing ExtJS to also add top padding to the toolbar. I removed the CSS element and the issue went away
I'm about to go crazy.
I have my panels configured as follows:
accordion = new Ext.Panel({
id: 'accordionPanel',
title: 'Options',
region: 'center',
animCollapse: true,
border: false,
minWidth: 150,
maxWidth: 400,
autoScroll: true,
autoHeight: true,
layout: 'accordion',
layoutConfig: {
animate: true
}
});
var panelOne = new Ext.Panel({
region: 'center',
layout: 'border',
defaults: {
collapsible: true,
split: true
},
items: [{
title: 'Navigation',
region: 'west',
margins: '5 0 0 0',
animCollapse: true,
autoScroll: true,
autoHeight: true,
width: 200,
minWidth: 150,
maxWidth: 400,
layout: 'border',
layoutConfig: {
animate: true
},
items: [
Ext.Panel({
region: 'north',
border: false,
collapsible: false,
height: 65,
align: 'center',
html: myHtmlSource
}),
accordion
]
}, {
title: 'Main Content',
region: 'center',
layout: 'absolute',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
},
items: [someWindows],
collapsible: false,
margins: '5 0 0 0'
}]
});
viewport = new Ext.Viewport({
layout: 'border',
id: 'viewport',
items: [panelOne]
})
accordionPanel has a bunch of grids like this one inside of it:
var myGrid = new Ext.grid.Panel({
id: 'myGrid',
layout: 'anchor',
border: false,
title: 'My Grid',
width: 412,
store: store,
heigth: 300,
frame: false,
columns: [myColumns],
.....
});
Each of those grids is a separate accordion tab.
Now my problem is that those grids never display scrolls.
Just to be clear, this looks like the border layout that is displayed here.
Except that the navigation panel has an accordion inside of it with multiple grids in it.
Can't think of anything else to try.
Anyone?