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'
},{
...
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 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
we have a grid with 6 columns. One column requires more width compae to others. We have to ahow all the columns in that grid without any horizontal scroll bar.
The code we tried for this is:
{
xtype: 'grid',
viewConfig: {
forceFit: true,
}
columns: [{
header: 'column1'
}, {
header: 'column2'
},
//...
{
header: 'column6',
flex: 2
}]
}
The above code worked fine in IE8. But in IE9 and Google Chrome, the 6th column content is not displayed.
Could anyone please suggest how to solve it?
Remove the forceFit, you can just flex multiple columns, you can use flex 2 vs 1 on the column you want a bit wider.
{
xtype: 'grid',
columns: [{
header: 'column1',
flex: 1
}, {
header: 'column2',
flex: 1
},
//...
{
header: 'column6',
flex: 2
}]
}
The property width is a pixel width.
{
xtype: 'grid',
store: store,
selModel: Ext.create('Ext.selection.CheckboxModel', {
mode: 'SINGLE'
}),
layout: 'fit',
columns: [
{
text: "pum",
dataIndex: 'SRD_NAME_FL',
width: 400
}
],
columnLines: true
}
if i have only one column how can i make column width = 100%
or if i have several columns - how to make last column stretch to end of grid?
For ExtJS3, set forceFit on the GridPanels viewConfig. See: http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.grid.GridView
For ExtJS 4 set forceFit directly on the GridPanel: http://docs.sencha.com/ext-js/4-0/#/api/-cfg-forceFit and use it in conjunction with flex on your columns.
Example for v4
var p = Ext.Create('Ext.grid.Panel',{
forceFit: true,
columns: [{
xtype: 'gridcolumn',
header: _ll.id,
sortable: true,
resizable: false,
flex: 0, //Will not be resized
width: 60,
dataIndex: 'Id'
}, {
xtype: 'gridcolumn',
header: __ll.num,
sortable: true,
resizable: true,
flex: 1,
width: 100,
dataIndex: 'number'
}
});
Example for v3
var p = new Ext.grid.GridPanel({
viewConfig: {
forceFit: true
},
columns: [{
xtype: 'gridcolumn',
header: _ll.id,
sortable: true,
resizable: false,
fixed: true, //Will not be resized
width: 60,
dataIndex: 'Id'
}, {
xtype: 'gridcolumn',
header: __ll.num,
sortable: true,
resizable: true,
width: 100,
dataIndex: 'number'
}
});
Add flex : 1 to the column you want to stretch.
For ExtJS 4, use flex instead of width. If you set flex: 1 and there is only one column, it will take 100% width. If you have two columns and set flex: 1 on both, both will have 50% width.
Flex distributes the available width between the columns by ratio. You may for example say flex: 2 for one column and flex: 1 for two other columns and the result would be that the first one would be twice the width of the other two. You may also use decimal values for flex e.g. 0.5
Notice that if you have a single column in your grid there is a significant difference between using items:[{}] and items:{} notation.
In fact this will NOT work as expected (at least in ExtJS 4.2):
Ext.define('My.SingleColumnGrid', {
extend: 'Ext.grid.Panel',
store: {type: 'someStore'},
forceFit: true,
columns: {
items: [
{
text: 'Something',
flex: 1,
dataIndex: 'something'
}
]
}
});
If you just remove square brackets it will magically start to work as expected (i.e. you will have a single column that extends to fill grid width).
This almost drove me crazy ;-P.
set Flex to 1
Column.Flex = 1;