I have a panel which is fullscreen;
PortalDashboard.views.Dashboardcard = Ext.extend(Ext.Panel, {
fullscreen: true,
title: 'Dashboard',
html: '',
cls: 'card5',
iconCls: 'team',
layout: Ext.Viewport.orientation == 'landscape' ? {
type: 'hbox',
pack: 'center',
align: 'stretch'
} : {
type: 'vbox',
align: 'stretch',
pack: 'center'
},
monitorOrientation: true,
listeners: {
orientationchange : this.onOrientationChange,
},
styleHtmlContent: false,
initComponent: function () {
Ext.apply(this, {
items: [
{
xtype: 'dashboardbox',
items: [rep1, rep2, rep3]
}, {
xtype: 'dashboardbox',
items: [rep4, rep5, rep6]
}]
});
PortalDashboard.views.Dashboardcard.superclass.initComponent.apply(this, arguments);
}
})
So the panel has a hbox layout with 2 child panels. The child panels actually take up the full amount of horizontal space, but not vertically.
I can set the min-height in the css, which gets respected on in chrome and safari on my pc... but the ipad ignores it.
The child panels are defined as;
PortalDashboard.views.DashboxBox = Ext.extend(Ext.Panel, {
cls: 'dashbox',
monitorOrientation: true,
listeners: {
orientationchange : this.onOrientationChange,
},
layout: Ext.Viewport.orientation == 'landscape' ? {
type: 'vbox',
align: 'stretch',
pack: 'center'
} : {
type: 'hbox',
align: 'stretch',
pack: 'center'
},
defaults: {
flex: 1
}
});
Ext.reg('dashboardbox', PortalDashboard.views.DashboxBox);
I've had this before with a TabPanel parent of some sub panels. Try layout: 'fit' in your parent panel. (Although I'm not sure if adding it to your current list of layout options will work or if it needs to be set by itself.)
Related
My problem is, even if I used "layout: 'fit'" in all my children items within a boarder layout, they just shrinks into a small box rather than fill the parent, as described in fit layout.
I want the EDS.view.selector.Container to fill the "navigation" section of my boarder layout.
(Code excerpt)
Ext.define('EDS.view.selector.Container', {
extend: 'Ext.panel.Panel',
alias : 'widget.selectorcontainer',
layout: 'fit',
initComponent: function(){
this.items = [
{
xtype: 'tabpanel',
defaults: {
bodyPadding: 10
},
layout: 'fit',
items:[
{
title: 'Organization',
id: 'selector-organization',
tag: 'div',
html: 'div here',
height: '100%',
}
]
}
],
this.callParent();
},
});
(Controller)
init: function(){
console.log('controller.init()');
new Ext.Viewport({
title: 'Data Analysis',
layout: 'border',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding: 15px',
},
items: [{
title: 'Navigation',
region:'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 600,
minSize: 100,
maxSize: 250,
items: [
{
id: 'selector-container',
xtype: 'selectorcontainer',
layout: 'fit',
}
]
},{
title: 'Main Content',
collapsible: false,
region:'center',
margins: '5 0 0 0'
}]
});
}
You did not set up layout for wrapper containers in your border layout:
items: [{
title: 'Navigation',
region:'west',
layout: 'fit',
...
items: [
]
},{
title: 'Main Content',
collapsible: false,
region:'center',
layout: 'fit',
...
}]
Remember: In ExtJS any plain JS object that goes into items property of a container will be converted into some type of Ext component with xtype defined by defaultType property of that container. In most cases it will be panel.
I dont know what to do...
Without hbox the grid appears,
but with hbox not.
I added with & height and flex to each child element,
but it doesnt work...
Thanks in advance!
And here's the code:
Ext.onReady(function() {
var myStore = Ext.create('Ext.data.SimpleStore', {
fields: [ 'bMin', ], });
var myData = [ { "bMin": 10, } ];
myStore.loadData(myData);
var grid = new Ext.grid.GridPanel({
layout : { type : 'hbox', align : 'stretch', flex:2,
Height: 150,
Width: 300,
},
cls: 'custom-grid',
store: myStore,
columns: [
{text: "bMin", dataIndex: 'bMin', type: 'float',},
],
viewConfig: {
emptyText: 'No records',
forceFit : true,
},
renderTo: Ext.getBody(),
});
var myPanel = new Ext.Panel({
layout : {
type : 'hbox',
align : 'stretch',
},
title: 'Hello',
minHeight : 150,
minWidth: 300,
Height: 150,
Width: 300,
items: [
grid,
{xtype: 'button', width: 50, height: 50, flex: 1}
],
renderTo: Ext.getBody()
});
});
On the Grid you don't need a 'layout' config, also when using an HBox Height and Width is ignored on the child components so using flex is the way to go. I also added a 'pack' attribute to the hbox layout.
Try this:
Ext.onReady(function() {
var myStore = Ext.create('Ext.data.SimpleStore', {
fields: [ 'bMin', ], });
var myData = [ { "bMin": 10, } ];
myStore.loadData(myData);
var grid = new Ext.grid.GridPanel({
flex: 1,
cls: 'custom-grid',
store: myStore,
columns: [
{text: "bMin", dataIndex: 'bMin', type: 'float',},
],
viewConfig: {
emptyText: 'No records',
forceFit : true,
},
renderTo: Ext.getBody(),
});
var myPanel = new Ext.Panel({
layout : {
type : 'hbox',
align : 'stretch',
pack: 'start'
},
title: 'Hello',
minHeight : 150,
minWidth: 300,
Height: 150,
Width: 300,
items: [
grid,
{xtype: 'button', flex: 1, text: 'test'}
],
renderTo: Ext.getBody()
});
});
JSFiddle Example:
http://jsfiddle.net/vzURb/2/
I see a number of problems here...
height and width config properties should not be capitalized
The flex, height, and width properties should all be on the panel itself, NOT on the panel's layout
The flex attribute will be weighted, so using flex: 1 on your button and flex: 2 on your panel will almost certainly not be what you are looking to do
You have renderTo on the grid, which is supposed to be inside your panel, so it should not use this config
You have commas at the ends of property lists, this can lead to lots of problems
You have type on a column, which is not a valid config
You don't need the layout on the grid
I can't tell exactly what it is that you want to do, but having an hbox layout with a button as the second item will look quite strange. But, if that is what you are intending, this is probably more what you want:
var grid = new Ext.grid.GridPanel({
cls: 'custom-grid',
store: myStore,
columns: [
{text: "bMin", dataIndex: 'bMin'}
],
viewConfig: {
emptyText: 'No records',
forceFit : true
}
});
var myPanel = new Ext.Panel({
layout : {
type : 'hbox',
align : 'stretch'
},
title: 'Hello',
height: 150,
width: 300,
items: [
grid,
{xtype: 'button', width: 50, height: 50, flex: 1}
],
renderTo: Ext.getBody()
});
I have to do the following layout :
The red container has the layout card and contains :
A titlebar
A container : This one display a map and should take all the size of the screen below the titlebar
A panel : This is to display custom control buttons, it should be over the map and not hide it (background is transparent)
I tried the following code but it didn't work, I can't figure out how to place components over another one. If I use the hbox layout, the custom control buttons will be below the map, and not on the map...
Ext.define('Sencha.view.MapPanel', {
extend: 'Ext.Container',
requires: ['Ext.ux.LeafletMap'],
xtype: 'mappanel',
config: {
itemId: 'mapanel',
layout: 'card',
items: [{
xtype: 'titlebar',
title: 'title',
docked: 'top'
}, {
xtype: 'panel',
config:{
layout: 'fit',
height: '100px',
width: '100px',
itemId: 'controlButtons'
}
}, {
xtype: 'leafletmap',
mapOptions: {
zoom: 13,
zoomControl: false
},
config: {
layout: 'fit'
}
}]
}
});
Here the controlsButton show but not the map. If I put the controlsButton after the leafletMap, the map shows but not the buttons...
Any help welcome!
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
html: 'Main Container',
style: 'border: 2px solid black;',
layout: {
type: 'card'
},
items: [
{
xtype: 'container',
style: 'border:2px solid red',
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Title Bar'
},
{
xtype: 'container',
html: 'Container',
style: 'border:2px solid blue;',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'panel',
docked: 'bottom',
height: '20%',
html: 'Panel that holds buttons',
style: 'border: 2px solid green;',
top: '',
width: '50%'
}
]
}
]
}
]
}
});
This is as same as you have wanted (per screenshot). Please ignore the border style. That was just to show you the difference. Hope you get an idea from this. :) Best luck!!
I want to use viewport and use accordion layout for my menu items.
but I want my accordion layout not fill and use all spaces for each item
I use layoutConfig like examples but it dosn't work and the accordion fill all spaces and stretch vertically :
this.view = new Ext.Viewport({
layout: 'border',
renderTo : document.body,
items: [{
xtype: 'box',
region: 'north',
height: 60,
contentEl: 'framework_north'
},{
region: 'east',
title: 'امکانات سیستم',
split: true,
collapsible: true,
width: 200,
minSize: 200,
maxSize: 200,
layout:'accordion',
layoutConfig: {
fill : false,
collapseFirst : true,
hideCollapseTool : true
},
tbar : [
{
contentEl : "framework_clock",
autoWidth : true,
xtype: 'box',
height : 80
}],
items: this.menuItems
},
this.centerPanel]
});
what is my fault :'(
wrap your accordion in a vbox container and set the height to whatever you want.
i have the problem with displaying fields on form
var test = Ext.create('Ext.form.Panel', {
renderTo: 'test',
title: '1. zzzz',
width: 800,
bodyPadding: 5,
defaults: {
anchor: '100%'
},
items: [
{
xtype: 'fieldset',
defaults: {
anchor: '100%'
},
layout: 'column',
items: [
{
xtype: 'panel',
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
columnWidth: .5,
flex: 1,
defaultType: 'textfield',
defaults: {
anchor: '100%',
flex: 1
},
items: [
{
xtype: 'numberfield',
hideTrigger: true,
fieldLabel: 'zzzz',
//anchor: '100%',
//anchor: '-5',
name: 'SRD_NUMBER'
},
{
fieldLabel: 'zzzz',
//anchor: '-5',
name: 'SRD_NAME_BR'
},
{
fieldLabel: 'zzzzz',
//anchor: '-5',
name: 'SRD_NAME_FL'
},
{
xtype: 'numberfield',
hideTrigger: true,
fieldLabel: 'zzzz',
disabled: true,
//anchor: '-5',
name: 'SRD_FOP'
},
{
fieldLabel: 'zzzz',
//anchor: '-5',
name: 'SRD_NAME_ORDER'
},
{
xtype: 'panel',
id: 'dep-img',
border: false,
height: 50,
width: 100,
cls: 'x-form-item',
html: '<img src="http://dep-image/id/10000001482" width="100" height="50" title="zzz">'
},
{
xtype: 'filefield',
name: 'file1',
msgTarget: 'side',
border: 3,
//anchor: '100%',
fieldLabel: 'zzzz',
buttonText: 'zzzzzz'
},
{
fieldLabel: 'zzz',
//anchor: '-5',
name: 'company'
},
{
fieldLabel: 'zzzz',
//anchor: '-5',
name: 'company'
}]
}
]
} //fieldset
]//glob
});
i need to fit fields width to column width.
on this page http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.FieldContainer 2 examples
and in second example they set defaults {layout: '100%'} and it looks like it does not work.
found own salvation: by adding layout: 'fit' or layout: 'anchor' to fieldset anchor
defaults: {
layout: 'fit',
flex: 1
},
thanks to all
You must set height property to your form and if it still is not displaying then give height to fieldset too.
found own salvation: by adding layout: 'fit' or layout: 'anchor' to fieldset anchor
defaults: {
layout: 'fit',
flex: 1
},
thanks to all
I would specify layout:'fit' on the formPanel since you are using a single fieldset.
The rest i dont understand. It looks like you specify column layout but using just one column.
Could you clean up the example and i would be happy to help.
After a quick look... Have you tried putting anchor: '0' on both fields and containers?
Also, you should use fieldDefaults instead of
defaults: {
anchor: '100%',
flex: 1
},