I need to make a tooltip appear in the column header with ellipsis.
Method isOverflow, dont work,because my header el.scrollWidth = el.offsetWidth
isOverflow: function (el) {
return el.scrollWidth > el.offsetWidth;
},
I normally do this on column resize:
listeners:{
columnResize: {
fn: function (ct, column, width, eOpts){
//check overflow
if (column.textEl.dom.offsetWidth<column.textInnerEl.dom.offsetWidth-5){
var tip = Ext.create('Ext.tip.ToolTip', {
target: column.titleEl.dom,
html: column.text,
autoDestroy: true
});
column.tooltip = tip;
} else {
//Remove when title visible
if (column.tooltip!=null)
column.tooltip.destroy();
}
}
}
}
Related
I have a pivot grid which display if the users have create,read,update,delete" permissions, the users are agrouped in this way departaments > estabilishments > sectors > users and i want the user to be able to edit this fields.
I already tried using with a renderer:
aggregate: [{
renderer: function(value, record, dataIndex, cell, column) {
var id = Ext.id();
Ext.defer(function() {
Ext.widget('checkbox', {
renderTo: id,
checked: value,
listeners: {
change: {
fn: function(event, target) {
//some function here
}
}
}
});
}, 100);
return Ext.String.format('<div id="{0}"></div>', id);
},
aggregator: 'aggCheckBoxR',
dataIndex: 'Incluir',
header: 'Incluir'
}]
and with a widget column:
aggregate: [{
aggregator: 'aggCheckBoxR',
column: {
xtype: 'widgetcolumn',
widget: {
xtype: 'checkbox',
listeners: {
change: function(cb) {
//some function here
}
}
}
},
dataIndex: 'Incluir',
header: 'Incluir'
}]
My Aggregator:
aggCheckBoxR: function(records, measure, matrix, rowGroupKey, colGroupKey) {
if (records.length > 1) {
let checkAllTrue = true;
for (var i = 0; i < records.length; i++) {
if (records[i].get('Incluir') === false || records[i].get('Incluir') === 0) {
checkAllTrue = false;
}
}
return checkAllTrue;
} else {
return records[0].get('Incluir');
}
}
The checkbox apears on the grid but my problem is the data "dont persist", whenever i expand or collapse a left axis on the pivot grid the value of the checkbox returns to its original value, how can i persist this data?
Already tried update the record manualy
change: function(cb) {
var nomeCmp = cb.getWidgetRecord().data._compactview_;
Ext.getStore('acesso.ColabStore').findRecord('Nome', nomeCmp).data.Incluir = true;
}
But still, it doestn't work.
EDIT: Had to change the column object event listener to:
{
xtype: 'widgetcolumn',
widget: {
xtype: 'checkbox',
listeners: {
afterrender: function(component, eOpts) {
console.log('after,render');
component.getEl().on('change', function(e, el) {
console.log('change func here');
})
}
}
}
}
With this, the change event is only fired when the users check a checkbox, and finally, I could use
norbeq's answer
You can update the record manually using:
record.set('Incluir',true);
and if you dont wan't to send changes to server:
record.commit();
i have done toolpip for compobox list items
listConfig: {
itemTpl: [
'<div data-qtip="{description}">{mydisplayField}</div>'
]
now I'm trying to show tooltip for selected item,current value
i have search many times but I cant can't do to this .
If you have done task like this pleas tell me.
it was so easy
on afterrender
var fieldStore = field.getStore();
Ext.create('Ext.tip.ToolTip', {
target: field,
listeners: {
beforeshow: function updateTipBody(tip) {
var value = field.getValue();
if (!value && value !== 0) {
return false; //not show
}
var record = fieldStore.getById(value);
tip.update(record.get('description'));
}
}
});
I am using below code to display Tool Tip for Grid cell In ExtJS 6
{
header: 'Name',
cls: 'nameCls',
locked: true,
tdCls: 'nameTdCls',
dataIndex: 'name',
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
metaData.tdAttr = 'data-qtip= "' + value + '" data-qclass="tipCls" data-qwidth=200';
return value;
}}
When i run the application it doesnt show the tooltip and display below error message.
Any idea guys??
Thanks in advance guys.
Regards,
Mahendra
Have you tried creating an Ext.tip.ToolTip? You can create a single one to serve as tooltip for each name cell (using delegate) and update it with the value of that cell. Set up a grid render listener to create the tooltip like this:
render: function(grid) {
var view = grid.getView();
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: view.getId(),
delegate: view.itemSelector + ' .nameTdCls',
trackMouse: true,
listeners: {
beforeshow: function updateTipBody(tip) {
var tipGridView = tip.target.component;
var record = tipGridView.getRecord(tip.triggerElement);
tip.update(record.get('name'));
}
}
});
}
For a working example, see this Fiddle.
Thanks for Robert Klein Kromhof!
grid columns:
columns: [{..., tdCls: 'tip'}]
grid listeners:
render: function (grid) {
var view = grid.getView();
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: view.getId(),
delegate: view.itemSelector + ' .tip',
trackMouse: true,
listeners: {
beforeshow: function (tip) {
var tipGridView = tip.target.component;
var record = tipGridView.getRecord(tip.triggerElement);
var colname = tipGridView.getHeaderCt().getHeaderAtIndex(tip.triggerElement.cellIndex).dataIndex;
tip.update(record.get(colname));
}
}
});
},
destroy: function (view) {
delete view.tip;
}
Create independent function and call when you need.
var grid = Ext.getCmp('your_grid_id'); // Enter your grid id
initToolTip(grid); // call function
initToolTip: function(grid) {
var view = grid.view;
// record the current cellIndex
grid.mon(view, {
uievent: function(type, view, cell, recordIndex, cellIndex, e) {
grid.cellIndex = cellIndex;
grid.recordIndex = recordIndex;
}
});
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: '.x-grid-cell',
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
if (!Ext.isEmpty(grid.cellIndex) && grid.cellIndex !== -1) {
header = grid.headerCt.getGridColumns()[grid.cellIndex];
columnText = grid.getStore().getAt(grid.recordIndex).get(header.dataIndex);
tip.update(columnText);
}
}
}
});
}
I'm searching two days and can't find how to get access to actioncolumn component (NOT html) on rowselect. I need to set event on icon click using Saki's component communication technique (source).
My column looks like:
I found a way how to show/hide buttons on change row selection (this code uses in GridPanel):
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
beforerowselect: function(grid, rowIndex, record) {
// 7 is the last cell index
var cell = grid.grid.getView().getCell( rowIndex, 7 );
//select icons in cell
var icons = Ext.DomQuery.select('.x-action-col-icon', cell);
//for each DOM element
Ext.each(icons, function(icon, index) {
currentIcon = Ext.get(icon);
//if not 1st button
if (index !== 0) {
//Delete class that hides. Class 'x-hidden' also works
currentIcon.removeClass('x-hide-display'); //show icon
}
});
},
rowdeselect: function(grid, rowIndex, record) {
// 7 is the last cell index
var cell = grid.grid.getView().getCell( rowIndex, 7 );
//select icons in cell
var icons = Ext.DomQuery.select('.x-action-col-icon', cell);
//for each DOM element
Ext.each(icons, function(icon, index) {
currentIcon = Ext.get(icon);
//if not 1st button
if (index !== 0) {
//Delete class that hides. Class 'x-hidden' also works
currentIcon.addClass('x-hide-display'); //show icon
}
});
}
}
});
Ok. Next. I want to show another window on click (set click event). But I don't know how to get access from Window/Viewport:
//get items
this.loanGrid = this.items.itemAt(0);
this.documentsGridWindow = this.items.itemAt(2);
//add events
this.loanGrid.on ({
scope: this,
afterrender: function() {
selModel = this.loanGrid.getSelectionModel();
selModel.on({
scope: this,
rowselect: function (grid, rowIndex, keepExisting, record) {
//HOW TO GET actioncolumn 2nd button here???
}
});
}
});
I also tried to set id to this icon on beforerowselect, but on rowselect this code Ext.getCmp('icon-id') returns undefined.
up() and down() functions not helps me too =(
HELP please! =)
p.s. Sad, but Ext.ComponentQuery works only from ExtJS 4.
So finally I re-wrote some parts of my application.
First we need to add some options to actioncolumn:
dataIndex: 'action',
id: 'action',
Grid row buttons show/hide now is independent of actioncolumn move:
/**
* buildSelectionModel
*/
buildSelectionModel: function() {
var sm = new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
scope: this,
rowselect: function(grid, rowIndex, record) {
this.toggleFirstButtonShowState(grid.grid, rowIndex);
},
rowdeselect: function(grid, rowIndex, record) {
this.toggleFirstButtonShowState(grid.grid, rowIndex);
}
}
});
return sm;
},
/**
* toggleFirstButtonShowState
*/
toggleFirstButtonShowState: function(grid, rowIndex) {
//'action' is data index of
var colIndex = this.getColumnIndexByDataIndex(grid, 'action');
console.log(colIndex);
// 7 is the last cell index
var cell = grid.getView().getCell( rowIndex, colIndex);
//select icons in cell
var icons = Ext.DomQuery.select('.x-action-col-icon', cell);
//for each DOM element
Ext.each(icons, function(icon, index) {
currentIcon = Ext.get(icon);
//if not 1st button
if (index !== 0) {
//Show/delete class that hides. Class 'x-hidden' also works
currentIcon.toggleClass('x-hide-display'); //show/hide icon
}
});
},
getColumnIndexByDataIndex: function(grid, dataIndex) {
//columns
gridColumns = grid.getColumnModel().columns;
for (var i = 0; i < gridColumns.length; i++) {
if (gridColumns[i].dataIndex == dataIndex) {
return i;
}
}
Viewport part:
//get selection model
selModel = this.loanGrid.getSelectionModel();
selModel.on({
scope: this,
rowselect: function (grid, rowIndex, keepExisting, record) {
//get second icon in actioncolumn
var icon = grid.grid.getColumnModel().getColumnById('action').items[1];
//save context
var self = this;
//add handler by direct set
icon.handler = function(grid, rowIndex, colIndex) {
//open documents window
self.documentsGridWindow.show();
};
}
});
All works as expected!
i am using checkboxmodel to select rows but i want to make some rows to be selection disabled based on some logic...
here is my what i am trying but 'beforeselect' function doesn't even fires
selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
mode:'multi',
listeners: {
beforeselect:function(grid){
var grid=Ext.getCmp('mylist');
var selectionModel=grid.getSelectionModel();
var selectedRecords=selectionModel.getSelection();
var myValue=selectedRecords[0].get('nowreceive');
var myvalue1=selectedRecords[0].get('received');
if(myValue>myvalue1)
{return false;}
else
return true;
}} }
),
beforecellmousedown event in the view config works for me.This is done in the viewconfig of the grid...
viewConfig: {
listeners: {
beforecellmousedown: function(view, cell, cellIdx, record, row, rowIdx, eOpts){
var myvalue=record.get('quantity_ordered');
var myvalue1=record.get('quantity_received')
if(myvalue==myvalue1)
{
return false;
}
else {
return true;
}
}
}
},
How do you know the event is not firing? It should be, but my guess is that selectedRecords[0] is not defined and that crashes your execution, because getSelection() probably returns an empty array, before any selection has occurred.
What you should do is to use the second argument of beforeselect, which is the record that's going to be added to the selection.
So you can implement your listener in a much simpler way:
beforeselect: function (selModel, record) {
if (record.get('nowreceive') > record.get('received')) {
return false;
}
}