Is it possible to put label at bottom of text field?
I'm required to have the UI look like a PDF/printed form where most of the field labels are centered below input fields.
A CSS style/class approach is good enough. I just want to get this over in a hurry.
Thanks in advance.
Add a custom cls to your textfield as follows:
Ext.create('Ext.Panel',{
renderTo: Ext.getBody(),
width: 300,
height: 500,
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
cls: 'pdfField',
labelSeparator: ''
}]
});
Then create the pdfField class:
For ExtJS (5) =>
div.pdfField .x-form-item-label {
display: table-footer-group;
text-align: center;
}
For ExtJS (4) =>
.pdfField td {
display: table-caption;
}
.pdfField tr>td:first-child {
display: table-footer-group;
text-align: center;
}
Here is a fiddle ta works with both versions: https://fiddle.sencha.com/#fiddle/h35
Not that it looks better with ExtJS 5, that is because in ExtJS 5 uses divs to display the textfield content while ExtJS 4 uses table cells.
Related
I want to know how to make material-table column resize in react.
Please help me.
I've tried the following code
options={{
sorting:false,
resizable:true,
this feature is included under the paid DATAGRID-PRO
Material UI now is not supported but you can put a div on the right edge of the header of each cell to resize its column.
Here is my solution Resize columns table Material-ui
There is no resize path in material-ui table. you can use material-ui Data grid -(Demo Link): https://material-ui.com/components/data-grid/demo/#data-grid-demo.
Or
You can rewrite the existing material-ui table style like :
.MuiTableHead-root .MuiTableRow-root .MuiTableCell-head {
font-weight: bold;
resize: horizontal;
overflow-x: overlay;
overflow-y: hidden;
border-right: 1px solid;
}
Material UI Data grid column resize is not working.
[
{ field: 'id', header: 'id'},
{ field: 'count', header: 'Count', type: 'number'},
{ field: 'total', header: 'Total', type: 'number'}
];
resize should be true by default
I have found specifying the cell style assists in manipulation of your column sizes
{
field: 'Resizing',
title: 'Column Width',
cellStyle: {
whiteSpace: 'nowrap',
width: '20%',
},
},
Can I make a label somehow behave as a form field? I added a name field and it does not work.
{
xtype: 'label',
name: 'id'
}
However this works :
{
xtype: 'textfield',
name: 'id'
}
Should I just use a textfield and strip away its border?
UPDATE :
I am using a displayfield, and that seems to work. But, apart from changing the background colour, I cannot change any other properties of this using style.
{
flex: 1,
xtype: 'displayfield',
text: 'rollout',
style: 'font-size: 26px; background-color: #B6DAFF; ', //font size does not work :( Only background color does.
padding: '0',
margin: 0,
name: 'status',
width: 100
}
I am able to populate label in form panel. Please try below code
var form = new Ext.form.FormPanel({
items: [{
xtype:'label',
text: 'Send To:',
style: 'font-size: 26px; background-color: #B6DAFF; ',
}]
});
I know that I can set the style property of the label when creating it, but I want to change the style at run time, how can I do that?
the user pick: font, color, bg color and I want to change the existing label style as user desire.
thank you?
You can apply styles:
yourFormPanel.getForm().findField("field_name").labelEl.setStyle({"color":"red"});
or add/remove css classes:
yourFormPanel.getForm().findField("field_name").labelEl.addCls("red-label");
yourFormPanel.getForm().findField("field_name").labelEl.removeCls("black-label");
You can do it in many ways
Option 1(Global): Change the SASS variable value of "Ext.form.Labelable"
eg: $form-label-font-size: 11px !default;
Option 2: Create a mixin
eg:
file -> sass/src/form/Labelable.scss
#include extjs-label-ui(
$ui: 'customName',
$ui-font-size: 11
);
js:
{
xtype: 'textfield',
ui: 'customName'
}
Option 3: use form field's "labelStyle" config
eg:
{
xtype: 'textfield',
fieldLabel: 'Test Label',
labelStyle: 'font-weight: bold; color: #003168;',
labelWidth: 170
}
Option 4: add "cls" to the form field and add your style to your css file
eg:
js:
{
xtype: 'form',
defaults: {
cls: 'test-class'
}
}
CSS:
.test-class .x-form-item-label {
text-transform:capitalize;
color: #003168;
}
I would like to change the color of a ExtJS textfield, but I don´t succeed. The label is the component that gets the color:
var textfield= Ext.create('Ext.form.Text',
{
id: 'textfield',
name: 'name',
fieldLabel: 'Name',
style: 'background-color: #ddd;',
allowBlank: false,
});
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [textfield]
});
Example:
http://jsfiddle.net/3ZZcZ/
How do I change the color?
You need to set fieldStyle instead of style. You also need to override the Ext JS default, which sets a background image on the field. Like this:
fieldStyle: 'background-color: #ddd; background-image: none;'
A better way to approach this is to set the fieldCls attribute to a CSS class.
Like this:
Field Config:
fieldCls: 'required'
CSS:
.required {
background-image:none;
background-color:#FFFFCC;
}
You can do it in many ways
Option 1(Global): Change the SASS variable value of "Ext.form.field.Text"
eg: $form-text-field-color: #003168 !default;
Option 2: Create a mixin
eg:
file -> sass/src/form/field/Text.scss
#include extjs-text-field-ui(
$ui: 'customName',
$ui-color: #003168
);
js:
{
xtype: 'textfield',
ui: 'customName'
}
Option 3: use form field's "fieldStyle" config
eg:
{
xtype: 'textfield',
fieldLabel: 'Test Label',
fieldStyle: 'font-weight: bold; color: #003168;',
labelWidth: 170
}
Option 4: add "cls" to form field and add your style to your css file
eg:
js:
{
xtype: 'form',
defaults: {
cls: 'test-class'
}
}
CSS:
.test-class .x-form-text {
color: #003168;
}
Expanding on Vasiliy's answer. The style can be set dynamically as follows:
Ext.get('textfield').setStyle('background-color','#ddd');
Ext.get('textfield').setStyle('background-image','none');
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.