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.
Related
I was wondering what would be the best way of achieving a layout like this in extJS:
I have 4 different components that I would like to place in each respective box but am having trouble figuring out exactly how I can do it.
Here is a snippet of some code I have been working on:
Ext.define('/../../../chefCreateAndPinRolesLayoutContainer', {
extend: 'Ext.container.Container',
height: '100%',
width: '100%',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
flex: 1,
items: [
Ext.create('/../../../chefRequiredCookbooksGridPanel'),
Ext.create('/../../../chefRoleSetupFormPanel')
]
}, {
flex: 1,
items: [
Ext.create('/../../../chefOptionalCookbooksGridPanel'),
Ext.create('/../../../chefAttributeGridContainer')
]
}]
});
Here is what my current layout comes out to:
I'd like for it to fill the whole Tab Panel and have equal widths and heights per section.
Any ideas?
Thanks
You can try the below snippet, where internal container items(A, B, C, D) can be replaced with your custom items.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
border: 1,
items: [
{
xtype: 'container',
html: 'Cell A content',
flex: 1
},{
xtype: 'container',
html: 'Cell B content',
flex: 1
}
]
}, {
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'container',
html: 'Cell C content',
flex: 1
},{
xtype: 'container',
html: 'Cell D content',
flex: 1
}
]
}]
}]
});
}
});
I have a panel with an hbox layout and a single line of components in it: A combobox and text field. What I am trying to do is replicate that exact same line of components beneath the existing components. How can you break a line inside of an hbox layout in Ext JS? (Similar to in HTML).
Here's my code:
{ xtype: 'panel', padding: '5 5 5 5', layout: 'hbox', height: 170, width: '100%', id: 'main', collapsible: true,
//Query Builder
items: [
{ xtype: 'combobox', padding: 5, store: filters, id: 'criteria_1_drop_down', displayField: 'field1' },
{ xtype: 'textfield', padding: 5, id: 'criteria_1_input'}
//code to start new line...
Here's what I'm trying to achieve:
Line 1 will be just text, sort of like a column header
Line 2 is the code I have now
Line 3 will be just like line 2
Oh and there's a button :)
I would use an anchor layout for the panel, with a container having an hbox layout for each row.
{
xtype: 'panel',
layout: 'anchor',
items: [{
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'component',
html: 'Text Field'
}, {
xtype: 'component',
html: 'Text Field'
}]
}, {
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'combo',
...
}, {
xtype: 'textfield',
...
}]
}, {
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'combo',
...
}, {
xtype: 'textfield',
...
}, {
xtype: 'button',
...
}]
}]
}
I'm trying to build my container in the initialize() function by creating all my components then calling this.setItems([...]). For some reason, my components are being placed on top of each other, rather than after each other in the vbox.
I am able to grab the top component and move it down, as is shown in the attached image.
Simplified view with two components:
Ext.define("Sencha.view.DynamicView", {
extend: 'Ext.Container',
xtype: 'dynamic-view',
requires: [],
config: {
layout: {
type: 'vbox'
},
flex: 1,
cls: 'view-container',
store: null
},
createRadioSet: function() {
this.radioFieldSet = Ext.create('Ext.form.FormPanel', {
flex: 1,
items: [{
xtype: 'fieldset',
title: 'About You',
defaults: {
xtype: 'radiofield',
labelWidth: '40%'
},
instructions: 'Favorite color?',
items: [{
name: 'color',
value: 'red',
label: 'Red'
},
{
name: 'color',
value: 'green',
label: 'Green'
}
]
}]
});
return this.radioFieldSet;
},
createCheckboxSet: function() {
this.checkboxFieldSet = Ext.create('Ext.form.FormPanel', {
flex: 1,
items: [{
xtype: 'fieldset',
title: 'Check all that apply',
defaults: {
xtype: 'checkboxfield',
labelWidth: '40%'
},
instructions: 'Tell us all about yourself',
items: [{
name: 'firstName',
value: 'First',
label: 'First Name'
},
{
name: 'lastName',
value: 'Last',
label: 'Last Name'
}
]
}]
});
return this.checkboxFieldSet;
},
initialize: function() {
this.callParent(arguments); // #TDeBailleul - fixed
var r1 = this.createRadioSet();
var cbSet1 = this.createCheckboxSet();
// this.add(cbSet1);
// this.add(r1);
this.setItems([r1, cbSet1]);
}
});
My problem was that I was adding my components incorrectly in a tab controller. I'm including an example that creates buttons on one tab and the checkboxes on another tab.
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
name : ('SF' || 'SenchaFiddle'),
createRadioSet: function () {
this.radioFieldSet = Ext.create('Ext.form.FormPanel', {
height: '300px',
width: '300px',
items: [
{
xtype: 'fieldset',
title: 'Title',
defaults: {
xtype: 'radiofield',
labelWidth: '40%'
},
instructions: 'Favorite color?',
items: [
{
name: 'color',
value: 'red',
label: 'Red'
},
{
name: 'color',
value: 'green',
label: 'Green'
}
]
}
]
});
return this.radioFieldSet;
},
createButton: function(i) {
return Ext.create('Ext.Button', {
text: 'hello' + i,
height: '50px',
width: '100px'
});
},
launch: function () {
var tabPanel = Ext.create('Ext.tab.Panel', {
layout: 'card',
padding: 2,
tabBarPosition: 'bottom',
items: [
{
id: 'tab1',
title: 'Home',
layout: 'hbox',
xtype: 'container',
iconCls: 'home'
},
{
id: 'tab2',
title: 'More',
layout: 'hbox',
xtype: 'container',
iconCls: 'star'
}
]
});
Ext.Viewport.add(tabPanel);
var a,b;
for (var i = 0; i < 3; i++) {
a = this.createButton(i);
b = this.createRadioSet();
// tabPanel.getAt(0).add(b); // Reference the proper component: Tab 1
Ext.getCmp('tab1').add(a);
Ext.getCmp('tab2').add(b);
}
}
});
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.)
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
},