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
}]
}
Related
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'
},{
...
Hi i need little help with the scenario i am facing hard to get. i have a horizontal list view of images i want to show only three images on the screen and with center image highlighted.
I tried carousel but only the image highlighted will be scrollable, i want the horizontal kind of smooth scrolling.
Is something like using hbox panel on top of horizontal list view works?
var superpanel = new Ext.Panel({
fullscreen: true,
layout: 'hbox',
items: [
{
xtype: 'panel',
id: 'panel_1',
width: '100%',
layout: 'fit',
items: [
{
xtype: 'list',
flex:1,
id: 'list1',
store: 'samplestore1'
}
]
}
]
});
can someone help with the scenario how to achieve this.
Any help is much appreciated
You don't need carousel for this. Dataview will serve the purpose. Check out this dude:
Ext.define('Example.view.HorizontalList', {
extend: 'Ext.dataview.DataView',
xtype: 'horizontallist',
config: {
inline: {
wrap: false
},
scrollable: {
direction: 'horizontal'
},
//set the itemtpl to show the fields for the store
itemTpl: '{name} {image}',
//bind the store to this list
store: 'xyz'
}
});
You can also check this.
I have a grid with many columns, each of them has a filter, and some of the columns has a long text in the header:
I added a css rule to wrap text in the header:
.x-column-header-inner .x-column-header-text { white-space: pre-wrap; }
In result I got filters with different height:
How to make the same height filters?
I implemented the search filter with your hint. You can find it here. I didn't have your issue with long column labels. They just cut off using an ellipsis like it is the standard behavior in ExtJs.
I've solved my issue by including search filters into fieldcontainers, and using vbox layout with pack at the end.
items: [
{
xtype: 'fieldcontainer',
layout: {
type: 'vbox', pack: 'end'
},
width: '100%',
items: [
{
xtype: 'triggerfield',
...other code...
}
]
}
]
We have a gridpanel with columns, that are displaying fine. One column in particular, is a string that can be very large. We want to add a scrollbar to this one column only to accommodate the large wall of text.
Can this be done with Sencha EXT JS? Or if scrollbars can not be done, how about a mouse over to show the whole text in the column?
var secondTab = Ext.create('Ext.grid.Panel', {
columnWidth: 0.60,
xtype: 'gridpanel',
store: standardsResultsStore,
autoheight: true,
columns: [
{
id :'standardName',
text : 'Standard Name',
flex: 1,
sortable : true,
dataIndex: 'standard'
},
{
text : 'Description',
flex : 2,
sortable : true,
dataIndex: 'description_standard'
}
]
});
I did it with CSS, and added tdCls to the specific column
.custom-column .x-grid-cell-inner { white-space:normal; }
--- in tab tdCls: 'custom-column'
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;