We Keep Coding

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) || ''
}]
}
})

Ext.js: Resizing Panel on Browser Resize

I have a side panel that uses Ext.js. One of the panels within the side panels is fine until the browser resizes. Upon browser resize, it cuts off components of the panel.
How can I make the panel resize upon browser resizing?
{
xtype: 'panel',
border: 1,
margin: 5,
flex: 1,
autoScroll: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'panel',
title: localization.moduleS.labelOutlineAttributesField,
border: 0,
bodyPadding: '12 5 12 5',
className: 'outlineAttrField',
hidden: true,
items: [
]
},
{
xtype: 'sattrfillinpanel',
title: localization.moduleS.labelFillInAttributesField,
border: 0,
bodyPadding: '2 5 12 5',
hidden: true
},
{
xtype: 'panel',
title: localization.moduleS.labelGeoAttributesField,
border: 0,
bodyPadding: '5',
className: 'outlineField',
hidden: true,
items: [
{
xtype: 'sdrawbuttonpanel',
className: 'drawButtonPanel',
margin: '0 0 0 0',
},
{
xtype: 'container',
title: localization.moduleS.labelFiltersPanel,
border: 0,
margin: '0, 5, 0, 2',
className: 'filtersField',
hidden: true,
items: [
{
xtype: 'sfeaturefilterpanel',
className: 'baseMapOutlineField',
label: localization.moduleS.labelShowAttributesOnLeftField
},
{
xtype: 'sfeaturefilterpanel',
margin: '0 0 0 0',
className: 'dualMapOutlineField',
label: localization.moduleS.labelShowAttributesOnRightField
}
]
},
]
},
The filters field is what's getting cut off

The problem is not on your panel resizing, I think your code is correct, but in my opinion the problems are in inside panel's components.
Personally if I'm using a vbox or hbox layout inside a panel I set to the components inside it a flex value, obviously on resize event of the browser your components can't, without a flex, resize automatically.
try just to put a flex to your components.
here examples about use of layouts that helped me in the past:
http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html
using a viewport, with a panel inside it and a vbox layout, setting flex values, i always had the resizing i expected.
sometimes you need to refresh your components layout in case of massives changes

Scrolling and resizing with ExtJs

I have a problem with ExtJs sizes and scrolling. Here is a simple example: https://fiddle.sencha.com/#fiddle/ucd
Ext.onReady(function() {
var win = new Ext.Window({
id: 'win',
layout: 'fit',
closable: true,
bodyPadding: 5,
renderTo: Ext.getBody(),
items: {
xtype: "form",
defaultAnchor: "100%",
items: [{
xtype: "panel",
layout: "fit",
overflowY: "scroll",
//overflowY: "auto",
layout: 'hbox',
items: [{
xtype: "fieldset",
margin: 5,
padding: 5,
labelWidth: 140,
defaultAnchor: "100%",
collapsible: true,
title: "groupbox",
items: [{
itemId: "SNAME",
xtype: "textfield",
margin: 5,
fieldLabel: "Name:",
}],
}],
}]
}
});
win.show();
});
Problem:
It's a side issue. I don't understand, why overflowY: 'auto' won't work. It works in my local project, and in this Fiddle scrolling behaves as hidden. May I be need to call doLayout() or something on resize event. So I did overflow: "scroll".
You can see that ExtJs doesn't leave place for the scrollbar and it cover the fieldset. Why? How resolve this?
In my local project overflow: 'auto' works. And scrollbars always appears, because innerct panel div have same size as body div panel. So scrolling behaves as on set overflow: 'scroll'. And fieldset right border is hidden by scroll.

You are way overnesting. You are putting a container in a container in a container and all with there own layout calculations. Besides that your dom (which is always expensive to render) is way to big, the layout manager of ExtJs is way to busy and I can't tell what is going wrong because all of this.
Take a look at this code. It has exactly the same result, is much cleaner and your dom is much smaller.
Ext.onReady(function() {
new Ext.form.Panel({
id: 'form',
closable: true,
floating: true,
bodyPadding: 10,
width: 500,
items: [{
xtype: "fieldset",
padding: 5,
labelWidth: 140,
layout: 'anchor',
defaults: {
xtype: "textfield",
anchor: '100%',
margin: 5
},
collapsible: true,
title: "groupbox",
items: [{
name: "SNAME",
fieldLabel: "Name:"
}]
}],
renderTo: Ext.getBody()
});
});

