My Window has 2 objects: a gridPanel and a formPanel. The formPanel is always on display and the gridPanel (which sits above it) is only shown on occasion.
The issue I'm having is that autoScroll is not working at all.
#Window Config#
UserSelection = Ext.extend(Ext.Window, {
id: 'comWin',
title: 'User Selection',
width: 700,
height: 300,
autoScroll: true,
maximizable: true,
autoDestroy: false,
closeAction: 'hide'
#Items added to config at creation#
this.add(comGrid);
this.add(comForm);
#When Grid is shown#
comGrid.show();
comWin.doLayout();
autoScroll is just a CSS wrapper on overflow: auto.
http://jsfiddle.net/HpDAm/ in this example code changing autoScroll to true/false will show/hide scrollbars.
Related
I have created a viewport in ExtJS 6.2.0 like so :
Ext.define('Mine.view.Main', {
extend: 'Ext.container.Viewport',
alias: 'widget.main',
id: 'mainView',
xtype : 'mainV', ...
With a region south collapsible panel.
I want to add a fixed Header at the top so I added as an item of the viewport this :
{
region: 'north',
//collapsed: true,
xtype: 'panel',
height: 30,
collapsible:false,
layout: 'border',
collapsed: false
// titleCollapse: true
},
But I am not getting a fixed header, instead I am getting a collapsible north window.
How to achieve this?
Thanks!
My bad i was defaulting my viewport to have item panels collapsible. So i got what i wanted by removing the collapsible true from defaults config in my viewport and setting items with property collapsible in a customized way (true or false each depending on the case)
I have a popup windows which is suppose to show an email (which is in html) in the centerPanel. That panel is in the center region of the border layout.
It absolutely has autoscroll set to true and I know that my test data is much larger than the panel. But I can't get it to scroll.
Is there, perhaps, a better way of setting this up? I've tried some other object like a label, display, textarea etc. as an item in the center panel and set that object with autoscroll : true with no success
popup = new Ext.Window({
width: 900,
height: 320,
resizable: true,
draggable: true,
id: 'popupWindow',
layout: {
type: 'border'
},
items: [
// ...
{
xtype: 'panel',
region: 'center',
id: 'centerPanel',
autoscroll: true,
margin: '0 5 0 5',
html: jsonData.email
},
// ...
]
});
It should be autoScroll, not autoscroll.
Got it!
I had to add overflowY: 'scroll' to the center panel.
Thev's answer is correct; however, it depends upon which version of Ext JS you are using (read below).
autoscroll means nothing to Ext JS, specifically. It becomes a new Javascript property entirely distinct from autoScroll due to the casing.
Watch out, though: Ext's 5.1 Documentation specifies that autoScroll is now deprecated and that scrollable (with the appropriate configuration) should be used, instead.
I have EXTJS panel inside a viewport east region,
var viewport = new Ext.Viewport({
layout: 'border',
id:'mainviewport',
monitorResize:false,
items: [{
region: 'east',
xtype: 'panel',
id:'east-panel',
header : false,
headerAsText: false,
title: 'east panel',
collapsible: true,
split: true,
minSize: 305,
maxSize: east_panel_width,
margins: '53 0 0 0',
cmargins:'53 0 0 0',
collapsed: true,
autoScroll: true,
layout: 'fit',
html:'<div id="abc" style="height:100%;overflow-x: hidden; overflow-y: auto;"></div>'
}]
});
I dont want the title header so i gave the property header: false, headerAsText: false the title bar get hided, but i want the collapsible option for this. How can i get that collapsible function.
Is that possible to hide only the title text and the background css of that, without distrubing the collapsible panel extender option.
Thanks in advance.
Even with header: false, headerAsText: false you have an arrow in the middle of the splitter bar. It works as a collapsing control of the panel.
In the ExtJS 3, how to set a grid to auto width? I have tried the codes below, it doesn't work.
Thanks
var exceptionGrid = new Ext.grid.GridPanel({
store: exceptionStore,
loadMask: true,
frame: true,
// defaultWidth: 450,
//height: 560,
autoHeight: true,
autoWidth: true,
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [{
header: 'COL1',
dataIndex: 'COL1'
}, {
header: 'COL2',
dataIndex: 'COL2'
}, {
header: 'COL3',
dataIndex: 'COL3'
}, .....]
}),
viewConfig: {
forceFit: false
}
});
From extjs 3 docs:
GridPanel
Notes:
- Although this class inherits many configuration options from base
classes, some of them (such as autoScroll, autoWidth, layout, items,
etc) are not used by this class, and will have no effect.
- A grid requires a width in which to scroll its columns, and a height
in which to scroll its rows. These dimensions can either be set
explicitly through the height and width configuration options or
implicitly set by using the grid as a child item of a Container which
will have a layout manager provide the sizing of its child items (for
example the Container of the Grid may specify layout:'fit').
Grid's width by default takes containers width of course if it was not specified.
Ext.grid.GridPanel#autoExpandColumn will help to expand one column in the grid taking the resting horizontal space. Also will be helpsul to look at Ext.grid.GridView's forceFit and autoFill adjusting widths of columns.
There are Multiple ways to do it based on your design
1.Try width: '100%' and autoHeight:true although autoHeight:true \ height: '100%' creates problem sometime, but width works fine always.
2.Use below code if your grid is the 'only' part of your iframe/web page
var viewport=new Ext.Viewport({
layout: 'fit',
monitorResize : true,
items: [exceptionGrid ]
})
3.If the problem is only with scroll bars,then use
viewConfig: {
forceFit: true
}
4.You can always set the width: window.screen.width - 20 (apply some math around it to make it according to your necessity) and similarly height.
Each of my 3 Extjs gridpanels do not expand horizontally within a tabPanel.
The each grid's properties:
id: grid_id,
ds: ds,
cm: cm,
loadMask: true,
view: grouping_view,
plugins: [expander, filters],
stateId: which + '-grid-stateId',
stateful: true,
stateEvents: ['datachanged', 'columnresize', 'columnmove', 'sortchange', 'columnvisible', 'columnsort', 'hide', 'show', 'expand', 'collapse'],
selModel: checkbox,
// height: 400,
width: GRID_WIDTH,
defaults: {autoHeight: true},
autoHeight: true,
collapsible: false,
animCollapse: false,
layout: 'fit',
TabPanel's properties:
id: 'tab_panel',
renderTo: 'tabs',
activeTab: 0,
enableTabScroll: true,
defaults: {autoScroll:true, authHeight:true},
plugins: new Ext.ux.TabCloseMenu(),
width: GRID_WIDTH + 2,
autoHeight: true,
items: [ // put items in tabpanel like this. adding via method call forces them to render/load befire user clicks on them
owned_grid,
managed_grid,
subscribed_grid
],
Layout is not a valid property for a GridPanel.
Try using:
viewConfig: { forceFit: true }
instead
I was searching the forums for a way to make my grid resize automatically but could not find the solution, nothing worked... and then I read the Ext Js GridPanel documentation: "
A grid requires a width in which to
scroll its columns, and a height in
which to scroll its rows. These
dimensions can either be set
explicitly through the height and
width configuration options or
implicitly set by using the grid as a
child item of a Container which will
have a layout manager provide the
sizing of its child items (for example
the Container of the Grid may specify
layout:'fit')."
..so I just set not the grid's layout, but the layout of the grids's PARENT to whatever value I want (in my case the parent container holds other things than only the grid, so I set layout : 'anchor', and then by setting the the anchor : '100% 100%' I make the grid expand as much as it can be).
and now I HAVE IT WORKING :D yayyyy!
It's the layout of the container that you have to set, ie:
var tp = new Ext.TabPanel({
items: [{
title: 'First tab',
layout: 'fit',
items: new Ext.GridPanel({ title: "Grid panel" })
},{
title: 'Second tab'
}]
});
Fit layouts mean that there is only one item in the container and it should expand to take all available space. Remove all explicit references to width, autoWidth, etc.