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: 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 - Javascript - ComboBox in Grid (Cell editing plugin) - Drop down list behind the Grid/Window

I have a grid with cell editing plugin on it. When i click the cell i want to edit, sometimes the dropdown list of the combo box is behind the grid/window (I can not see it, but if i modify the window size i can see the combo box items behind it).
My code looks like this (I have a window which contains this form):
items: [{
xtype: 'form',
items: [
me.currentMultipleValuesGrid = Ext.create('Ext.grid.Panel', {
store: me.gridStoreToValidate,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
delay: 10
})],
listeners: {
validateedit: function (editor, cell, eOpts) {
//cell.cancel = true;
}
},
columns: [{
header: GTR(CLNAME(me), 'colSource.Text', 'Source'),
dataIndex: 'source',
flex: 1
}, {
dataIndex: 'name',
header: GTR(CLNAME(me), 'colLinkDestination.Text', 'Link destination'),
editor: {
xtype: 'combobox',
queryMode: 'local',
valueField: 'nr',
displayField: 'name',
store: me.comboBoxEditorStore,
listeners: {
change: function (thisCmb, newValue, oldValue) {
},
beforerender: function (thisCmb, eOpts) {
}
}
},
flex: 1
}, {
dataIndex: 'linkdestination',
hidden: true
}]
})]
}]
I think it is a layout problem, so I tried different layouts (anchor and fit) assigned to window, grid or form, with various combinations of them. No success so far. Any ideas? Thank you. I am using Extjs 4.0.7

I solved this a while ago. Came back to post the answer, in case someone needs it. It seems it is a Sencha bug, which causes the drop down list to be displayed behind the window, when the window is modal (like it was in my case). I managed to make a workaround, by assigning a css class to the drop down list of the combo, by adding this in combo settings :
listConfig: { cls: 'clsZIndexMax' }
where clsZIndexMax is my css class containing z-index: 100000 !important;
PS: I had this bug in version 4.0.7, don't know if they already solved it in future versions.

Disable grid panel with checkboxes

My requirement is that to disable a grid panel inside field set or grid rows on certain condition. The grid has more than 20 items and there should be a scroll bar to view all the elements of the grid. If I use disabled property of grid panel, then the scroll bar also gets disabled. But i need the scroll bar to be enabled, so that user can see all items of grid.
For above i coded with feildset autoscroll: true and layout:fit. But on disabling the grid panel, the scrollbar of fieldset also gets disabled because of layout:fit property of fieldset. Is there any way to achieve the requirement?
Code:
Ext.applyIf(this, {
border : false,
frame : false,
bodyStyle : 'padding:12px 15px 0px',
labelAlign : 'top',
columnWidth : 0.5,
heigth : 350,
layout : 'form',
items: [{
xtype: 'fields',
id: 'fields',
layout: 'fit',
height: 321,
autoScroll: true,
title: 'Element list',
items: mygridPanel
}]
})

I've made up a small demo on jsFiddle for you to look at:
http://jsfiddle.net/CGtqp/
does this help you solve your issue?

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.