I have an ExtJS 4 gridPanel as below:
var grid = Ext.create('Ext.grid.Panel', {
store: store,
title: 'grid',
columns: [
{text: 'column 1', sortable: true, width: 70, dataIndex: 'column1'},
{text: 'column 2', sortable: true, width: 70, dataIndex: 'column2'},
{text: 'column 3', sortable: true, width: 70, dataIndex: 'column3'},
{text: 'column 4', sortable: true, width: 70, dataIndex: 'column4'},
],
renderTo: Ext.get('gridDiv'),
width: 800,
height: 600,
listeners: {
},
features: [{
ftype: 'grouping'
}]
});
I'm required to dynamically hide the column that the grid is being grouped by whenever the grid is grouped, and show all other columns - reshowing any previously hidden columns.
I understand that this would be a listener handler that catches the grouping changing, which would then fire column.hide().
Some pseudo-code:
...
listeners: {
groupchange: function(store, groupers, eOpts) {
groupers.forEach(function(group) {
grid.columns.forEach(function(column) {
if(column==group)
column.hide();
if(column==group)
column.show();
}
}
}
},
...
I'm not sure from the API documentation whether groupchange is an event that can be caught by the grid, rather than the store, how to access the contents of groupers, and what comparators are available to determine if a column is in groupers.
How should this listener event be structured? What are the correct events/methods/properties to use?
Found that the hiding is done on a store listener, despite the grid panel API making it look as though it can be done as a grid listener. I've worked off the first keys array value within the groupers, although you could just as easily use items[0].property value.
var store = Ext.create('Ext.data.Store', {
...
listeners:
{
groupchange: function(store, groupers, eOpts){
var column = groupers.keys[0];
productionItemGrid.columns.forEach(function(entry){
if(entry.dataIndex == column)
{
entry.setVisible(false);
}
else
{
entry.setVisible(true);
}
});
}
}
...
});
Related
I have a grid and one of the columns prepresents a progress bar. I need to set a tooltip "Progress 4 of 10" over the progress bar. Initially it was like this:
columns: [
{
translatable: {
text: 'progress'
},
tdCls: 'highlight',
xtype: 'widgetcolumn',
dataIndex: 'progress',
widget: {
cls: 'percentage-bar',
text: ' ',
align: 'center',
xtype: 'progressbar',
defaultListenerScope: true,
listeners: {
afterrender: function (bar) {
var tip = Ext.create('Ext.tip.ToolTip', {
target: bar,
html: Dict.translateAndReplace(
'step',
[
bar.getWidgetRecord().get('current_step') === 0 ? 1 : bar.getWidgetRecord().get('current_step'),
bar.getWidgetRecord().get('total_steps')
],
'%d'
)
});
if (bar.getValue() === 1) {
bar.addCls('progress-complete')
}
},
},
},
width: 100
},
The issue is - it works only for a single page. When there are several pages or I apply filtering or sorting, event "afterrender" is not triggered. So it's triggred only then the grid is loaded, not the content. I need either to change to target element or use renderer. I tried to play arroung with renderer, but also stuck. How to get current cell container?
columns: [
{
translatable: {
text: 'progress'
},
tdCls: 'highlight',
xtype: 'widgetcolumn',
dataIndex: 'progress',
width: 100,
widget: {
cls: 'percentage-bar',
text: ' ',
align: 'center',
xtype: 'progressbar',
defaultListenerScope: true,
},
renderer: function (value, metaData, record) {
let HowToGetTheContainer = "?????";
var tip = Ext.create('Ext.tip.ToolTip', {
target: HowToGetTheContainer,
html: Dict.translateAndReplace(
'step',
[
record.get('current_step') === 0 ? 1 : record.get('current_step'),
record.get('total_steps')
],
'%d'
)
});
if (value === 1) {
Ext.down().addCls('progress-complete')
}
}
},
How to get that variable "HowToGetTheContainer"?
Within the renderer function, you can add a tooltip with this code (this works on other column types as well, not only on widgetcolumn):
metaData.tdAttr = Ext.String.format('data-qtip="{0}"', 'This is my tooltip here');
This was not a part of your question, but to customise the widget in the widgetcolumn, for example to add the progress-complete style, instead of using Ext.down(), you can use the onWidgetAttach function of the column:
columns: [{
xtype: 'widgetcolumn',
onWidgetAttach: function(col, widget, record) {
widget.setIconCls('xxx')
widget.addCls('xxx')
widget.setText('xxx');
// etc
},
}]
I have a grid that returns various types of data with filtering activated. One column is filtered based on three distinct options.
I need to load the grid with filtering enabled on one specific option. How Do I load a grid with one specific option already filtered?
var columns = [{
text: 'Title',
width: 260,
dataIndex: 'Title',
filterable: true
}, {
text: 'Description',
flex: 1,
dataIndex: 'Description',
filter: {
type: 'string'
}
}, {
text: 'Modified',
width: 90,
dataIndex: 'Modified',
xtype: 'datecolumn',
format: 'm/d/Y',
filter: true
}, {
text: 'Status',
width: 90,
dataIndex: 'TopicStateValue',
filter: {
type: 'list',
options: ['Open/Current', 'Archived/Closed', 'Hold']
}
}];
I need to load the grid with Open/Current items set to active.
Just perform the filtering on the store.
If you want to perform filtering in the background that is usually the way to go.
Another option is to activate the filter and the set it's value.
See your other question (https://stackoverflow.com/a/45380759/333492) for details on how to do that.
I have a Ext.grid.Panel with Tooltips that work fine.
If I place the Grid inside an Ext.tab.Panel,
and move
renderTo : 'inner',
onto the Tab panel, the tooltips no longer work
https://jsfiddle.net/95g1pdck/2/
Is there some adjustment I need to make for this to work?
You have to render grid first.
var grid = Ext.create('Ext.grid.Panel', {
title: 'Array Grid',
height: 200,
store: store,
columns: [
{text: 'Company', flex: 1, dataIndex: 'company'},
{text: 'Price', width: 75, dataIndex: 'price'},
{text: 'Change', width: 75, dataIndex: 'change'}
],
});
var tabs = Ext.create('Ext.tab.Panel', {
renderTo : 'inner',
items : [ grid ]
});
Just updated your fiddle:
https://jsfiddle.net/95g1pdck/4/
I am using a dojo datagrid that is displaying data either coordinate data sent from a server, or coordinate data from pins which are added to an ESRI map.
However, when I click on a cell to edit the text box displays and you can change the value yet the change does not save unless you are editing the final row. If you edit a text box in row 2 and then click the box in the same column for the final row, the row 2 value is put in the final row.
If you exit any other way row 2 data reverts back to its original value. The final row behaves exactly how I want it to, you can edit all the values and they are saved (unless page is refreshed). If another row is added, and you try to edit it the row will throw a
"Uncaught TypeError: Cannot read property 'get' of undefined " error on ObjectStore.js:8.
I started with the code from the hellodgrid example
http://dojotoolkit.org/documentation/tutorials/1.9/working_grid/demo/ using the "Editing data with the Grid" and edited columns in any row.
I haven't seen a problem that's anything like mine and I am really stumped, so any help is appreciated.
Data in the following code is an array of objects I created.
function drawTable(data){
require([
"dojox/grid/DataGrid",
"dojox/grid/cells",
"dojox/grid/cells/dijit",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/date/locale",
"dojo/currency",
"dijit/form/DateTextBox",
"dojox/grid/_CheckBoxSelector",
"dojo/domReady!"
], function(DataGrid, cells, cellsDijit, Memory, ObjectStore, locale, currency,
DateTextBox, _CheckBoxSelector){
function formatDate(inDatum){
return locale.format(new Date(inDatum), this.constraint);
}
gridLayout = [
{
type: "dojox.grid._CheckBoxSelector",
defaultCell: { width: 8, editable: true, type: cells._Widget, styles: 'text-align: right;' }
},
//cells:
[
{ name: 'Number', field: 'order', editable: false /* Can't edit ID's of dojo/data items */ },
{ name: 'ID', field: 'uniqueID', width: 10, editable: false /* Can't edit ID's of dojo/data items */ },
{ name: 'Station ID', field: 'stationID', width: 15, editable: true },
/* No description for each station... at least not yet
{ name: 'Description', styles: 'text-align: center;', field: 'description', width: 10,
type: cells.ComboBox,
options: ["normal","note","important"]},*/
{ name: 'Road', field: 'road', width: 10, editable: true, styles: 'text-align: center;',
type: cells.CheckBox},
{ name: 'Route', field: 'route', width: 10, editable: true, styles: 'text-align: center;',
type: cells.CheckBox},
{ name: 'Count Type', width: 13, editable: true, field: 'countType',
styles: 'text-align: center;',
type: cells.Select,
options: ["new", "read", "replied"] },
{ name: 'Count Duration', field: 'countDuration', styles: '', width: 15, editable: true},
/*
May want to use this later
{ name: 'Date', field: 'col8', width: 10, editable: true,
widgetClass: DateTextBox,
formatter: formatDate,
constraint: {formatLength: 'long', selector: "date"}}, */
]
//{
];
objectStore = new Memory({data:data});
stationGridStore = new ObjectStore({objectStore: objectStore});
// create the grid.
grid = new DataGrid({
store: stationGridStore,
structure: gridLayout,
// rowSelector: '20px',
"class": "grid"
}, "grid");
grid.startup();
// grid.canSort=function(){return false;};
});
}
You haven't included your actual data in the question, but based on one of your columns, I am guessing your data items store a unique identifier in a property called uniqueID. However, dojo/store/Memory by default assumes that unique IDs are in the id property. That mismatch may very well be what's causing your issue.
You can inform dojo/store/Memory that your unique identifiers are under another property by setting idProperty on the instance:
objectStore = new Memory({ data: data, idProperty: 'uniqueID' });
I need to simply add a function in my grid that hide the rows when the user makes the first access. After that, by the icon of minimize/expand that already appears in my grid, the user can expand the group and see the rows. My code is that:
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
hideHeaders: true,
features: [groupingFeature],
columns: [
{text: "Questions",groupable: false, flex: 1, dataIndex: 'species', sortable: true}
],
width: 250,
height:260,
split: true,
region: 'west'
});
// define a template to use for the detail view
var bookTplMarkup = [
'{resposta}<br/>'
];
var bookTp1 = Ext.create('Ext.Template', bookTplMarkup);
Ext.create('Ext.Panel', {
renderTo: 'binding-example',
frame: true,
width: 720,
height: 570,
layout: 'border',
items: [
grid, {
id: 'detailPanel',
autoScroll: true,
region: 'center',
bodyPadding: 7,
bodyStyle: "background: #ffffff;",
html: 'Select one option'
}]
});
Where I add the nedded functions?
I guess the startCollapsed property of grouping feature is what your looking for:
{ ftype:'grouping', startCollapsed: true }