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)
Related
I need to align header item in panel right after the title, like this:
[title][item]============================[<<]
But got this:
[title]============================[item][<<]
I'm using extjs 4.2.1
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
width: 500,
height: 500,
collapsible: true,
renderTo: Ext.getBody(),
header: {
titlePosition: 0,
title: "title",
items: [{
xtype: 'button',
text: 'test'
}]
}
});
});
You could position it with a class. fiddle
For version 4.2.1, the title component is hard-coded with a flex of 1 which pushes the other items and tools to the far side. We can intercept its addition to the container and remove the flex and add our own spacing with margin. ExtJS 4.2.1 Fiddle
If you need to keep tools or other items to the far side you can add your items wrapped in a container with a flex of 1.
Version 5 introduced Ext.panel.Title class, we can set the title config as an object which is passed to the internal Ext.panel.Title component. We can set the flex to undefined as shown in this ExtJS 5+ Fiddle
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.
I have a Panel layout with a TreePanel in one region. A user clicks on an node in the tree and a TabPanel should be displayed in another region with information, editing tools etc. for that tree node.
I have a working layout with tree panel and an on('click') event that fires. However, I don't seem to be able to get the TabPanel to be able to render in the layout.
If I allow the TabPanel to render as part of the panel rather than in the on click event it works as expected.
I'm not sure what I'm missing in terms of rendering the tab panel into a named element. Any help would be appreciated.
Below is the code in question.
Many Thanks
Stephen
var treePanel = new Ext.tree.TreePanel({
id: 'tree-panel',
title : 'Site Tree',
region : 'center',
height : 300,
minSize: 150,
autoScroll: true,
rootVisible: false,
lines: false,
singleExpand: true,
useArrows: true,
dataUrl:'admin.page.getSiteTreeChildren',
root: {
nodeType: 'async',
text: 'nowt here',
draggable: false
}
});
treePanel.on('click', function(n){
var sn = this.selModel.selNode || {}; // selNode is null on initial selection
renderPageTabs(n.id);
});
function renderPageTabs(resourceid) {
pageTabPanel.render('contentpanel');
alert('resourceid'+resourceid);
}
var pageTabPanel = new Ext.TabPanel({
activeTab: 0,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Page Overview',
html: 'This will be the page overview detail tab'
},{
title: 'Content Editor',
html: 'This will be the page editor tab'
},{
title: 'Property Editor',
html : 'This will be the property editor tab'
},{
title: 'Workflow',
html : 'This will be the workflow tab'
}
]
})
var contentPanel = {
id : 'contentpanel',
region : 'center',
margins : '0 0 0 0',
border : false
};
// TODO perhaps the tool bar should be in a north region of this panel
var dashPanel = new Ext.Panel({
layout : 'border',
height : 500,
items : [{
layout : 'border',
id : 'site-nav',
region : 'west',
collapsible : true,
border : false,
split : true,
margins : '0 0 0 0',
width : 275,
minSize : 100,
maxSize : 500,
items : [actionPanel, treePanel]
}, contentPanel],
renderTo : 'dashboardPanel'
});
I don't think you are using the render method in the correct way.
Tab Panel: render
If you are using a Container object to house this Component, then do not use the render method.
Is your tree going to allow a tab to be opened any time a tree node is clicked? Will there be multiple tabs at one time? If so, I think maybe you just want to use .add(), instead of .render(). After you do .add(), you will also need to call .doLayout() on the container panel as well so it will show up.
You may need to alter your renderPageTabs function so that it builds the pageTabPanel object inside of it for each tab, then uses .add() to place it in the contentpanel object.
I assume pageTabPanel isn't defined at the time you trigger the handler.
Try to remove the var keyword in front of "var pageTabPanel =" to make it a global variable.
If that works, it's a scope/variable issue.
The better solution is to give the tabpanel an id and call Ext.getCmp('tabpanelid').render('contentpanel') in your renderPageTabs method.
Hope that helps.
Regards,
Steffen
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.