We Keep Coding

Scrollbar location is wrong in layout : fit

I have a Panel and in that panel I am loading grid dynamically.
Here is code for panel
{
xtype: 'panel',
region: 'center',
frame: true,
scrollable: true,
itemId: 'MyGrid',
reference: 'MyGrid',
layout: {
type: 'vbox',
align: 'stretch'
},
items: []
}
and Sample of grid.
Ext.define("MyApp.view.MYGrid", {
extend: 'Ext.grid.Panel',
alias: 'widget.MyGrid',
requires: [
'Ext.grid.filters.Filters',
'Ext.form.field.ComboBox',
],
emptyText: 'No data available.',
disableSelection: true,
margin: '3 3 0 3',
collapsible: true,
multiSelect: false,
closable: true,
columnLines: true,
uniqueFields: [],
});
initComponent: function() {
var me = this;
me.fields = me.prepareFields(me.headersXmlDoc);
me.columns = me.prepareColumns(me.headersXmlDoc);
me.store = me.prepareGridStore(me.headersXmlDoc);
this.callParent(arguments);
},
Now when Grid have enough data then both horizental and vertical scroll is coming correctly but When grid have less data with more columns scrollbar is coming down. I supposed just beow the last record but it comming in down.
All the grid is taking same height though it have a less record.
Example pic
https://i.stack.imgur.com/RKdTb.png
I want scrollbar just below the last data. By debugging I found layout : fit
But not sure how to overcome out from that.
Can anybody help me that. Thanks for help.

You need to apply overflowY as true for grid.I don't think there is some problem with fit layout.If above config doesn't work share some fiddle.

ExtJS 4.2.1 How to organize Viewport space

Here is code which works fine:
"ObjectsGrid" is a Ext.grid.Panel component with lots of rows.
Ext.application({
requires : ['Ext.container.Viewport'],
name : 'crm',
appFolder : 'app',
controllers : ['Controller'],
launch : function() {
Ext.create('Ext.container.Viewport', {
id : "MainViewPort",
layout : 'fit',
applyTo : Ext.getBody(),
items : [
{
xtype: 'ObjectsGrid'
}]
});
}
});
But when I try to organize Viewport space by adding some panels (with same ObjectsGrid inside), all grid rows disappears. Looks like grid has moved outside the Viewport:
Ext.application({
requires : ['Ext.container.Viewport'],
name : 'crm',
appFolder : 'app',
controllers : ['Controller'],
launch : function() {
Ext.create('Ext.container.Viewport', {
title : 'main panel',
layout: 'fit',
bodyStyle: 'padding:5px',
applyTo : Ext.getBody(),
items: [
{
xtype: 'panel',
border: false,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
html: 'upper panel',
height: 20,
margin: '0 0 5 0'
},{
xtype: 'ObjectsGrid'
}
]
}
]
});
}
});
My grid component:
Ext.define('crm.view.ObjectsGrid' ,{
extend: 'Ext.grid.Panel',
id : "ObjectsGrid",
alias : 'widget.ObjectsGrid',
store : 'ObjectFormStore',
title : 'title',
stripeRows : false,
.....
Whats wrong with my grid?
And is it normal for big application to organize Viewport space with panels component?
There must be some "best practice"?

Whats wrong with my grid?
It is missing flex config value. Try this:
{
xtype: 'ObjectsGrid',
flex: 1
}
is it normal for big application to organize Viewport space with
panels component?
It's OK if you need a panel and it is actually Ext.panel.Panel that you need (versus say just an Ext.container.Container). In your example, the panel bearing vbox layout looks redundant: you could specify your vbox layout on the viewport directly (instead of fit).
There must be some "best practice"?
Decide what you need from usability/UX perspective. Build it with minimal complexity. Keep everything necessary / reasonable / rational. Don't let redundant stuff in, etc. etc.
P. S. If you are starting a new app from scratch, better use the latest version of ExtJS.

How to add Columns in Ext.js within ext.panel.Panel

Im designing a screen in which the header has a button with certain functionality. To acheive this I used
Ext.panel.Panel
Now I want to add columns within this screen below the header.
This is my code:
var screen = Ext.create('Ext.panel.Panel', {
title: 'Search',
tools: [{
xtype: 'button',
text: 'Click',
//code here for button functionality
}],
layout: 'column',
items: [{
text: "column1",
width: .5
}, {
text: "column2",
width: .5
}]
})
The error Im getting is that I can get the button to work on the header, but cannot see the columns. Is there a solution to fix this?
I have also included the image. The black rectangle shows how my columns are appearing.

In both Ext 4.1.1 and Ext 4.2.0 the following changes are required in your code:
Rename property text to title in the columns config
In the same config, rename property width to columnWidth
Add renderTo: Ext.getBody() attribute
jsfiddle seems to impose some limitations on how extjs panel is rendered. While I am not sure what's the issue with jsfiddle, here is a Plunker link that displays panel as expected.
IMO, ExtJs GridPanel is a better way to add tool bar to your panel and display tabular data. Read more about it in Sencha docs

I finally worked out the solution for my question. I needed a button functionality in the header and also columns which could have functionality like arranging the items in ascending/descending order etc (basically the grid.column)
var screen = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Search',
tools: [{
xtype: 'button',
text: 'Click',
//code here for button functionality
}],
items:
[{xtype: 'gridpanel',
columns: [
{
header : "Column 1",
width: .5
},
{
header : "column2",
width: .5
}],
}],
});

