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 3.4 column not fully expanding when window is maximised

I am creating an EXT application that uses several Panel components. One of them is a GridPanel containing a single Column. In my GridPanel I have set the autoExpandColumn config to this Column because one of my Panel components is collapsible, so when it is collapsed the other Panel components expand and the Column also expands. When the Window is at its normal size and the collapsible Panel is collapsed, the Column does expand to take up the full width of the GridPanel. However, when the Window is maximised, the column does not expand, but stays at the same width that it was when the window was maximised and the collapsible Panel was not collapsed (this is bigger than when the Window is at its normal size). The Window has a BorderLayout which is why the first two Panel components use the region property.
Here is the relevant code:
config for the Window:
title: 'Engineering Works',
width: 915,
height: 550,
// minHeight: 550,
// minWidth: 915,
resizable: false,
padding: 10,
shim:false,
// monitorResize: true,
confirmClose: true,
animCollapse:false,
constrainHeader:true,
style: {
margin: "10px"
},
layout: "border",
items: [filterFormPanel,centrePanel]
Collapsible panel:
var filterFormPanel = new Ext.FormPanel({
region: "west",
monitorResize:true,
width: "38%",
title: "Filter",
collapsible: true,
id: windowId + "filter",
items: [stationsPanel, datesPanel, daysPanel, impactPanel, searchButton]
});
centrePanel (contains two other panels, the first of which (searchResultsPanel) is the GridPanel explained above
var centrePanel = new Ext.Panel({
region: "center",
layout:'border',
monitorResize:true,
items: [searchResultsPanel,individualResultPanel]
});
searchResultsPanel (contains a rowclick listener which I've omitted because it's very long and not relevant to this problem):
var searchResultsPanel = new Ext.grid.GridPanel({
title: "All Results",
id: windowId + "allresults",
border: false,
monitorResize:true,
autoScroll: true,
region:'center',
forceFit: true,
colModel: myColumnModel,
autoExpandColumn: windowId + "summarycolumn",
store: mystore
});
It's worth pointing out that the GridPanel itself does expand properly at all times, it's just the Column inside it does not take the full width of the GridPanel when the Window is maximised and the filterFormPanel is collapsed.
I have tried, without success:
Putting the searchResultsPanel inside its own parent Panel and giving it a layout of fit, as per this question (and some others). In any case I realised this is probably moot because this concerns the GridPanel not expanding, a problem which I do not have.
Setting the width config of the Column to be equal to the width of the GridPanel when the collapsible Panel is collapsed and expanded. This did not solve my problem and caused the Panel components on the right (inside centrePanel) to have horizontal scroll bars when the collapsed Panel was expanded.

I solved this problem by removing the autoExpandColumn config in my GridPanel and surrounding the forceFit config with viewConfig because it's a config of the GridView component. So my GridPanel now looks like this (minus the listeners):
var searchResultsPanel = new Ext.grid.GridPanel({
title: "All Results",
id: windowId + "allresults",
border: false,
monitorResize:true,
autoScroll: true,
region:'center',
colModel: myColumnModel,
viewConfig: {
forceFit: true
},
store: mystore
});

Extjs focused cell moving with scroll

I am using extjs grid Panel with extjs plugin CellEditing, its working fine now I am facing an issue if grid cell is focused and user tried to use any scrollbar with in page, focused cell remain fixed and other grid moving with scroll, as stop scrolling fixed cell moved to its original position inside grid. Need help in this regard.
Screenshot:
Code:
Ext.define('XPL.view.AccountGridCtr', {
extend: 'Ext.grid.Panel',
alias: 'widget.accountgridctr',
menuDisabled: true,
hideHeaders: true,
cls: 'forecasting_grid',
sortableColumns: false,
scroll: 'none',
rowEditor: Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
cls: 'editable_input'
}),
columns: [],
initComponent: function () {
this.plugins = [this.rowEditor];
this.callParent(arguments);
}
});

ExtJS: HTMLEditor loses content on Accordion re-expand

I have an accordion panel with typical settings. In each of the panels there used to be a textarea and everything worked fine.
Now I replaced each textarea with an htmleditor. When I collapse a panel and re-expand it, the content of the htmleditor is lost. This didn't happen when I used textarea. How to solve this problem?
Edited: also, when re-expanded, the htmleditor freezes, and I can't input anything. But the buttons work (bold, insert link, switch to source editing, etc). What's more strange, when I toggle 'switch to source' button twice, the content reappears, in a different font!
Using the Accordion:
myDataStore.load({params: ...}, callback: onLoadSuccess);
......
onLoadSuccess: function() {
// for each data item, create a new panel and add it to myListPanel
for (var i = 0; i < myDataStore.getTotalCount(); i++) {
var dataItem = myDataStore.getAt(i);
var newFormPanel = new Ext.FormPanel({
labelAlign: 'top',
items : [{
xtype: 'htmleditor',
fieldLabel: 'Content',
autoScroll: true,
enableFont: false,
enableLists: false,
value: dataItem.get('content');
}],
buttons: [{...}]
});
// add this panel to the accordion
myListPanel.add({
title: 'Another panel',
items: [newFormPanel]
});
}
myListPanel.doLayout();
}
Current Accordion config:
var myListPanel = new Ext.Panel({
autoHeight : true,
autoWidth: true,
autoScroll : true,
layout : 'accordion',
layoutConfig : {
titleCollapse: true,
animate: true,
fill : false,
autoWidth: true,
hideCollapseTool: true,
},
});

For me a htmleditor does not lose the content when collapsing and expanding it.
However, one solution would be to listen for the collapse event and store the current editor content to a property.
On the expand event, you place it again in the editor.

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.