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 shadow bug when dragging panels

I have three panels in my Ext JS project; That is one panel as a parent panel and two others are child panels. I've set the child panels to be draggable.
As you can see in the code below:
extend: 'Ext.tree.Panel',
requires: ['Ext.data.TreeStore'],
collapsible: true,
border: false,
draggable: true,
resizable: true,
floating: true,
constrain: true,
renderTo: Ext.getBody(),
store: new Ext.data.TreeStore({
//data.jason
}),
listeners: {
move: 'onDrag'
}
//onDrag function is:
onDrag: function(stick)
{
stick.dd = new Ext.dd.DDProxy(stick.el.dom.id,'group');
drag = stick;
drag.anchorTo(Ext.getBody(),"tl-bl?");
drag.setHeight(490);
drag.setMinHeight(200);
}
My problem is that when I drag the child panels they leave some shadow on the former place:
How can i solve this?

Extjs has a habit of not updating its shadows.
Try drag.syncShadow();

Auto Scroll is not working in viewport in Ext JS

I have to allow scrolling in the view port items. I tried the below code. But its not working.
var viewport = new Ext.Viewport({
layout :'column',
applyTo : 'divPanel',
items : [{
title: 'title',
collapsible: true,
autoScoll: true,
columnWidth: .57,
items: [grid],
width: 300
},{
columnWidth: .01,
},{
columnWidth: .42,
autoScoll: true,
collapsible: true,
items:[Panel],
width: 250
}]
});
Any help is must appreciated..thankz

In order to have a scroll, you must define a height on the components that are inside the ViewPort.

expand Ext JS GridPanel column width

I using Ext JS 2.3.0 and have a GridPanel that looks like this:
I want to expand the width of the column such that the scroll bar is pushed over the extreme right of the panel, thus eliminating the empty space to the right of the scroll bar.
The relevant code is shown below:
var colModel = new Ext.grid.ColumnModel([
{
id: 'name',
header: locale['dialogSearch.column.name'],
sortable: true,
dataIndex: 'name'
}
]);
var selModel = new Ext.grid.RowSelectionModel({singleSelect: false});
this._searchResultsPanel = new Ext.grid.GridPanel({
title: locale['dialogSearch.results.name'],
height: 400,
layout: 'fit',
stripeRows: true,
autoExpandColumn: 'name',
store: this._searchResultsStore,
view: new Ext.grid.GridView(),
colModel: colModel,
selModel: selModel,
hidden: true,
buttonAlign: 'center',
buttons: [
{
text: locale["dialogSearch.button.add"],
width: 50,
handler: function () {
}
},
{
text: locale["dialogSearch.button.cancel"],
width: 50,
handler: function () {
entitySearchWindow.close();
}
}
]
});

You should use the forceFit config for the grid view:
this._searchResultsPanel = new Ext.grid.GridPanel({
title: locale['dialogSearch.results.name'],
height: 400,
layout: 'fit',
viewConfig: {
forceFit: true
}, ....
I'm not sure if this isn't redundant so you can remove this part view: new Ext.grid.GridView(),

The problem is not the column but the grid itself which does not stretch to fill the window body completely.
Put the layout: 'fit' property onto the window config instead of onto the grid config (where it needs to be removed). You should also remove the height property because the grid height will determined by the window's size.

Add
flex: 1,
to one of the the columns config

ExtJS: ViewPort with vertical scroll bar

I have 4-5 grid panels, one form panel and want to put it into one viewport.
Here the code:
var panel = new Ext.Viewport({
layout: 'vbox',
items:[SearchForm,1_grid_panel,2_grid_panel,3_grid_panel]
});
It woks very well, but im need horizontal scroll box because 3rd grid panel located under visible area. How I can add this scroll box?
Update: Example of one grid
var 1_grid_panel = new Ext.grid.GridPanel({
store: some_store,
flex:2,
height: heightOfGrid,
autoExpandColumn: 'id_md_dog',
plugins: expander ,
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: new Ext.PagingToolbar({
pageSize: 100,
store: some_store,
displayInfo: true,
displayMsg: 'text',
emptyMsg: "No topics to display"
}),
columns: []
});

Have you tried autoScroll: true ?

Ah, I really forgot. You need to describe next app structure: Viewport->Panel->items(your grids). Panel must have layout: fit
If I correctly understand your problem.