Develop Reference

Extjs: how to render a progress bar with a tooltip in a grid

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
},
}]

How to add a style to a particular column in EXTjs Editor Grid Panel which has column vars?

/*
Need to have pointer cursor only on the particular column instead for whole grid or the row.
*/
this.testRenderer = function(v, m, r, ri, ci, ds) {
var total = formatMoney(r.data["total"], cur);
return total;
};
var columnsVar = [
{
header: getMsg('test', 'testp'),
dataIndex: 'test.name',
sortable: true
},
{
header: getMsg('test', 'testtotal'),
sortable: true,
dataIndex: 'total',
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 48
}),
render:this. testRenderer
}, {
header: getMsg('test', 'active'),
sortable: true,
dataIndex: 'test.Status'
}
];
this.testGrid = new Ext.grid.EditorGridPanel({
title:getMsg('test','Details'),
flex: 3,
cls: 'cnqr-shuttle-grid',
border: false,
header: true,
clicksToEdit: 1,
enableHdMenu: false,
enableColumnHide: false,
enableColumnMove: false,
autoHeight: true,
viewConfig: {
getRowClass : function(record, rowIndex, p, store) {
p.tstyle = ' cursor: pointer;'
},
forceFit: true,
scrollOffset: 0 // the grid will never have scrollbars
},
tbar: new Ext.Toolbar({
ctCls: 'grayButtonToolBar border-toolbar'
}),
store: store1,
selModel: new Ext.grid.RowSelectionModel(),
columns: columnsVar
});
//testGrid is the Ext editor grid and column vars has 3 columns and I need have pointer cursor only on the 2nd column testtotal col. Have tried adding code at the testRenderer and did not work.

On the column you want the pointer on, add the following:
renderer: function(value, metadata) {
metadata.tdCls = 'pointer-only';
return value;
}
And in your CSS add the class:
.pointer-only {
cursor: pointer;
}
Here's a fiddle illustrating this on the last column of a simple grid

renderer: function (value, metadata) {
metadata.style = 'cursor: pointer;';
return value;
}

Slick Grid - formatters.delete not showing in the grid when adding values by input type text

I have a grid with two columns: name and delete. When the user enters to an input text a value and clicks the button, that value is added to the grid. The problem is that the column "Delete" doesn't work,the column "Delete" doesn't display anything. See the code below:
grid = new Slick.Grid("#mygrid", gridData.Selections, columns, options);
grid.setSelectionModel(new Slick.CellSelectionModel());
$("#btnAddValue").click(function () {
var newItem = { "SelectionName": $("#Name").val() };
$('#pickListName').val('');
var item = newItem;
data = grid.getData();
grid.invalidateRow(data.length);
data.push(item);
grid.updateRowCount();
grid.render();
});
var columns = [
{ id: "SelectionName", name: "Name", field: "SelectionName", width: 420, cssClass: "cell-title", validator: requiredFieldValidator },
{ id: "Id", name: "Delete", field: "Id", width: 80, resizable: false, formatter: Slick.Formatters.Delete }];
var options = {
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: true};
How should solve this?
Thank you

EnhancedGrid within another EnhancedGrid

I'm using the dojo grid cell formatter to display an inner grid within another grid. Even though the inner grid is added, it does not display on the HTML page cause its height and width are 0px.
My JSP page and the JS page where the grids are created is shown below. Any help will be appreciated.
My guess is that calling grid.startup() in the cell formatter is probably not the right place. But where should I move the startup() call to -or- is there something else that needs to be done to get the inner grid to render correctly.
----JSP file ----
<script type="text/javascript"> dojo.require("portlets.ListPortlet"); var <portlet:namespace/>args = { namespace: '<portlet:namespace/>', listDivId: 'listGrid' }; var <portlet:namespace/>controller = new portlets.ListPortlet(<portlet:namespace/>args); dojo.addOnLoad(function(){ <portlet:namespace/>controller.init(); }); </script>
</div>
----JS file ----
dojo.declare("portlets.ListPortlet", null, {
constructor: function(args){
dojo.mixin(this,args);
this.params = args;
},
init: function(){
var layout = [[
{field: 'site', name: 'Site', width: '30px' }
{field: 'name', name: 'Full Name', width: '100px'},
{field: 'recordStatus', name: 'Status', width: '80px' }
],[
{field: '_item', name: ' ', filterable: false, formatter: this.formatNotesTable, colSpan: 3 }
]];
this.grid = new dojox.grid.EnhancedGrid({
autoHeight: true,
autoWidth: true,
selectable: true,
query:{
fromDate: start,
toDate: end
},
rowsPerPage: 10
});
this.grid.placeAt(dojo.byId(this.listDivId));
this.dataStore = new dojox.data.JsonRestStore({target: dataURL, idAttribute: idAttribute});
this.grid.setStructure(layout);
this.grid.startup();
},
formatNotesTable(rowObj) {
var gridData = {
identifier:"id",
items: [
{id:1, "Name":915,"IpAddress":6},
{id:2, "Name":916,"IpAddress":7}
]
};
var gridStructure = [{
cells:[
[
{ field: "Name",
name: "Name",
},
{ field: "IpAddress",
name: "Ip Address" ,
styles: 'text-align: right;'
}
]
]
}];
var gridStore = new dojo.data.ItemFileReadStore( { data: gridData} );
var cpane = new dijit.layout.ContentPane ({
content: "inner grid should be displayed below"
});
var subgrid = new dojox.grid.DataGrid({
store: gridStore,
structure: gridStructure,
style: {width: "325px", height: "300px"}
});
subgrid.placeAt(cpane);
subgrid.startup();
return cpane;
}
}

I solved my problem by using a dojox.layout.TableContainer inside the EnhancedGrid.

Hot to disable row selection in Ext.JS grid

How do I disable row selection in an Ext.JS grid?

You must set disableSelection property to true. Its value is ignored if a SelectionModel is specified.
For example:
var grid = new Ext.grid.GridPanel({
disableSelection: true,
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
columns: [
{id:'company', header: "Company", width: 200, sortable: true, dataIndex: 'company'},
{header: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 120, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 135, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
viewConfig: {
forceFit: true,
// Return CSS class to apply to rows depending upon data values
getRowClass: function(record, index) {
var c = record.get('change');
if (c < 0) {
return 'price-fall';
} else if (c > 0) {
return 'price-rise';
}
}
},
width:600,
height:300,
frame:true,
title:'Framed with Checkbox Selection and Horizontal Scrolling',
iconCls:'icon-grid'
});
If you want to disable selection of some rows only, you can add a listener to the SelectionModel "beforerowselect" event and return false when you don't want a row to be selected.

use this config if you don't have a selection model for you grid
var grid = new Ext.grid.GridPanel({
disableSelection: true,
});
else you this little trick to disable selection in the RowSelectionModel
var grid = new Ext.grid.GridPanel({
selModel : new Ext.grid.RowSelectionModel({selectRow: Ext.emptyFn})
});

you can do another trick for your grid, looks like this :
grid.getSelectionModel().lock();