We Keep Coding

ExtJs - Dynamically changing expand and collapse buttons of panel

I have a docked panel in which am changing the dock position using the setDock method. In that docked panel, I also have collapsible buttons which should change as per to the dock position. I am updating the configs collapseDirection and expandDirection and calling out a method updateCollapseTool which lets me update the button.
But I get an issue after the following steps:
Change the dock position to left using the menu button.
Collapse the docked panel using the collapse button, then again expand it.
Again change the dock position to top.
Collapse the docked panel again => After this step my docked panel gets collapsed, but it seems to be collapsed in left direction. It should have collapsed to top and should show an expand button pointing in bottom direction.
If I perform the same steps by excluding the step 2, it works properly. Is there anything that am doing wrong or any other methods which lets me update my expand/collapse buttons properly ?
Here is my fiddle link.

You can use border layout and the the region with setRegion method, something like this:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
scrollable: true,
id: 'parentPanel',
xtype: 'panel',
height: 500,
layout: 'border',
items: [{
xtype: 'panel',
id: 'dockPanel1',
region: 'north',
title: 'Parent Dock Panel',
collapsible: true,
collapseFirst: false,
width: 300,
height: 200,
defaults: {
style: {
background: "orange",
border: "1px"
},
},
layout: "container",
tools: [{
text: "dock change",
xtype: 'button',
value: 'top',
menu: {
items: [{
text: 'top',
region: 'north'
}, {
text: 'left',
region: 'west'
}, {
text: 'right',
region: 'east'
}],
listeners: {
click: function (menu, item, e, eOpts) {
Ext.getCmp('dockPanel1').setRegion(item.region);
}
}
}
}],
items: [{
xtype: 'textfield',
text: 'item 1'
}, {
xtype: 'textfield',
text: 'item 2'
}, {
xtype: 'textfield',
text: 'item 3'
}]
}, {
xtype: 'panel',
region: 'center',
layout: "vbox",
items: [{
html: "<span style='font-size:20px;'>Child panel 1</span>",
bodyStyle: "background: lightgreen;",
xtype: 'panel',
height: "50%",
width: "70%",
padding: "5 5",
cls: 'overlayMenuCls'
}, {
html: "<span style='font-size:20px;'>Child panel 2</span>",
bodyStyle: "background: lightblue;",
xtype: 'panel',
height: "50%",
width: "70%",
padding: "5 5",
cls: 'overlayMenuCls'
}]
}],
renderTo: Ext.getBody()
});
}
});

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

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()
});
});

How do I center a button on a table and have that table fill a container in ExtJS?

I am new to ExtJS and I am having trouble centering a button in a container. I am basing my code off of the documentation on the Sencha website; however, I don't see a clear explanation for centering. below is what I have so far:
items: [{
html: content,
title: 'Navigation',
autoScroll: true,
border: false,
iconCls: 'nav'
}, {
title: 'Other',
border: false,
autoScroll: true,
iconCls: 'settings',
items: [{
xtype: 'container',
layout: {
type: 'table',
columns: 1,
tdAttrs: {
style: {
layout: 'fit',
padding: '5px 10px',
background: 'red'
}
}
},
items: [{
xtype: 'button',
width: '100%',
glyph: 72,
text: 'Logoff',
scale: 'large',
iconAlign: 'top',
buttonAlign: 'center'
}]
}]
}]
Here's a screenshot of my current website.
As you can see, it is left aligned and no matter what I try, I can't seem to center it in the column.

There is a user extension for centered layout, but you can also achieve it with the following vbox layout config:
layout: {
align: 'center',
pack: 'center',
type: 'vbox'
}

Sometimes css overide itself, for be very basic but quick just add somes
Inline and before your element. It's just the html code of a blank character..

You can add you own CSS class to button using cls property, like below
items: [{
xtype: 'button',
width: '100%',
glyph: 72,
text: 'Logoff',
scale: 'large',
iconAlign: 'top',
buttonAlign: 'center',
cls: 'yourclassName'
}]
Then define CSS class yourClassName
Hope this helps

ExtJS 3.4 vbox layout is not rendering correctly

I'm trying to render a GridPanel, and two regular Panels in a vbox layout (will update the Panels based on user actions later).
http://jsfiddle.net/auVez/
I have the store working OK
var store = new Ext.data.ArrayStore({
autoDestroy: true,
storeId: 'myStore',
fields: [
{name: 'categoryId', type: 'int'},
{name: 'categoryName', type: 'string'}
]
});
And the GridPanel was working OK before I started working with the vbox...
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header:'Category ID', width: 40, sortable: true, dataIndex: 'categoryId', hidden: true},
{header:'Cat. Name', width: 80, sortable: true, dataIndex: 'categoryName'}
],
flex: 10,
loadMask: true,
stripeRows: true,
viewConfig: { autoFill: true }, //This makes the columns span the screen onLoad
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
})
});
I've added a height to the vbox, because I read that it must have one...
var mainPanel = new Ext.Panel({
renderTo: 'myDiv',
frame: true,
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
height: '200px',
items: [
grid,
{
flex: 5,
title: 'Take Action',
id: 'SelectedItemPanel',
bodyStyle: {
background: '#ffffff',
padding: '6px 15px 0px 15px'
},
html: 'Please select item above to take action upon.'
},
{
flex: 5,
title: 'Preview',
id: 'SelectedItemPanel2',
bodyStyle: {
background: '#ffffff',
padding: '6px 15px 0px 15px'
},
html: 'Magic!'
}
]
});
But it still renders as an, approx, 10px height grey border, and doesn't take up 300px as requested.
I'm guessing I'm missing some overflow declaration or something, but this is frustrating, as I've spent ~4 hours I don't have on trying to get something so simple to work :-(

Hi problem is in height config
give height:300 (remove single quotes s)
see here jsfiddle link