ExtJS viewport one item accessing another item

I have create a viewport in ExtJS with several layouts (west, center, north). One of these is a grid to which I've added a click handler. This click is supposed to open an HTML or PHP file in one of the layout, but I am not sure how to access the item in the center from the click handler in the west.
Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items: [{
region: 'north',
border:false,
collapsible: false,
resizable:false,
title: 'North',
split: true,
height: 30,
html: 'north'
},{
region: 'west',
collapsible: true,
title: 'Navigation',
split: true,
width: '10%',
xtype: 'gridpanel',
itemid:'projectgrid',
hideHeaders: true,
columns: [{header: 'NID', dataIndex: 'NavName', flex: 1}],
store: navStore,
listeners: {
itemclick: function(dv, record, item, index, e) {
alert(record.get('NavPage'));
}
}
},{
region: 'center',
layout: 'border',
border: false,
id: 'renderArea',
items: [{
region: 'center',
html: 'center center',
title: 'Center',
items: [cw = Ext.create('Ext.Window', {
xtype: 'window',
closable: false,
minimizable: true,
title: 'Constrained Window',
height: 200,
width: 400,
constrain: true,
html: 'I am in a Container',
itemId: 'center-window',
minimize: function() {
this.floatParent.down('button#toggleCw').toggle();
}
})]
}]
}]
});

If you give the component you want to access an itemId of foo, you can do something like this, navigate up to the viewport, then down to find the appropriate viewport child.
dv.up('viewport').down('#foo')

How to fit gridPanels columns?

I have application using ExtJs 3.4.
I have this construction:
westPanel-TabPanel:
var westPanel = new Ext.TabPanel({
id: "west",
//xtype: "tabpanel",
//layout:'fit',
activeTab: 0,
region: "west",
border: false,
width: 278,
split: true,
collapseMode: "mini",
items: [mapList,structure,cadastr,search]
});
Search - FormPanel:
var search = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: 'Поиск',
bodyStyle:'padding:5px 5px 0',
//width: 600,
//layout:'fit',
items: [{
xtype:'textfield',
fieldLabel: 'Диспечерское наименование',
name: 'name_dispather',
anchor:'100%',
enableKeyEvents: true,
listeners: {
'keyup': function(e) {
if(e.getValue().length==4){
searchStore.load({params:{'name':e.getValue()}});
}
}
}
},searchTab]
});
SearchTab - GridPanel:
var searchTab = new Ext.ux.grid.livegrid.GridPanel({
store: searchStore,
region: 'center',
cm: searchCm,
layout: 'fit',
selModel: new Ext.ux.grid.livegrid.RowSelectionModel(),
stripeRows : true,
view: myView,
height: 390,
loadMask: true,
id: 'searchTab',
title:'Найденные объекты',
autoScroll: true,
});
And i have a problem:
Have to make last column's width to whole panel's width?
UPDATE
I try autoExpandColumn. its works but its not idial:
How to fix it?

You can achieve this with the flex config.
You can do it on one column only:
columns: [{text: "Column A", dataIndex: "field_A", flex: 1}]
Or you can do it as default on all the columns:
columns: {
items: [
{
text: "Column A"
dataIndex: "field_A"
},{
text: "Column B",
dataIndex: "field_B"
},
...
],
defaults: {
flex: 1
}
}

Try with:
autoExpandColumn : String
The id of a column in this grid that should expand to fill unused space.
This config option you have to provide for your searchTab (I mean the grid panel).
EDITED:
viewConfig:{
scrollOffset: 0,
forceFit: true
},
This will remove that gap left for scrollbar. This you need to mention for your searchTab (I mean the grid panel).