I faced the following problem:
I'm using ExtJS tabpanel control and I want the tab headers to span the whole container, ie - if there are two tabs, their tab headers width should be 50% of the tabpanel width. I can't manage to do this.
Could someone help me?
Just apply this
tabBar: {
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: { flex: 1 }
},
to your tabpanel configuration.
Note: This will only work for tabPosition 'top' and 'bottom'!
Related
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 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 upgraded a Sencha ExtJs project from version 4.1.1 to the new released version 5.0.1 and now get
the error "[E] Layout run failed" in the webdev console.
In the older version everything works as expected.
The error message comes from the column layout, used in a container nested in the two filsets.
When I exchange the layout to e.g. vbox then no error occurs.
What is wrong in the following code which lets the layout run fail and how to fix it.
Thank's for every hints, tips or solutions.
The fiddle can be found at https://fiddle.sencha.com/#fiddle/8ov
Ext.onReady(function() {
Ext.create('Ext.form.FieldSet', {
title: 'Grouping Fieldset',
layout: 'anchor',
renderTo: Ext.getBody(),
items: [
{
xtype: 'fieldset',
title: 'Fieldset - 1',
layout: 'anchor',
width: '100%',
items: [
{
xtype: 'textfield'
},
/*...more input fields...*/
{
xtype: 'container',
layout: 'column',
width: '100%',
items: [
{
xtype: 'textfield',
width: 25
},
{
xtype: 'textfield',
width: 50
},
{
xtype: 'textfield'
}
]
}
]
},
{
xtype: 'fieldset',
title: 'Fieldset - 2',
layout: 'anchor',
items: [
{
xtype: 'textfield'
}
/*...more input fields...*/
]
}
]
});
});
The stack trace using Ext.Loader:
log Util.js:704
logx Util.js:744
Ext.apply.log.log.error Util.js:748
Ext.define.handleFailure Context.js:597
Ext.define.runComplete Context.js:1129
callOverrideParent Ext.js:58
Ext.Base.Base.addMembers.callParent Base.js:1256
Ext.override.runComplete Component.js:174
Ext.define.run Context.js:1120
Ext.define.statics.flushLayouts Component.js:182
Ext.define.statics.resumeLayouts Component.js:198
Ext.resumeLayouts Component.js:5948
Ext.define.render Renderable.js:685
Ext.define.constructor Component.js:1743
constructor Class.js:29
(anonymous function) VM1725:3
Ext.ClassManager.Ext.apply.create ClassManager.js:1413
Ext.define.launch Application.js:10
Ext.define.onBeforeLaunch Application.js:407
Ext.define.constructor Application.js:325
constructor Class.js:29
(anonymous function) Application.js:23
Ext.env.Ready.invoke Ready.js:271
Ext.env.Ready.invokeAll Ready.js:313
Ext.env.Ready.unblock Ready.js:445
Ext.apply.triggerReady Loader.js:761
Ext.apply.checkReady Loader.js:906
Ext.apply.load Loader.js:592
Ext.apply.require Loader.js:477
Ext.apply.triggerReady Loader.js:733
Ext.apply.checkReady Loader.js:906
Ext.apply.onLoadSuccess Loader.js:649
Ext.Boot.Request.notify bootstrap.js:904
Ext.Boot.Request.processLoadedEntries bootstrap.js:883
Ext.Boot.Request.loadEntries bootstrap.js:856
Ext.Boot.Boot.processRequest bootstrap.js:451
Ext.Boot.Boot.load bootstrap.js:472
Ext.Boot.Boot.requestComplete bootstrap.js:507
Ext.Boot.Request.notify bootstrap.js:908
Ext.Boot.Request.processLoadedEntries bootstrap.js:883
Ext.Boot.Entry.notifyRequests bootstrap.js:1328
me.fetch.complete bootstrap.js:1242
readyStateChange
Update
When I put every textfield in an own container the layout error is gone and the gui is
acting like expected.
But this is only a workaround...
The fiddle can be found at https://fiddle.sencha.com/#fiddle/8re
//...items of secound fieldset
{
xtype: 'container',
layout: 'column',
items: [
{
xtype: 'container',
items: [
{
xtype: 'textfield',
width: 50
}
]
},
{
xtype: 'container',
items: [
// ...nesting next textfield in container
Layout run failures often happen when you have an inner container (e.g., your "column" layout) with a stretched width INSIDE a parent container (e.g. your "anchor" layout) with a stretched width.
In short, the framework can't appropriately size things because it's all stretched. It could be your anchor layout, the column layout, or one of the other stretched things in there. This is commonly known as "over-nesting".
The top-level container in your code appears to be a fieldset - inside of which you have another fieldset (etc), and both have anchor layouts. More than likely you want to be using "hbox" or "vbox" layouts.
I faced the same problem with the column layout. After some hours of search I discovered that I should define the columnWidth for each component that is placed in the container that has the column layout.
It worked for me.
I have just rechecked the docs for column layout where they say:
ColumnLayout does not have any direct config options (other than inherited ones), but it does support a specific config property of columnWidth that can be included in the config of any panel added to it. The layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel. If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).
For me it works only with columnWidth config. (I am using buttons instead of panels in the column container)
Hello I got problem with scroll on my grid.
Here is the code (nothing fancy or special in it)
Ext.define('grid.list',{
alias:'widget.grid.list',
extend: 'Ext.grid.Panel',
title: 'list',
frame:true,
width:325,
store: new axs.dry.cargo.data.store.list,
queryMode: 'remote',
style:{
cursor: 'default'
},
viewConfig: {
autoScroll: true
},
features:[Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: '{name}'
})],
columns: [
{
text: 'Name',
flex: true,
dataIndex: 'name',
sortable: false
}
],
initComponent:function(){
this.on('beforerender',function(){
this.store.load();
});
grid.list.superclass.initComponent.apply(this,arguments)
}
})
Grid is looking good and the scroller is showing BUT over the scrollbar extjs generates a DIV who is making the real problem. Because of that div I CAN'T click on the scrollbar because the transparent DIV is over it.... here is the code of this useless DIV
<div id="gridscroller-1032" class="x-component x-scroller x-scroller-vertical x-component-default x-docked x-docked-right x-component-docked-right x-component-default-docked-right" style="width: 17px; height: 297px; left: 302px; top: 47px; " role="presentation"><div class="x-stretcher" id="ext-gen1392" style="width: 1px; height: 2953px; "></div></div>
I hear opinion that this div is generated for "infinitive grid" but ...
Can you help me with good solusion (removing the element by selecting its ID is not a good solusion)
PS. When I remove the fixet width of my grid.list element the problem gone ... but then it starts showing horisontal scroll bar who looks ugly and I can remove it only by setting the width to fixed size.
PS2. I'm using the default css files and no special styles or anything.
The problem fixed by itself. I have integrate my form in the main project and the scrollbar appears...
I don't know why is that happening, maybe it is extjs bug.