Flow layout with nested container - javascript

In my Ext JS 6 app, I'm trying to create a flow layout with 3 containers, with the middle container having nested items that need to continue with the flow layout. I can get this working if I add the middle container's items directly, but I don't want to do that... I want them to be separate.
Here's an example:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
height: 300,
width: 300,
scrollable: true,
renderTo: Ext.getBody(),
title: 'Not properly working',
bodyPadding: 10,
layout: {
type: 'column'
},
items: [{
xtype: 'panel',
title: 'start',
width: 100,
height: 50
}, {
xtype: 'container',
defaults: {
xtype: 'panel',
title: '1',
width: 50,
height: 50,
style: 'float: left;'
},
items: [{}, {}, {}, {}, {}, {}]
}, {
xtype: 'panel',
title: 'end',
width: 100,
height: 50
}]
});
Ext.create('Ext.panel.Panel', {
height: 300,
width: 300,
scrollable: true,
renderTo: Ext.getBody(),
bodyPadding: 10,
title: 'This is how it should look',
layout: {
type: 'column'
},
items: [{
xtype: 'panel',
title: 'start',
width: 100,
height: 50
}, {
xtype: 'panel',
title: '1',
width: 50,
height: 50
}, {
xtype: 'panel',
title: '1',
width: 50,
height: 50
}, {
xtype: 'panel',
title: '1',
width: 50,
height: 50
}, {
xtype: 'panel',
title: '1',
width: 50,
height: 50
}, {
xtype: 'panel',
title: '1',
width: 50,
height: 50
}, {
xtype: 'panel',
title: '1',
width: 50,
height: 50
}, {
xtype: 'panel',
title: 'end',
width: 100,
height: 50
}]
});
}
});
So my flow layout should look like this (depicted in the example's 2nd panel):
start 1 1 1 (newline)
1 1 1 end
I got the idea from this thread, but that doesn't have a nested item like in my example. Also tried to use this thread's advice, but still no dice.
I think the issue is with the auto layout for the middle container, as it sets the width to 100% for its child div, but I'm not sure how to fix this... any advice?

Related

vbox layout is not working in border layout

I have a requirment where i need to put one item inside vbox layout. my item is having a border layout and west and center reason having some vbox layout componet. below I am putting the code of item. In this main panel is border layout and reason having vbox but this is not working.
my Code :
Ext.create('Ext.panel.Panel', {
width: 500,
height: 500,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 100,
layout : 'fit',
split: true,// enable resizing
margin: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margin: '5 0 0 5',
width: 100,
layout: 'vbox',
height: 200,
items:[{
title: 'South Region is resizable',
xtype: 'panel',
height: 100
},{
title: 'ss Region is resizable2',
xtype: 'panel',
height: 100
}],
collapsible: true, // make collapsible
id: 'west-region-container',
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
width : 300,
layout: 'vbox',
margin: '5 5 0 0',
items:[{
title: 'South Region is resizable',
xtype: 'panel',
height: 50,
},
{
title: 'ss Region is resizable',
xtype: 'panel',
height: 10
}]
}],
renderTo: Ext.getBody()
});
Below is my Actual code where I am using vboxLayout and then border layout is one of the item of this. I am getting Layout run failed error
Ext.define('myApp.myData.myApp', {
extend: 'Ext.container.Container',
alias: 'widget.myApp',
controller: 'myAppController',
items: [{
xtype: 'label',
margin: '5 10 0 0',
height: 28
},
{
xtype: 'panel',
itemId: 'mainPanel',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
margin: '3 10 2 5'
},
items: [
{
xtype: 'myPanel'
},{
xtype : 'panel',
height: 500,
width : 300,
layout: 'border',
items :[{
xtype : 'panel',
layout: {
type: 'vbox',
align: "stretch"
},
items :[{
xtype: 'myPanel1'
},{
xtype : 'myPanel2'
}]
},{
xtype : 'panel',
layout: {
type: "vbox",
align: "stretch"
},
items :[{
xtype: 'myGrid'
}]
}]
}
]
}]
});
Any help will appriciate.
Change your layout to:
layout: {
type: "vbox",
align: "stretch"
}
And put flex on child items:
flex: 1

ExtJS Vertical Scroll Bar is not fitting for long json data

