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.
Related
I have created two buttons in a panel :
{
xtype: 'button',
width: 196,
height: 29,
hidden: false,
text: "button1",
glyph: 'ab123#FontAwesome',
handler: 'onClick1',
reference: 'button1Click',
cls: 'buttons1Cls'
}, {
xtype: 'button',
width: 196,
height: 29,
hidden: false,
text: "button2",
glyph: 'ab123#FontAwesome',
handler: 'onClick2',
reference: 'button2Ref',
cls: 'buttons2Cls'
}
Each binded like shown to a different handler displaying different views like so :
onClick1: function () {
Ext.create('Mine.view.BaseWindow1', {
title: "panel1",
items: {
xtype: 'view1'
}
}).show();
}
And
onClick2: function () {
Ext.create('Mine.view.BaseWindow2', {
title: "panel2",
items: {
xtype: 'view2'
}
}).show();
}
My questions are how to make the panel1 and panel2 display exclusively :
if one panel is open and a user clicks on the second button the first panel closes first for the second to open (toggling panels)
one panel opens once (even in the case of a double click on the same button)
What i want is not a card layout solution but rather a solution where i can open centered windows individually on button click.
This is a card layout or tab panel. The tab panel uses the card layout and gives you tabs.
These examples are the modern toolkit but also available in the classic going back to at least version 3.
Kitchen sink example of card layout.
Kitchen sink example of tab layout
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 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 am using extjs to build a portal and I have the following problem. The images are more than the height of the tab (on the right size). What I want is to add a vertical scroll bar on this tab. How can I do this in extjs?
This is the part of my code:
items: [{
xtype: 'tabpanel',
activeTab: 0,
flex: 2,
items: [{
xtype: 'panel',
title: 'Images',
items: [{contentEl:'img',autoScoll: true,height:11200,overflowY : String }]
},{
xtype: 'panel',
title: 'Material',
items: [{contentEl:'msg',autoScoll: true,height:11200,overflowY : String }]
}]
}]
Thanks.
I can see in your code autoScoll instead of autoScroll: true.
It seems to be a typo.
Check this out.
Try adding layout:fit and autoScroll:true.
Have you tried this -
overflowY: 'scroll'
Here's what it says in the documentation -
'scroll' to always enable vertical scrollbar (Style overflow-y:
'scroll').
http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.Component-cfg-overflowY
For ExtJS 6 you can use Ext.panel.Panel.scrollable.
To enable vertical scroll you can set it as scrollable: 'vertical'.
To force vertical scroll regardless of content you can pass Ext.scroll.Scroller config:
scrollable: {
y: 'scroll'
}
I have a tabpanel which is part of a form (input fields are on different tabs). I need to inform the user on submission if a form has invalid fields even if they are not on the current tab. I think the best way would be to change the tabs color.
The question is how can I get the reference for the tab button, without introducing a new id?
Here is what i was trying to do, turned out to be a dead end since i get reference to the tab inner body, and with one more up to the entire tab panel
...
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:190,
margin: '10 0 0 0',
items: [{
title: 'Personal',
layout:'column',
border:false,
items:[{
columnWidth:.5,
border:false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'Email',
name: 'user[email]',
allowBlank: false,
listeners: {
'validitychange': function(th, isvalid, eOpts) {
if(!isvalid) {
alert(this.up().up().getId());
};
}
},
vtype:'email',
anchor:'95%'
}]
}]
}]
Try this:
From your field or any other Component in the panel (like a button) :
this.up('tabpanel').down('tab').el.applyStyles('background:red')
if the tab in question is not the first tab, you can use any tab property in the selector like this: ...down('tab[text=Example]') . You can use id property if you have it, if not you can just make up any property and set it to something meaningful like "ref:FirstTab".
If you have access to the tabPanel then you can access the items of its tabBar directly with:
this.up('tabpanel').getTabBar().items.get(0)
this.up('tabpanel').getTabBar().items.get(1)
etc.
See http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.tab.Bar-property-items