Resizing child items of vbox

We recently updated our ext-js from 4.1 to 4.2. On 4.1 following code made it possible to resize child items of vbox used here. We could drag border between those children, and both items would resize.
In 4.2 there is no way to resize those children. Not even cursor changes the shape when pointing at correct space.
Ext.define('Example.view.NavPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.exampleNavPanel',
requires: ['Example.view.example.List', 'Example.view.example2.List', 'Example.view.paneledycji.EditTabPanel'],
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start'
},
items: [
{
xtype: 'panel',
title: 'Navpanel',
collapsible: true,
flex: 1,
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{xtype: 'exampleList', flex: 1},
{xtype: 'example2List', flex: 3}
]
},
{
xtype: 'editTabPanel',
flex: 1
}
]
});
I tried adding
resizable:true
to first child. It made the cursor change shape when pointing at the border, and I could drag it around... but the children wouldn't resize. When I removed flex from first child I finally could resize the items, but it had few problems:
I could resize first item both in height and width, I want only height, and it's how it worked in 4.1
the vbox would give as much space as needed for first child, and if first child was too big 2nd child wasn't even in the window, making it impossible to see, or to resize first child, as the border was offscreen
setting minHeight on either child had completely no effect
I want to be able to set minimum and maximum height for upper child, ideally in percentage, and disable width resizing. Ideally I would also like to be able to set default sizes for both children. I can't work it out using any combinations of configs listed at docs.sencha.com. What do I have to do to accomplish this effect?

You can remove the flex attribute after the initial layout using the boxready event. This way, you benefit from the initial auto sizing, but it won't prevent the component from being resized later.
For your second issue, use the resizeHandles option to specify the sides that can be grabbed for resizing.
Ext.define('Example.view.NavPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.exampleNavPanel',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
title: 'Navpanel',
flex: 1,
resizable: true,
resizeHandles: 's',
listeners: {
single: true,
boxready: function() {
delete this.flex;
}
}
},{
xtype: 'component',
html: 'editTabPanel',
flex: 1
}]
});

Collapsed panel in border-layout: Permanent expand on title-click

i have 2 panels inside a border-layout. The second one is collapsible with configs 'collapsed' and 'titleCollapse' set. When i click on the title it just shows the panel "temporary" which means that it doesn't stick but collapses automatically after i click anywhere else inside my window. It kind of floats in...
Working example: http://jsfiddle.net/suamikim/LNfm8/
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
width: 500,
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
title: 'panel1',
region: 'center',
flex: 1
},{
xtype: 'panel',
title: 'panel2',
region: 'south',
flex: 1,
collapsible: true,
collapsed: true,
animCollapse: false,
collapseDirection: Ext.Component.DIRECTION_BOTTOM,
titleCollapse: true
}]
}).show();
});
I guess this is a feature of the border-layout because if i put the 2 panels into a box-layout the collapsed panel permanently expands after a click on the title-bar.
I'm aware that the panel would stay expanded if i click on the "double-arrow" or if i click the title a second time after it has been "floated in" but i just don't want this floating-behaviour at all because i experienced it as pretty buggy so far.
I would really appreciate if anyone could tell me how to turn that feature of the border-layout off.
Thanks

Add after titleCollapse property
floatable: false
Look at the fiddle