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
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 want to put some label/fields in a dialog/window. See below
I would like to stretch the field part to maximum, and I would like to shrink the label to the allowed minimum.
I thought border layout would be the best in that situation :
{
xtype: 'panel',
//flex: 1,
margin: '3',
border: true,
layout: 'border',
items: [
{
xtype: 'label',
region: 'west',
text: 'label'
},
{
xtype: 'numberfield',
region: 'center'
}
]
}
However when I do that, the field disappears and even more strangely, the dialog moves to the (0,0) position in the frame. Ie. the dialog moves to the top left corner :
Am I not understanding something here? The dialog also uses a border layout. Ie the buttons are in a south panel. Is it maybe not allowable to use a border inside a border for a dialog? Is this an extjs bug?
Is there some other way to achieve what I want to do? I understand you can use fieldLabel on a textfield. But I wanted to have two seperate components so I could have more control.
I was wondering how I should start making a custom composite component. One that has a border layout, but for which its items show in the center region of the border layout. The following image shows what I'm trying to achieve:
In pseudo-code this would be:
Ext.define('App.custom.ContentView', {
extend: 'Ext.container.Container',
xtype: 'contentview',
layout: 'border',
northCmp: ..., // Custom north region component.
westCmp: ..., // Custom west region component.
centerCmp: ..., // Placeholder for the items it will have.
items: [] // Filled in by each implementation, shown in the center region.
});
Ext.create('App.custom.ContentView', {
layout: 'vbox', // Applies to center region of 'contentview'.
items: [
// Items that go into the center region of the 'contentview'.
]
});
I have looked through the ExtJS source code, and viewed a couple of examples at the Sencha Market; but I have not found an obvious example that does not include a lot of duplicate code.
Any help, or nudge in the right direction, would be greatly appreciated! :)
You should not do that. Please, don't let me be misunderstood, your intentions are good but the implementation you describe will grip in some point in the future. I know because I did something similar when I debuted with Ext. The idea of tuning the component declaration to your tastes/need/whatever may seem like a pleasant simplification... Unfortunately, in practice what you want to do is to give another meaning to an existing construct (items in your case). Here's what it will really bring you:
All code external to your application (that includes Ext, and Ext future releases!) will expect components/container to behave the classic way. That is, that the items of a container are really the items it contains, not the items of one of its children. Unexpected behaviour is to be expected.
You'll inevitably want to customize this component in some ways. You've already started, with the layout of the center region. If you rewrite the way the component work, you'll have to write some kind of config proxy to any feature you want to use. Big burden instead of a little saving. Doesn't worth it.
And finally, in some time you'll have forgotten all about what you've done with this component. And you'll have to debug your code just to understand what it is supposed to do (that is, before debugging the real issues).
Sorry for lecturing... All that being said, that doesn't mean there's not a way to come close to what you want without falling prey to reframing the framework.
Here's how I would do it (fiddle):
Ext.define('My.custom.BorderContainer', {
extend: 'Ext.container.Container'
// xtype is used in Ext3 and Touch... Ext4 uses aliases
,alias: 'widget.contentview'
,layout: 'border'
,items: [{
region: 'north'
,xtype: 'container'
,html: "<h1>Some header</h1>"
,style: 'background-color: lightblue;'
},{
region: 'west'
,xtype: 'container'
,split: true
,html: "<h1>Some menu</h1>"
,style: 'background-color: purple;'
},{
region: 'center'
,xtype: 'container'
}]
/**
* Configuration of the center panel.
*
* #cfg {Object/Ext.Component}
*/
,center: null
,initComponent: function() {
var center = this.center;
if (center) {
if (center instanceof Ext.Component) {
center.region = 'center';
} else {
// never modify a passed config object, that could
// break the expectations of the using code
center = Ext.clone(center);
// apply default config, including the region
center = Ext.applyIf(center, this.items[2]);
}
this.items[2] = center;
}
// else use default config, already in place
this.callParent(arguments);
}
});
Notice how I added a new center config option instead of trying to recycle existing ones (items, layout, etc.). That allows me to put anything I want, customized to the bone, and with usual syntax, in that. Future me and coworkers will probably send me chocolates for that! For example:
Ext.widget('contentview', {
renderTo: Ext.getBody()
,height: 300
,center: {
layout: {
type: 'vbox'
,align: 'center'
}
,defaults: {
xtype: 'component'
,margin: 10
,padding: 10
}
,items: [{
html: 'Red'
,style: 'background-color: green;'
},{
html: 'Green'
,style: 'background-color: blue;'
},{
html: 'Blue'
,style: 'background-color: red;'
}]
}
});
Ext.widget('contentview', {
renderTo: Ext.getBody()
,height: 300
,center: {
xtype: 'tabpanel'
,tabPosition: 'bottom'
,items: [{
title: 'First Tab'
,html: "I'm empty!"
},{
title: 'Second Tab'
}]
}
});
Ext.widget('contentview', {
renderTo: Ext.getBody()
,height: 300
// passing a component instance instead of a config object
,center: Ext.widget('button', {
text: "Foo"
})
});
One of my new project i need to show 5 graph in a page. But at the same time i need to display only 2 item. So i use Card layout. But it only allow me to set only one item as an active item. Is it possible to set more than one active item.
Card layout will only display one of its children at a time. You should probably use another layout that arranges your charts as you want (for example vbox layout), and show/hide them selectively.
Another option would be to nest your charts into containers, themselves in the card layout, but that won't give you the possibility to display any combination of chart... But only the ones you've put together in a container.
You containers would be configured something like this:
Ext.widget('container', {
layout: 'card'
,items: [{
xtype: 'container'
,layout: 'vbox'
,items: [{
xtype: 'myChart1'
},{
xtype: 'myChart2'
}]
},{
xtype: 'container'
,layout: 'vbox'
,items: [{
xtype: 'myChart3'
},{
xtype: 'myChart4'
}]
},{
xtype: 'myChart5'
}]
});
I have a SplitButton at the bottom of the page and is not visible initially(we need to scroll down to see the bottom). When I scroll to SplitButton, then press arrow button to expand splitbutton's menu, menu appears under SplitButton(just as planned), and then scroll up, the menu remains on screen, and it is positioned relative to window, not the containing div.
I tried to initialize menu by passing floating: false to it's config, but in this case menu doesn't expands at all.
How can I posision SplitButton's menu to have it always under SplitButton?
My ExtJS version is 4.07
I think you're doing something wrong. I've tried with:
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
html: 'loooooong panel',
height: 1500,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'splitbutton',
text: 'My button',
menu: [{
text: 'Menu1'
},{
text: 'Menu2'
}]
}]
}]
});
Live example on jsfiddle, everything works fine. If you still have problems you should modify menuAlign property to suit your needs:
menu: [{
text: 'Menu1'
},{
text: 'Menu2'
}],
menuAlign: 'tl-bl?' // Default
where 'tl-bl?' means top left corner (of the menu) should be aligned with bottom left corner (of the button) and the '?' means that if there's no space the menu should be automatically moved.