I have a Ext window in that having two items container and fieldset. For container and fieldset I am geting data in form of html from server.
If this data is big, scrollbar appears not navigate the text completly.
How can I configure a vertical scrollbar properly in this panel ?
My sample code is :
Ext.create('Ext.window.Window', {
title: 'DataSet',
bodyPadding: 5,
modal: true,
height: 600,
width: 900,
layout: 'fit',
items: {
xtype: 'form',
items: [{
xtype: 'container',
html: jsonData.R.ErrorMsg || ''
}, {
xtype: 'fieldset',
padding: '5 0 10 0',
collapsible: true,
title: 'Description',
autoScroll: true,
height: 580,
width: 880,
collapsed: true,
overflowY: 'scroll',
html: Ext.String.htmlEncode(jsonData.R.ErrorDesc) || ''
}]
}
})
The problem is that you are setting fixed width and height to the fieldset. If you want to have the scrollbar only when the content exceed the window size you first need to set the fieldset size as flex.
Use vbox layout in form
Replace fixed height: 580 and width: 880 with flex: 1 in fieldset
Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/30f9
Fieldset is not meant to be a form element(displaying html), It is meant to be a container for grouping sets of fields.
Creating a fieldset with child item text area or text field
Ext.create('Ext.window.Window', {
title: 'DataSet',
bodyPadding: 5,
modal: true,
height: 600,
width: 900,
layout: 'fit',
items: {
xtype: 'form',
items: [{
xtype: 'container',
html: jsonData.R.ErrorMsg || ''
}, {
xtype: 'fieldset',
collapsed: true,
overflowY: 'scroll',
items: [
{
xtype: 'textfield',
padding: '5 0 10 0',
collapsible: true,
title: 'Description',
height: 580,
width: 880,
itemId: 'errorDesc',
name: 'errorDesc',
fieldLabel: 'Error Desc',
value: Ext.String.htmlEncode(jsonData.R.ErrorDesc) || ''
}
}]
}
})
The height of the parent container i.e "Ext.window.Window" is fixed at 600. You can try giving it at '100%' increasing its height.
Ext.create('Ext.form.Panel', {
title: 'Simple Form with FieldSets',
labelWidth: 75, // label settings here cascade unless overridden
url: 'save-form.php',
frame: true,
bodyStyle: 'padding:5px 5px 0',
width: 550,
renderTo: Ext.getBody(),
layout: 'column', // arrange fieldsets side by side
items: [{
// Fieldset in Column 1 - collapsible via toggle button
xtype:'fieldset',
columnWidth: 0.5,
title: 'Fieldset 1',
collapsible: true,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
items :[{
xtype:'container',
html: Ext.String.htmlEncode("<input type=\"text\"> Hello </input>")
}, {
fieldLabel: 'Field 2',
name: 'field2'
}]
}]});
Here height is not specified and parent container's height will be based on the items it holds.
You can try this it works:
Ext.create('Ext.window.Window', {
title: 'DataSet',
bodyPadding: 5,
modal: true,
height: 600,
width: 900,
layout: 'fit',
items: {
xtype: 'form',
items: [{
xtype: 'container',
html: jsonData.R.ErrorMsg || ''
}, {
xtype: 'fieldset',
padding: '5 0 10 0',
collapsible: true,
title: 'Description',
height: 580,
width: 880,
collapsed: true,
overflowY: 'scroll',
html: Ext.String.htmlEncode(jsonData.R.ErrorDesc) || ''
}]
}
})

Sencha Ext Panel Fill Browser

I have the following application and it fills the screen no problem horizontally. I would like it to fill out vertically as well.
var missionsPanel = new Ext.panel.Panel
(
{
title: 'Active Missions', width: '35%', renderTo: Ext.getBody(), layout: { type: 'vbox', align: 'stretch', padding: 5}
}
);
resultsPanel = Ext.create('Ext.panel.Panel', {
title: 'ISR Toolkit v3.0',
renderTo: Ext.getBody(),
layout: { type: 'hbox', align: 'fit', padding: 5 },
items:
[ missionsPanel, { xtype: 'splitter' },
{ title: 'Person Details', bodyPadding: 5, flex: 2,
items:
[
{ itemId: 'txtName', fieldLabel: 'Name:', xtype: 'textfield'},
{ itemId: 'txtAge', fieldLabel: 'Age', xtype: 'textfield'},
{ itemId: 'btnShow', xtype: 'button', height: '60', width: 125, align: 'right', text: 'Show Data', handler: createNewMissionWindow }
]
}
]
});
I am sure it's something small I a missing.
The easiest way would be to create a Viewport with a fit layout, and the only item being your panel (removing the renderTo configs, as well as any height/width).

EXTJS: hidden element does not show up after setvisible

Hello I want to show and image that is like an alert sign when a change is done, then I have a footer panel like this one, with the sign:
Ext.define('footerPanel', {
extend: 'Ext.panel.Panel',
cls: 'fastec_background',
height: 24,
autoScroll: false,
border: false,
layout: {
type: 'border'
},
id: 'panel_footerFastec',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
margin: '5 5 0 20',
xtype: 'label',
region: 'center',
html: '<a>© 2012 FASTEC GmbH, Paderborn, Germany - </a><a target="_blank" href="http://www.easyoee.de">www.easyOEE.de</a> <a target="_blank" href="http://www.fastec.de">www.fastec.de</a>'
}, {
xtype: 'container',
region: 'east',
layout: 'table',
id: 'cont_footer_icons',
items: [{
xtype: 'image',
id: 'configchangedIcon',
height: 16,
margin: '5 0 5 0',
width: 16,
maxHeight: 20,
dock: 'right',
maxWidth: 20,
scale: 'large',
src: 'files/images/disk_blue.png',
hidden: true
}, {
xtype: 'image',
height: 16,
id: 'errorIcon',
margin: '5 0 5 0',
width: 16,
dock: 'right',
maxHeight: 20,
maxWidth: 20,
scale: 'large',
src: 'files/images/error16.gif',
hidden: true
}]
}]
});
me.callParent(arguments);
}
});
And the idea is that I have a general function which I could call anywhere and show or hide the icon, but unfortunately I call this function and nothing happens:
changeIconVisibility = function(str, value) {
try {
switch(str){
case 'configchangedIcon':
var img = Ext.getCmp('configchangedIcon');
if(value){
img.setVisible(true);
}else{
img.setVisible(false);
}
break;
}
} catch (e) {
Ext.msg.alert(e);
}
}
I tried by directly calling the component and setVisible(true) as well and nothing happens.
get the footerPanel component and use hide/ show method.
like
var myPanel = Ext.getCmp('your_panel');
myPanel.items.items[1].hide() //second item
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-hide
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-show

