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
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)
Sencha documentation says:
If docked items, the weight will order how the items are laid out. Here is an example to put a Ext.toolbar.Toolbar above a Ext.panel.Panel's header ...
I now want to show a container below the buttons config. So I have made a simple fiddle to apply the knowledge of the docs:
https://fiddle.sencha.com/#view/editor&fiddle/26m0
But it doesn't work; the weight is not applied whether I use a big or a small number. Why isn't this working?
The dock config for your container does not have any impact. From the docs:
The side of the Ext.panel.Panel where this component is to be docked
when specified in the panel's dockedItems config.
Your container is not inside a dockedItems config. Also it seems that the bigger the weight, the more higher the item will be rendered.
Ext.create('Ext.window.Window',{
width:300,
items:[{
xtype:'container',
html: 'Normal text'
}],
dockedItems: {
xtype: 'container',
dock: 'bottom',
weight: -10,
html: 'Some text that goes below the buttons'
},
buttons:[{
text: 'Some button',
weight: 10
}]
}).show();
Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/26m8
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 want to add Ext.button.Split into panel's header instead of title. It must be something like switcher of a panel's content and title of the same panel together.
Is there any option in extjs 4 to do that? Or is there better solution instead of Split button? Unfortunately, switcher in panel header is the key requirement, so it must be placed there.
Below works for me ExtJs 4.2.2
{
xtype: 'panel',
......
header: {
titlePosition: 0,
items: [
{
xtype: 'splitbutton',
}
]
}
}
Add the header object to your panel with your tools and add items for buttons.
Ext.create('Ext.panel.Panel', {
width: 300,
height: 200,
renderTo: Ext.getBody(),
header: {
// if you want your button positioned on the right hand side add
// titlePosition: 0,
items: [{
xtype: 'splitbutton',
text: 'test'
}]
}
});
I'm following examples in the "ExtJS in Action" book and I ran into a problem with one of them. The code intends to add new panels to a window, unfortunately when the panels being added are collapsed by default, they are not rendered correctly.
Here is the code in question:
var childPnl1 = {
frame: true,
height: 50,
html: 'My First Child Panel',
title: 'First children are fun'
};
var myWin = new Ext.Window({
height: 300,
width: 300,
title: 'A window with a container layout',
autoScroll: true,
items: [
childPnl1
],
tbar: [
{
text: 'Add child',
handler: function() {
var numItems = myWin.items.getCount() + 1;
myWin.add({
title: 'Child number ' + numItems,
height: 60,
frame: true,
collapsible: true,
collapsed: true,
html: 'Yay, another child!'
});
myWin.doLayout();
}}
]
});
myWin.show();
When I run it, I get the result presented in this fiddle:
http://jsfiddle.net/PHaP4/
When I hit the 'Add child' button, the collapsed panels are rendered as very narrow elements, as if width was not properly set.
Is this a bug in Ext or is there a new way of doing this properly in ExtJS4?
The new public 4.0.7 release seems no to have this bug fixed yet.
Looks like a bug in ExtJS 4.0.2, and appears to be fixed in ExtJS 4.0.5. Here is what I found in the release notes:
[EXTJSIV-2547] - Child components not rendered.sized in initially
collapsed, uncontained Panel.
My job has a premium account, so I was able to download and check 4.0.5. You'll have to wait for the general release, though.