What is the event that fires when the data in a DataGrid are recharged or rendered?
For example, a DataGrid showing the results of a filtered search. Every time you click on the Search button with a different filter, the results (number of rows) of the DataGrid are different.
what are you trying to do? You can add a renderer on each of your columns like this:
{
text: 'ChangedCaption',
dataIndex: 'myBoolean',
renderer: function (value, metaData, record, rowIndex, colIndex, store) {
if (value == true) {
return 'Y'
} else {
return 'N'
}
}
},
Related
I'm currently implementing part of a project in ExtJS, the requires me to modify an existing grid to only show checkboxes on rows with a certain status(different than AN, NP, RS), this status is determined by the value in record.data.codiceStato :
selectionModel = Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
listeners: {
select: function (sm, idx, rec) {
alert("Look ma!");
},
beforeSelect: function (sm, idx, rec) {
if (idx.data.codiceStato == 'RS' || idx.data.codiceStato == 'AN' || idx.data.codiceStato == 'NP')
return false;
}
},
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
if (record.data.codiceStato != 'RS' && record.data.codiceStato != 'AN' && record.data.codiceStato != 'NP')
return '<div style="margin-left: -1px;" class="' + Ext.baseCSSPrefix + 'grid-row-checker"> </div>';
else
return '';
}
});
I have written a check in my beforeSelect listener in order to avoid the checkbox selecting the rows that do not have this status and it works. The only problem is with the header checkbox now, in fact, when I click on it the first time it enables all the rows with a checkbox, but then it doesn't uncheck them when I click on it again. Any solutions ? Thank you
Basically there's a bit of code (Ext.selection.CheckboxModel.updateHeaderState) that determines whether the header needs to be checked by seeing whether selected.count = store.count. In your case it doesn't, so you need to override this function in your code so that selected.count = selectable.count.
It's a private method though, so Sencha don't guarantee keeping it around across versions, so you need to keep an eye on it once you upgrade.
Basically take your selmodel and add an object. This will overwrite the one that normally exists in the framework.
var selModel = Ext.create('Ext.selection.CheckboxModel', {
...
updateHeaderState: function() {
// copy code from your Ext framework here, but modified for your use case
}
});
How to define custom tooltip for a column in extjs grid? there is a listener for grid which apply QuickTips for whole grid but I want a column has a custom tooltip and ignore global tooltip. here the listener code on grid:
listeners: {
itemmouseenter: function (view, record, item, index, e, options)
{
if (e.getTarget().textContent.length > 11)
Ext.QuickTips.register({
text: e.getTarget().textContent,
trackMouse: true,
target: e.target
});
},
}
I try to add this code to column,but still global one works.
By using renderer of grid column you can show the tooltip. something like
var myRenderer = function(value, metaData, record, rowIndex, colIndex) {
if (colIndex === 0) {
metaData.tdAttr = 'data-qtip=' + value;
}
// additional logic to apply to values in all columns
return value;
}
https://docs.sencha.com/extjs/6.0.2/classic/Ext.grid.column.Column.html#cfg-renderer
I have a gridpanel and one of my column like
columns: [
...
{ text: 'Name', dataIndex: 'name' , width: 200,
renderer: function (value) {
// how to get width of this column (200)
//alert(this.width); // this is width of gridpanel
}
}
...
],
how to get width of this column thanks.
Fairly certain this isn't the ideal way to do it, but it works. There are lots of other values passed to the renderer function besides just the value. Via dom inspection, this will get you the column width, but I don't think it's something I would trust to work as they update ExtJS:
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
return view.ownerCt.columns[colIndex].getWidth();
}
Alternatively, you could use component query to get the grid panel view, use the row index to find the column, and then get it's width the same way:
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
var grid = Ext.ComponentQuery.query('#gridId')[0];
return grid.columns[colIndex].getWidth();
}
I really don't know what is the better option in this case, and don't really know why they pass the gridview rather than the gridpanel as the view in the renderer function. In any case, this should get you started, good luck.
I am trying to make a live search combo box and everything is working great except for one small detail. I want to call a search method as the user presses the down and up keys through the combo box. This does trigger a select event but the piker has no selection. When I select a combobox item with my mouse or by pressing enter the select event does get a selection. I want to launch queries using the value selected with the down and up keys while navigating the box.
Combo code
searchField = new Ext.form.ComboBox({
id:'searchField',
store: queryCacheStore,
pageSize:0,
width: 780,
triggerAction:'all',
typeAhead:false,
mode:'remote',
minChars:2,
forceSelection:false,
hideTrigger:true,
enableKeyEvents:true,
queryDelay:200,
queryMode:'remote',
queryParam:'query',
queryCaching:false,
displayField:'query',
autoSelect:false,
listConfig:{
loadingText: 'Searching...',
// Custom rendering template for each item
getInnerTpl: function() {
return '<div class="search-item">' +
'{query}' +
'</div>';
}
},
listeners: {
specialkey:function (field, e) {
if (e.getKey() == e.UP || e.getKey() == e.DOWN) {
}
},
select:function (combo, selection) {
var post = selection[0];
searchField.setValue(post.get('query'));
requestAccessList.runSearch();
},
focus:function (combo, event, opts) {
combo.store.proxy.extraParams = {
'lcm':true,
'type':RequestAccess.OBJECT_TYPE
}
}
}
});
So when
select:function (combo, selection) {
gets called with down arrow key or up arrow key then selection is null. When it gets called with enter key or mouse click it has the highlighted combobox selection. So the question is how can I get the value of the combo box from arrow key events?
OK I figured this out myself. You have to override the highlight event of the BoundListKeyNav
Ext.view.BoundListKeyNav.override({
highlightAt:function (index) {
// this.callOverridden(index); For some reason this does not work
var boundList = this.boundList,
item = boundList.all.item(index);
if (item) {
item = item.dom;
boundList.highlightItem(item);
boundList.getTargetEl().scrollChildIntoView(item, true);
searchField.setValue(boundList.getNode(index).textContent);
searchService.runSearch();
}
}
});
I added the following listConfig to a combobox to accomplish something similar:
listConfig: {
listeners: {
highlightitem: function(view, node, eOpts) {
combo.setValue(node.innerText);
}
}
}
It updates the combo box text field value on mouse over and key up/down.
I have grid in my application, I need to show/hide particular column conditionally. Please help me.
Code:
{
header: 'Type', dataIndex: 'mirror', flex: 1, sortable: true,
renderer: function (value, meta, record, rowIndex, colIndex, store) {
if(value == '')
return "-";
else
return value;
}
}
currently it shows - incase no records,but I need to remove column incase no record found.
Columns have a hide method which you can use. For example, take a look at this example that show you how to hide an specific column in runtime.
If you want to hide/show a the column depending on a condition, you have to evaluate that condition and use the hide & show methods.