How to make an ExtJS table layout have percentage instead of absolute values for height and width?

Using Ext.Panel and the table layout, I was able to create a layout just the way I want. However, how do I change this code so that I can define the widths and heights proportionally?
e.g. the table should not be 800 pixels but 100% of the screen width, and each box not 200 pixels but 25%.
here is the code:
<script type="text/javascript">
clearExtjsComponent(targetRegion);
var table_wrapper2 = new Ext.Panel({
id: 'table_wrapper2',
baseCls: 'x-plain',
renderTo: Ext.getBody(),
layout:'table',
layoutConfig: {columns:2},
defaults: {
frame:true,
width:200,
height: 200,
style: 'margin: 0 10px 10px 0'
},
items:[{
title:'Shopping Cart',
width: 400,
height: 290,
colspan: 2
},{
title:'Invoice Address',
width: 190,
height: 100
},{
title:'Delivery Address',
width: 200,
height: 100
}
]
})
var table_wrapper = new Ext.Panel({
id:'table_wrapper',
baseCls:'x-plain',
renderTo: Ext.getBody(),
layout:'table',
layoutConfig: {columns:4},
defaults: {
frame:true,
width:200,
height: 200,
style: 'margin: 10px 0 0 10px'
},
items:[{
title:'Orders',
width: 810,
colspan: 4
},{
title:'Customer Information',
width: 400,
height: 400,
colspan: 2
},{
//title:'Shopping Cart',
frame: false,
border: false,
width: 400,
height: 400,
colspan: 2,
items: [ table_wrapper2 ]
}
]
});
replaceComponentContent(targetRegion, table_wrapper);
hideComponent(regionHelp);
</script>
Instead of :
layout:'table',
layoutConfig: {columns:2},
try this :
layout: {
type: 'table',
columns: 3,
tableAttrs: {
style: {
width: '100%',
height: '100%'
}
}
},
Like I said in the reply to your other thread using vbox and hbox layouts might be a little easier for you if you want to do relative positioning. Also, if you want to stretch things to your window, put it in a Viewport, that automatically uses you entire window.
You might want to change the layout a bit (borders, frames), but with vbox and hbox layouts it would be something like this:
new Ext.Viewport({
layout: 'vbox',
layoutConfig: {
align : 'stretch',
pack : 'start'
},
defaults: {
style: 'margin: 10px 0 0 10px'
},
items:[{
title:'Orders',
height: 200
},{
layout: 'hbox',
flex: 1,
layoutConfig: {
align : 'stretch',
pack : 'start'
},
items: [{
title:'Customer Information',
flex: 1
},{
layout: 'vbox',
flex: 1,
layoutConfig: {
align : 'stretch',
pack : 'start'
},
items: [{
title: 'Shopping cart',
height: 200
},{
layout: 'hbox',
flex: 1,
layoutConfig: {
align : 'stretch',
pack : 'start'
},
items: [{
title: 'Invoice address',
flex: 1
},{
title: 'Delivery address',
flex: 1
}]
}]
}]
}
]
});
try this one fiddle example :
https://fiddle.sencha.com/#fiddle/2dm
Ext.create('Ext.panel.Panel', {
title: 'Car Simple Tree',
height: 200, //Fixed height for this panel
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%' // To make the cell width 100%
}
}
},
items: [{
xtype: 'panel',
title: 'panel title',
collapsible: true,
titleCollapse: true,
bodyStyle: {
background: '#D9E5F3',
borderColor: '#99BCE8',
borderWidth: '1px'
},
//scrollable: true,
//autoScroll: true,
layout: {
pack: 'center',
type: 'hbox'
},
rowspan: 1,
colspan: 2,
width: '100%',
items: [{
text: 'Save',
xtype: 'button',
padding: 5
}]
}, {
html: 'Cell C content',
cellCls: 'highlight'
}, {
html: 'Cell D content'
}]
});
Consider using ColumnLayout instead. This gives you a choice between pixels and percentages for widths.

Categories