Is there a way I can set the columns width to match the width of the column text? The user can resize the columns to see the content if needed, but I want the full header text to be showing at least, even if the column content isnt.
thanks
Yes it should be possible. You can call the method autoSize() on the column.
You can combine it with the minWidth and maxWidth.
I have found this example on the Sencha forums for Ext 4.2 so it should be very similar for Ext 6.2:
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name', width: 150, autoSizeColumn: true },
{ text: 'Email', dataIndex: 'email', width: 150, autoSizeColumn: true, minWidth: 150 },
{ text: 'Phone', dataIndex: 'phone', width: 150 }
],
viewConfig: {
listeners: {
refresh: function(dataview) {
Ext.each(dataview.panel.columns, function(column) {
if (column.autoSizeColumn === true)
column.autoSize();
})
}
}
},
width: 450,
renderTo: Ext.getBody()
});
Related
I have a grid with columns name, value, new value. New value column is combobox because there can be a few values. Admin can approve/decline new values and correct proposed these new values.
My grid columns looks like this:
columns: [
{ text: 'Name', dataIndex: 'property_name', width: 300 },
{ text: 'Value', dataIndex: 'value', width: 350 },
{
text: 'New Value',
dataIndex: 'new_value',
width: 350,
editor: { allowBlank: true },
renderer: function(value, cell, record){
return record.get('new_value') == record.get('value') ? '' : record.get('new_value');
}
},
],
So is there a way to achive functionality a described above?
The editor configuration takes any Ext.form.Field configuration (default is textfield), so for example:
editor:{
xtype:'combobox', // <- this tells
store:'MyNewValueStore',
forceSelection:true,
queryMode:'local',
...
}
I want to get the value of another column in the same row, in a renderer function of one column. I tried a method, but it didn't work. And here's my code:
columns: [
{id:'id',header: 'ID', width: 30, sortable: true, dataIndex: 'category_id'},
{header: 'current_level', width: 100, sortable: true, dataIndex: 'current_level'},
{header: 'complete_code', width: 100, sortable: true, dataIndex: 'complete_code'},
{header: 'parent_id', width: 100, sortable: true, dataIndex: 'parent_id'},
{header: 'parent_name', width: 100, sortable: true, dataIndex: 'parent_name'},
{
header: 'has_standards', width: 100, sortable: true, dataIndex: 'has_standards',
renderer: function(val, meta, record, rowIndex) {
if (val == 'Yes') {
console.log(record.data.category_id);
}
}
}
],
As you see, I want to get the category_id in the same row, in the renderer function of has_standards column. But my way is wrong. Could you tell me how to do it?
You want to use record.get('category_id') e.g.:
renderer: function(val, meta, record, rowIndex) {
if (val === 'Yes') {
console.log(record.get('category_id'));
}else{
console.log('Value is not "Yes"');
}
}
I am using Ext JS 6 (Sencha) and I wanted to display an image in a grid column based on whether the value of another column in the same grid was of a certain value. I followed SW4's solution with some minor changes as per the version of Ext JS I am using and it worked great. Thank you.
Ext.define('ViewLL.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'list',
requires: ['App.store.Datastore'],
store: {type: 'datastore'},
columns: [
{ text: 'Market',
renderer: function(value, metaData, record, rowIndex) {
var value = record.get('location');
if (value == NYC) {
return '<img src="resources/images/bigApple.jpg"/>';
}
else {
return null;
}
}
},
{ text: 'City', dataIndex: 'location' }
]
This displays the image file in a grid column when the City column's has a record, the value of which is NYC. For all other records it displays a blank cell.
I am trying to get numbered rows with my grid.
var grid = Ext.create('Ext.grid.Panel',
{
I looked into the documentation for Grids in Ext JS, however, I cannot find a numbering property. Any ideas for me?
Here's my columns section. The info in the columns is pulled from a server.
columns:
{
xtype: 'rownumberer',
defaults:
{
align: 'center',
flex: 0,
width: 40,
sortable: false,
menuDisabled: true
},
items:
[
Use the RowNumberer column type.
Edit:
You must add an extra column of this type. Example:
Ext.widget('grid', {
columns: {
defaults: {
// you column defaults
},
items: [{
xtype: 'rownumberer' // this is a column type
},{
dataIndex: 'foo'
,text: 'Column Foo'
},{
dataIndex: 'bar'
,text: 'Column Bar'
}]
}
// ...
})
I am creating a page that only contains a gridpanel, I want my gridpanel to have scrollbars based on the browser size. To do this I am wrapping it in a viewport as discussed here and making sure I specify a layout as discussed here. The grid renders fine but I am not getting any scroll bars. I've tried 'fit', 'border' and 'anchor' layouts but still no luck. The code looks like this:
Ext.create('Ext.Viewport', {
items: [{
region: 'center',
layout: 'fit',
xtype: 'gridpanel',
store: myStore,
loadMask: true,
columns: [{
header: 'Account ID',
dataIndex: 'acct_id',
width: 70
}, {
header: 'First Name',
dataIndex: 'first_name',
width: 120
}, {
header: 'Last Name',
dataIndex: 'last_name',
width: 120
}, {
xtype: 'numbercolumn',
header: 'Account Balance',
dataIndex: 'acct_bal',
width: 70,
renderer: Ext.util.Format.usMoney
}, {
xtype: 'numbercolumn',
header: 'Credit',
dataIndex: 'credit',
width: 70,
renderer: Ext.util.Format.usMoney
}, {
xtype: 'numbercolumn',
header: 'Debt',
dataIndex: 'debt_bal',
width: 70,
renderer: Ext.util.Format.usMoney
}],
}]
});
You should set fit layout to Viewport:
Ext.create('Ext.Viewport', {
layout: 'fit',
items: [...]
});
Setting layout in GridPanel have no effect.
How do I go about making the gridpanel/table in extjs auto expand based on the window size?
Thanks
I added layout :'fit'.. i didn't change much
var listView = Ext.create('Ext.grid.Panel', {
store: mystore,
multiSelect: true,
title:'Notifications for ' + jsonServiceId + ' <i>(0 items selected)</i>',
viewConfig: {
emptyText: 'No images to display'
},
//reserveScrollOffset: true,
renderTo: containerEl,
layout:'fit',
columns: [{
text: 'Sell',
flex: 10,
dataIndex: 'Sell',
renderer: function(value, metaData, record) {
// alert(record.get('Sell'));
}
},{
text: 'Class',
flex: 10,
dataIndex: 'ClassName'
},
{
text: 'Last Changed',
flex: 20,
dataIndex: 'LastChangedAt',
xtype: 'datecolumn',
format: 'd-M-Y h:i a'
}
]
});
It's a layout thing. You should add layout: 'fit' to the parent container. It will make your grid expand to the size of parent container.
Just as here in example:
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout-browser/layout-browser.html