How can I set the width of a ComboBox input field? I tried to set the width and it does not work. I could not find any CSS variable for width though there is one for height ($form-field-height).
I have also tried to set width in fieldStyle.
fieldStyle: {
width: '100px'
}
I am able to change the height though. The following works.
fieldStyle: {
height: '60px'
}
code4jhon answered it, I just want to add some notes: Is your combobox is inside a parent container with a auto-fixed layout type: like hbox, vbox,...? You can't change width and height because it's controlled by its parent layout.
Width does work, you can play with this code to watch it:
https://fiddle.sencha.com/#fiddle/1g3
Best regards.
Can you try this using !important in css,
fieldStyle: {
width: 100px!important;
}
Related
So, here is what I currently have:
And I need distance between icons to be equal. That's what I'm unable to do using tabStyle prop like this:
tabStyle: {
width: whatever
}
cause distance is not equal. How can I do so in React Navigation 5?
I assume you want the labels to be as wide as the content instead of stretching to available width. In that case, you need to set width to auto:
tabStyle: {
width: 'auto'
}
I am trying to change the background color of a toolbar. Right now, I am having ext-classic theme. I want toolbar background color to be dark blue, but this color change should NOT be applicable for all the toolbar's being created. Can someone guide me on how I can do this particular thing?
Thanks in advance..
You also can try using "style" config option.
Ext.define 'App.your_package.CustomToolbar',
extend: 'Ext.toolbar.Toolbar'
xtype: 'my-custom-toolbar'
style: 'background-color: #112D41;'
Cheers!
use cls config
Ext.create('Ext.toolbar.Toolbar', {
...,
cls: 'myBgCls',
...
and then css to change background:
.myBgCls{
background: blue;
}
Is there any config option to put the lavel on top with center align for a textfield.
{
xtype:'numberfield',
labelAlign:'top',
labelSeparator:'',
fieldLabel: 'Title',
flex:1
}
Its working fine with label on top but aligned to left. I want to be centeraligned with top.
Thanks for your help in advance!!!
Just add a class to the label using labelClsExtra:
An optional string of one or more additional CSS classes to add to the
label element. Defaults to empty.
For example:
labelClsExtra: 'your-class'
And in your style sheet:
.your-class {
text-align: center
}
Working example: http://jsfiddle.net/qazN3/
Using Ext JS 4.0.2, I'm trying to open a window that automatically sizes itself big enough to fit its content, until it hits a height limit, at which point it stops getting bigger and shows a scroll bar.
Here's what I'm doing
Ext.create('widget.window', {
maxHeight: 300,
width: 250,
html: someReallyBigContent,
autoScroll: true,
autoShow: true
});
When the window is first rendered, it's sized big enough for the really big content--bigger than the maxHeight should allow. If I attempt to resize it, then snaps down to the maxHeight of 300px.
How do I constrain the window to its maxHeight when it's initially rendered?
I have exactly the same problem and for now I'm doing a litle dirty hack :)
this.on('afterrender', function() {
if (this.getHeight() > this.maxHeight) {
this.setHeight(this.maxHeight);
}
this.center();
}, this);
Depending on the content of the window, you must use the afterlayout event. Instead of using this.maxHeight, to use the whole viewport, use Ext.getBody().getViewSize().height or in vanilla JS use window.innerHeight.
This version will work even if the windows contains other components and not only huge html:
listeners: {afterlayout: function() {
var height = Ext.getBody().getViewSize().height;
if (this.getHeight() > height) {
this.setHeight(height);
}
this.center();
}}
This can be better :
bodyStyle: { maxHeight: '100px' }, autoScroll: true,
I don't see an out-of-the-box way to do this. However, you might try this approach:
Place the contents of the window into a container inside the window (i.e. make someReallyBigContent be inside a container.) On afterrender, get the height of that inner container and then proceed to set the height of the outer window based on that.
How I ended up displaying a window with an unknown amount of fields on a form (constrain = body.el):
prefForm.itemId = 'prefForm';
win = Ext.create('Ext.window.Window', {
layout : {
type : 'vbox',
align : 'center'
},
buttons : buttons,
maxHeight : constrain.dom.clientHeight - 50,
title : title,
items : prefForm,
listeners : {
afterrender : {
fn : function(win) {
var f = win.down('#prefForm');
f.doLayout();
var h = f.body.dom.scrollHeight;
if (f.getHeight() > h)
h = f.getHeight();
win.setHeight(h + 61);
win.center();
},
single : true
}
}
});
You can add this config on your window
maximizable: true
if you want you could programmatically 'click' that button :)
Now I see what you are trying to do. I think the only thing missing from your config is the height parameter. Set it to the same number as maxheight. That should do it, you won't need to call setHeight().
This is just like Ivan Novakov answer, except I prefer it when you override the onRender class for these types of classes.
This is for a couple of reasons. Removes an additional event listener, and in the case you have multiple things that need to occur at afterrender time. You can control the synchronization of these tasks.
onRender: function(ct,pos) {
//Call superclass
this.callParent(arguments);
if (this.getHeight() > this.maxHeight) {
this.setHeight(this.maxHeight);
}
this.center();
}
I had the little bit different problem. In my case ExtJS code there inside the HTML popup windows. And I had to achieve:
change the size of panel when we change the size of popup windows.
Ivan Novakov's solution worked for me.
Ext.EventManager.onWindowResize(function () {
var width = Ext.getBody().getViewSize().width - 20;
var height = Ext.getBody().getViewSize().height - 20;
myPanel.setSize(width, height);
});
I have a panel with a "form" layout, containing several buttons. now I want to enable this panel resize according to window resizing. How can I get this done?
thanks.
Ext.EventManager.onWindowResize(function(w, h){
panel.doComponentLayout();
});
Assuming you have a Panel named 'panel' with some automatic sizing built in (e.g. height: "100%"). Otherwise, the new width and height of the window are passed into the anonymous function passed to onWindowResize().
As wrote #deniztt you should subscribe to EventManager class onWindows Resize Event.
It can be something like this:
Ext.EventManager.onWindowResize(function () {
var width = Ext.getBody().getViewSize().width - 160;
var height = Ext.getBody().getViewSize().height - 140;
panel.setSize(width, height);
});
Where panel is reference to your panel
You can read about it here.
You can make the panel resizable by setting the 'resizable' config option, see the docs for the various options: http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.panel.Panel.html.
As far as how the form components interact you'll need to set anchor's if you want to use a form layout or switch to an hbox/vbox type of set-up with various flex settings.
You can set the size for window and set the child panel's autoHeight and autoWidth attributes true.
Another way is catching the resize event of the window and resize the child panel according to the new size values.
Thanks to Gegory and Joseph for the EventManager solution. I've done some minor changes to this solution, replacing the getBody() with a DIV and setting an initial width/height of my chart (or any other component):
<div id="chart" style="overflow: hidden; position:absolute; width:100%; height:90%;"></div>
....
Ext.onReady(function() {
var renderDiv = Ext.get('chart_div');
var chart = Ext.create('Ext.chart.Chart', {
renderTo: renderDiv,
width: renderDiv.getWidth(),
height: renderDiv.getHeight() - 50,
...
});
Ext.EventManager.onWindowResize(function () {
var height = renderDiv.getHeight() -50;
var width = renderDiv.getWidth();
chart.setSize(width, height);
});
});
autoWidth and autoHeight don't seem to work for me (Ext-JS 4.2.1).