We Keep Coding

Flow layout with nested container

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?

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 4 portal example

I would like to say that Im struggling with understanding the portal demo in ExtJS 4. Can someone please just provide me a generic example of a container and how to add a portlet item. The docs provided with the download do not have the word portal or portlet when I do the search. When I look at the source of the example there are classes files and extra CSS files too. Are those needed? I have searched all over the web and only seem to find other people asking the same question. Any help or even a link to a demo for extjs 4 would be greatly appreciated. Maybe my googlefoo is lacking?
When I use the demo and start modifying the border layout I run into all sorts of issues. The center region cannot contain a tab panel, I use accordion layouts for my east, west, and north regions. There seems to be an issue with the West region and having an accordion layout because it does not display properly ie. the accordion is like half open and any images inside do not display unless you collapse and then re-open. Would someone be able to provide me with an example that just shows how to make a basic portal without any added functionality? Below is the code I was using that was not working properly but displays and works fine (except for the portal part) when using just a viewport.
Here is some example code
Ext.define('Ext.app.Portal', {
extend: 'Ext.container.Viewport',
uses: ['Ext.app.PortalPanel'],
initComponent: function(){
Ext.apply(this, Ext.create('Ext.Viewport', {
id: 'main-viewport',
layout: {
type: 'border',
padding: '0 5 5 5'
},
items: [{
title: 'My Notifications',
id: 'My-Notifications-Panel',
region: 'north',
height: 300,
split: true,
collapsible: true,
collapsed: true,
margins: '0 0 0 0',
layout: 'accordion',
items: [
{
title: 'Alerts'
},{
title: 'Communications'
}
]
},{
title: 'My Support',
id: 'My-Support-Panel',
region: 'east',
width: 140,
collapsible: true,
collapsed: true,
margins: '0 0 0 0',
layout: 'column',
autoScroll: true,
defaults: {
margins: '10 5 0 0',
xtype: 'panel',
height: 100,
width: '100%',
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items:[
{
title: 'Customer Services'
},{
title: 'Technical Support',
listeners: {
afterrender: function(c){
c.el.on('click', function(){
CreateChatSession();
Ext.getCmp('My-Support-Chat-Panel').update('<iframe width="100%" height="700" src="/pub/" frameborder="0"></iframe>');
});
}
}
}
]
},{
xtype: 'panel',
region: 'west',
collapsible: true,
collapsed: true,
title: 'My Apps',
width: 275,
layout:'accordion',
split: true,
margins: '0 0 0 0',
defaults: {
bodyStyle: 'padding:15px',
layout: 'column'
},
items: [{
title: 'Internal Apps',
defaults: {
padding: '5 5 5 5',
xtype: 'panel',
height: 100,
width: 80,
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items: []
},{
title: 'Favorites',
defaults: {
padding: '5 5 5 5',
xtype: 'panel',
height: 100,
width: 80,
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items: []
},{
title: 'Reporting',
defaults: {
padding: '5 5 5 5',
xtype: 'panel',
height: 100,
width: 80,
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items: []
}]
},
Ext.create('Ext.tab.Panel', {
region: 'center',
layout: 'fit',
items: [{
id: 'Workspace-1',
title: 'Workspace 1',
layout: 'fit',
items: [{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center',
items: [{
id: 'col-1',
items: [{
id: 'portlet-2',
title: 'Portlet 2',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-2',
items: [{
id: 'portlet-3',
title: 'Portlet 3',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
}]
}]
}]
})
]
}));
this.callParent(arguments);
}
});

----------- Just for anyone who reads this Portal Layout IS NOT part of the official framework and is a 3rd party extension bundled with the library, which is why it is not in the docs.

It'ss the portal example with tabs in center region
Hope this will help you.
Ext.define('Ext.app.Portal', {
extend: 'Ext.container.Viewport',
getTools: function() {
return [{
xtype: 'tool',
type: 'gear',
handler: function(e, target, panelHeader, tool) {
var portlet = panelHeader.ownerCt,
el = portlet.getEl();
el.mask('Working...');
Ext.defer(el.unmask, 2000, el);
} //eo handler function
}]; //eo return
}, //eo get tools
initComponent: function() {
var content = '<div class="portlet-content">' + Ext.example.shortBogusMarkup + '</div>';
Ext.apply(this, {
id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5'
}, //eo layout
items: [{ //header : item 1 of app-viewport
id: 'app-header',
xtype: 'box',
region: 'north',
height: 50,
html: 'myPortal'
},
{ //container : item 2 of app-viewport
xtype: 'container',
region: 'center',
layout: 'border',
items: [{ //options: item 1 of container
id: 'app-options',
title: 'Options',
region: 'west',
animCollapse: true,
width: 200,
minWidth: 150,
maxWidth: 400,
split: true,
collapsible: true,
layout: 'accordion',
layoutConfig: {
animate: true
},
items: [{ //item 1 of app-options
title: 'title',
autoScroll: true,
border: false,
iconCls: 'nav',
items: [{
xtype: 'treepanel',
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
region: 'west',
split: true,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
}
}
/*Dashboard
MultiServices
Reporting
Global Options
*/
}]
},
{ //settings : item 2 of app-options
title: 'Settings',
html: '<div class="portlet-content">' + 'details ??' + '</div>',
border: false,
autoScroll: true,
iconCls: 'settings'
}
] //eo items options
},
{ //item 2 of container
id: 'tabpanel1', // id: 'app-portal', ???
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
items: [{
title: 'tab1',
layout: 'column', //
closable: true,
items: [{
id: 'col-1',
columnWidth: 0.5,
flex: 1,
items: [{
id: 'portlet-1',
title: 'Grid Portlet',
tools: this.getTools(),
items: new Ext.app.GridPortlet(),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}, {
id: 'portlet-2',
title: 'Portlet 2',
tools: this.getTools(),
html: content,
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}] //eo col-1
}, {
id: 'col-2',
columnWidth: 0.5,
flex: 1,
items: [{
id: 'portlet-3',
title: 'Portlet 3',
tools: this.getTools(),
html: '<div class="portlet-content">' + Ext.example.bogusMarkup + '</div>',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}] //eo col-2
}, {
id: 'col-3',
columnWidth: 0.5,
flex: 1,
margins: '0 26 0 0',
items: [{
id: 'portlet-4',
title: 'Chart Portlet',
tools: this.getTools(),
items: new Ext.app.ChartPortlet(),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}] //eo col-3
}] //eo tab1
}, {
title: 'tab2',
closable: true
}] //eo items tabpanel
}
] //eo ietms container
}
] //eo viewport
}); //eo apply
this.callParent(arguments);
}, //eo initcomponent
onPortletClose: function(portlet) {
this.showMsg('"' + portlet.title + '" was removed');
},
showMsg: function(msg) {
var el = Ext.get('app-msg'),
msgId = Ext.id();
this.msgId = msgId;
el.update(msg).show();
Ext.defer(this.clearMsg, 3000, this, [msgId]);
},
clearMsg: function(msgId) {
if (msgId === this.msgId) {
Ext.get('app-msg').hide();
}
}
});
EDIT
Or u can try this example I think it suits better ur needs ,let me know.

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.