This seems like it would be a simple solution, but I cannot figure out how to set the row height of my fieldset table. Playing with the CSS didn't seem to do anything either.
xtype: 'fieldset',
title: 'Fieldset',
layout: {
type: 'table',
columns: 2,
cellCls: 'myFormTblCell'
},
margin: '5 5 5 5',
items: [{
xtype: 'label',
text: 'lable 1',
cls: 'myLabel'
},{
xtype: 'displayfield',
name: 'displayfield 1',
cls: 'myText'
},{
xtype: 'label',
text: 'lable 2',
cls: 'myLabel'
},{
xtype: 'displayfield',
name: 'displayfield 2',
cls: 'myText'
}]
I use ExtJS version 4.2.2, in which you would do the following
In your layout config...
layout: {
type: 'table',
columns: 2,
trAttrs: { height: 50 },
cellCls: 'myFormTblCell'
},
Documentation on ExtJS table layout
JSFiddle
Related
How can I align child buttons of segmented button in tabular layout? For example, if there are six buttons, how to arrange them in two rows with three buttons in each row?
Ext.create('Ext.button.Segmented', {
renderTo: Ext.getBody(),
allowMultiple: false,
items: [{
text: 'Segment Item 1',
},{
text: 'Segment Item 2',
},{
text: 'Segment Item 3'
},{
text: 'Segment Item 4',
},{
text: 'Segment Item 5',
},{
text: 'Segment Item 6'
}]
});
I've found it. If someone needs it, it is:
layout: {
type: 'table',
columns: 3
},
I have a problem in aligning an item to the right, or anyway at the end of the column.
As you can see in the picture:
even if there is space on the right, it aligns the item left covering part of the text (The complete text is "Battery Level"). I would like to align it near the downward arrow.
I tried to use align:'right' without success.
How could I fix it? this is my code:
columns: {
defaults: {
flex: 1,
},
items: [{
....
},{
text: Strings.positionBatteryLevel,
hidden:true,
sortable: false,
defaults:{
margin:'-31 0 0 55'
},
items: [{
xtype: 'numberfield',
id: 'batteryFilter',
align:'right',
listeners: {
change (e,newValue, oldValue, eOpts ) {
filterGridAttributeType(newValue,'batteryLevel');
}
}
}],
},{
...
There is a config for columns to align the content:
columns: [{
text: 'Battery Level',
sortable: false,
==> align: 'end'
},{
...
I have extended java script Panel with me that contains a a few columns. The data inside the column is received from the server. Some times the data from the server for each column is large and it does not fit inside the row.
Here is the code for the same:
Ext.define('DataDetailsGrid', {
extend: 'Ext.grid.Panel',
requires: [
'DataStore'
],
id: 'DataDetailsGrid',
xtype: 'grid',
margin: "20 20 20 20",
nestedView: false,
title: 'Student information',
store: 'DataStore',
frame: true,
flex: 1,
viewConfig : {
deferEmptyText: false,
emptyText: 'No data Available'
},
columns: [
{ text: 'Id', flex: 0.5, dataIndex: 'id' },
{ text: 'Student name', flex: 1, dataIndex: 'student_name' },
{ text: 'Time Stamp', flex: 1, dataIndex: 'requestTimeStamp' },
{ text: 'email Id', flex: 1, dataIndex: 'emailId' },
{ text: 'About Students', flex: 4, dataIndex: 'response' },
]
});
The issue is with About Students which can be about 500 characters sometimes. This is not getting accommodated inside the given row.
You can use this css code for wrap Adout Students Data.
Check fiddle:https://fiddle.sencha.com/#fiddle/1i3g
.x-grid-cell-inner {
white-space: initial;
}
All you need to do is add the following line to your column's definition
cellWrap: true
Check this fiddle: https://fiddle.sencha.com/#fiddle/1i5o
. I've taken the liberty of forking Ajay Thakur's fiddle.
So, in your case, change your offending code to the following line:
{ text: 'About Students', flex: 4, dataIndex: 'response', cellWrap: true }
I have a form with two textfields which are aligned in 'vbox' format with align as 'stretch'. I wish to now add a SAVE button which should be aligned in the middle of the form. How do I define this button to be exactly aligned in the middle just like in a usual alert where the OK button is in the middle of the alert box.
If it can be done without CSSS then that would be preferable.
buttonAlign : The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right' for buttons/fbar, 'left' for other toolbar types).
Another way is to use dockedItems with layout:'hbox' and pack:'center'
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.form.Panel', {
width: 300,
bodyPadding: 10,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'textfield',
title: 'Contact Info',
name: 'name',
fieldLabel: 'Name'
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address'
}],
buttons: [{
text: 'Save'
}],
buttonAlign: 'center',
renderTo: Ext.getBody()
})
}
});
FIDDLE
I want to change the background color of a button in a toolbar.
I need this button to show a summary-value.
I tried with
cls: 'button-matching-auto',
and in css-file
.x-btn-button .button-matching-auto {
background-color: #10E0E0;
}
No effect.
Then i tried with
style: {color:'red'},
It's the same: no effect
In Developer Tools of chrome i can see, that the colors were applied,
but not visible.
What's wrong?
"It's because the button has a CSS class named 'x-button' with a background-color set to '#CCC' by default..." http://www.sencha.com/forum/showthread.php?208417-Change-image-button
{
xtype: 'button',
baseCls: 'null',
cls: 'buttonRed
}
... if you only want the default look and feel of a button not the gray one ...
I've done this to change the look and feel to get the default one:
dockedItems: [{
xtype: 'toolbar',
layout: {
pack: 'center'
},
defaultButtonUI: 'default', // get default look and feel
dock: 'bottom',
items: [{
xtype: 'button',
width: 200,
text: 'Download to Excel',
},{
xtype: 'button',
width: 200,
text: 'Another action',
}]