I'm using Sencha ExtJS and I added grid panel with check box model. I want to disable some check boxes based on grid panel value. I haven't seen renderer option for checkbox model.
Finally I found a solution. Override the checkbox selection model
renderer: function(val, meta, record, rowIndex, colIndex, store, view) {
var status = record.data['status'];
if(status == 's'){
meta.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
return '<div class="' + Ext.baseCSSPrefix + 'grid-row-checker"> </div>';
} else {
return null;
}
}
source: http://extjswithsandeesh.blogspot.com/2012/05/display-checkboxes-for-selected-rows.html
If you are using extJs-4, it is there: checkbox model
and for extJs-3 you find it here: checkbox model
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 grid, and I need to add an attribute to the TD of the grid cell (not the header, the cell in the grid itself). It will probably be the same text at the column header, so I'd like to just define it in the gridcolumn xtype when I'm creating my columns. In doing some research I've found a tdAttrs config which I think would help, but I'm not entirely sure how to implement it. Can anyone offer some pointers? If that's not the right direction to be looking, please let me know as well.
Also, I need this to be added to ALL the gridcolumns in my application, so would I need to add an override for ext.grid.column.Column or put it somewhere else?
Easiest way to do that is by adding renderer to column definition:
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
metaData.tdAttr += ' new-attr="new-value"';
return value;
}
It requires you to define renderer for each column definition.
You can do it automatically by overriding renderCell in Ext.view.Table.
Try something like this:
renderCell: function(column, record, recordIndex, columnIndex, out){
var origRenderer = column.renderer;
column.renderer = function(value, metaData, record, rowIndex, colIndex, store, view) {
metaData.tdAttr += ' new-attr="new-value"';
return origRenderer ? origRenderer.apply(this, arguments) : value;
}
var result = this.callParent(arguments);
column.renderer = origRenderer;
return result;
}
Basically this code is switching renderer before calling original renderCell implementation. I don't see any other option.
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.
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'
}
}
},