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.
Related
I need some help in inserting an image in 'north' panel of Viewport.
The prob is, upon page load, size of north region is set to default: 20px. As a result, only some portion of image is visible. I want it to be adjusted as per the image height.
But as I click on split panels, it adjusts as per the size of image (seems some rendering problem at load?)
following is the ext js code.. Using Ext Js 5.0
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'border',
items: [
{
region: 'north',
html: '<img src="..." alt="" />',
border: false,
margin: '0 0 0 0',
},{
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Contents',
html: 'The first tab\'s content. Others may be added dynamically'
}
}
]
});
Thanks in advance!
First problem is that when you use border layout, few items are required:
Any Container using the Border layout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.
Any child items with a region of west or east may be configured with either an initial width, or a Ext.layout.container.Box.flex value, or an initial percentage width string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1.
Any child items with a region of north or south may be configured with either an initial height, or a Ext.layout.container.Box.flex value, or an initial percentage height string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1.
See the doc for more info.
So I would change your panel to hbox, set the main container with flex: 1 and add some logic to make sure that when you load the images the container's layout is updated to fix it's height.
Code below, hope it helps:
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'vbox',
items: [
{
border: false,
margin: '0 0 0 0',
items : [{
xtype : 'image',
src : 'http://cdn.sencha.io/img/touch2/Sencha-SDK-Tools-icon.png',
listeners : {
boxready : function (component) {
component.getEl().on('load', function(){
component.ownerCt.updateLayout();
});
}
}
}],
layout: {
type: 'anchor'
}
},{
flex: 1,
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Contents',
html: 'The first tab\'s content. Others may be added dynamically'
}
}
]
});
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)
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.
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.
I have the following Ext.TabPanel:
var modules_info_panel = new Ext.TabPanel({
activeTab: 0,
defaults:{autoScroll:true},
//layout: 'fit', // makes component disappear
viewConfig: {
forceFit: true //has no effect
},
// height: auto, //error "auto isn't recognized"
items:[{
title: 'Section 1',
html: 'test'
},{
title: 'Section 2',
html: 'test'
},{
title: 'Section 3',
html: 'test'
}]
});
which looks like this:
How can I get the line in the middle to extend down to the bottom so that it fills its parent space vertically?
Here's how the TabPanel is loaded into regionContent:
regionContent = new Ext.Panel({
id: 'contentArea',
region: 'center',
autoScroll: true
});
function clearExtjsComponent(cmp) {
var f;
while(f = cmp.items.first()){
cmp.remove(f, true);
}
}
function replaceComponentContent(cmpParent, cmpContent) {
clearExtjsComponent(cmpParent);
cmpParent.add(cmpContent);
cmpParent.doLayout();
}
replaceComponentContent(regionContent, modules_info_panel);
I see that the height is for this element in the dom is absolute (19px), where is that being set?
Addendum
McStretch, I tried your idea by putting layout: 'fit' in the tabs themselves but the line still is in the same place:
var modules_info_panel = new Ext.TabPanel({
activeTab: 0,
defaults:{autoScroll:true},
items:[{
title: 'Section 1',
layout: 'fit',
html: 'test'
},{
title: 'Section 2',
layout: 'fit',
html: 'test'
},{
title: 'Section 3',
layout: 'fit',
html: 'test'
}]
});
Corrected:
Sorry Edward I was incorrect, you want layout: 'fit' within your regionContent Panel. The updated code changes are below.
Your initial idea of using layout: 'fit' is correct, but you have it in the wrong location. You want the following:
var regionContent = new Ext.Panel({
region : 'center',
autoScroll : true,
layout : 'fit', // added this line
items : []
});
Looks like you are within a border Layout, how do you define the panel that set the border layout ? The center region of a border layout should normally fill the space not remained by the other regions. I did a sample that looks like your layout: http://jsbin.com/ikazo3/6/edit
From the Border Layout documentation:
Any container using the BorderLayout must have a child item with
region:'center'. The child item in the
center region will always be resized
to fill the remaining space not used
by the other regions in the layout.
Any child items with a region of west or east must have width defined
(an integer representing the number of
pixels that the region should take
up).
Any child items with a region of north or south must have height
defined.
The regions of a BorderLayout are fixed at render time and thereafter,
its child Components may not be
removed or added. To add/remove
Components within a BorderLayout, have
them wrapped by an additional
Container which is directly managed by
the BorderLayout. If the region is to
be collapsible, the Container used
directly by the BorderLayout manager
should be a Panel. In the following
example a Container (an Ext.Panel) is
added to the west region: