We have been using tips configuration of series in order to set interactive tips for ExtJS 4 & 5. But with ExtJS 6, it does not work anymore. So what is the proper way of showing tips using ExtJS 6 chart package?
series: [{
type: 'pie',
field: 'count',
showInLegend: true,
donut: false,
tips: {
trackMouse: true,
width: 140,
height: 40,
renderer: function(storeItem, item) {
this.update(storeItem.get('name') + ':' + storeItem.get('count'));
}
}
}]
It looks like the tooltip renderer method arguments have been swapped around between versions, otherwise your fiddle is almost there. The this keyword appears to be the series rather than the tooltip - it's best not to rely on the JS context in ExtJS anyway and Sencha appear to be making efforts while refactoring the API, to ensure that you can consistently expect a reference to the relevant component as the first argument of any callback.
If you look at the series-tooltip in the API it will confirm that the first argument is a reference to the tooltip and the second argument is the selected record - so you can update a tooltip as follows:
{
xtype: 'pie'
// ...
tooltip: {
// ...
renderer: function(tip, item){
tip.update(item.get('name') + ': ' + item.get('count'));
}
}
}
ยป updated fiddle
Seems you switched from ext-charts to sencha-charts.
It is no more tips property for Series :
ExtJS 4 - http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.chart.series.Series-cfg-tips
ExtJS 6 - http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.chart.series.Series
Try tooltip property it should be the same as tips before
tooltip: {
trackMouse: true,
renderer: function(toolT, storeItem) {
toolT.setHtml('dummy tooltip');
}
}
Try this.
Related
I have this snippet code
Ext.define('FieldGrid', {
alias: 'fieldGrid',
extend: 'Ext.grid.Panel',
dock: 'left',
selModel: {
mode: 'SIMPLE'
},
columns: [
{
text: 'TODO Sites',
dataIndex: 'text',
flex: 1
}
],
bodyStyle: {
background: '#FFFFFF'
},
filterOn: true,
hideHeaders: true,
width: 400,
maxHeight: 400,
baseStore: store,
selectedIds: Ext.flatten(selectedIds),
fieldGridConfig: {
plugins: 'bufferedrenderer',
height: 400
}
})
When I have some rows selected initially then I filter the grid, this ends with the error below
Uncaught Error: rendered block refreshed at 16 rows while BufferedRenderer view size is 46
Any help we will be appreciated
Had a similar problem with refreshing a grid with locked columns. So instead of just doing grid.getStore().reload(); you need to do:
grid.suspendLayouts();
grid.getStore().reload();
grid.getView().refresh();
grid.resumeLayouts();
If you have a similar problem ExtJS will crash in syncRowHeightFinish function.
You might want to use this patch to avoid crashes in other cases (tested for ExtJS 6.2.1):
Ext.define('Ext.ux.view.TableSyncPatch', {
override: 'Ext.view.Table',
syncRowHeightFinish: function(synchronizer, otherSynchronizer) {
var ln = synchronizer.length,
bufferedRenderer = this.bufferedRenderer,
i;
if (ln > otherSynchronizer.length){
ln = otherSynchronizer.length;
console.warn('[TableSyncPatch] synchronizer.length!=otherSynchronizer.length');
}
for (i = 0; i < ln; i++) {
synchronizer[i].finish(otherSynchronizer[i]);
}
// Ensure that both BufferedRenderers have the same idea about scroll range and row height
if (bufferedRenderer) {
bufferedRenderer.syncRowHeightsFinish();
}
},
}
// Warn if un-tested for specific version.
, function() {
if (!Ext.getVersion().match('6.2.1')) {
Ext.log({
msg: 'This patch has not been tested with this version of ExtJS',
level: 'warn'
});
}
});
After spinning longtime on google, I end with the solution below, i hope this may help.
I was can of using this
mygrid.getView().bufferedRenderer.scrollTo(0);
to scroll on the top after filtering my grid. This cause that error.
To fix it , I have to refresh my buffer view first
mygrid.getView().bufferedRenderer.refreshView(0);
mygrid.getView().bufferedRenderer.scrollTo(0);
Use grid.getView().refresh() before whatever you are trying to do.
In my case I was trying to use grid.ensureVisible(record, {animate : true, highlight : true}) and got this error. Refreshing the grid view before above statement solved the issue.
i set bufferedRenderer: false and fixed for me.
I'am trying to display Sencha Touch 2 selectfield with very long option text but text gets truncated with Ellipsis, like Very long option t....
How to display couple lines in one option?
Code:
{
xtype: 'selectfield',
options:[
{
text: 'Very long option I wish to splint into two separate lines',
value: 0
},
{
text: 'Another very long option I wish to splint into two separate lines',
value: 1
}
]
}
I've tried using \n and <br/> but is not working.
There are 3 two ways to do this.
use labelWrap config option set to true.
This will avoid truncating text that appears on selectfield initially. Later when you tap on selectfield; you've two choices. Using picker or list. picker will be used only if you set it to true in usePicker config. If you are on tablet, desktop or mobile default list will be shown containing options. Using labelWrap config will not be usefull if options are displayed in list after tap on selectfield.
Use following CSS override to avoid truncating.
.x-list-item-label{
height: 100% !important;
}
.x-list-label{
white-space: pre-wrap !important;
}
This override along with above mentioned labelWrap config set to true will make both list and selectfield display whole text neatly. But this will override styles that may affect appearance of other lists in your app.
Third approach that can be is to override Ext.field.Select and create custom select field. In this style, you need to just override following method - getTabletPicker that generated the list displayed on tap of selectfield. Code from ST source is as fallows -
getTabletPicker: function() {
var config = this.getDefaultTabletPickerConfig();
if (!this.listPanel) {
this.listPanel = Ext.create('Ext.Panel', Ext.apply({
centered: true,
modal: true,
cls: Ext.baseCSSPrefix + 'select-overlay',
layout: 'fit',
hideOnMaskTap: true,
items: {
xtype: 'list',
store: this.getStore(),
itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + ':htmlEncode}</span>',
listeners: {
select : this.onListSelect,
itemtap: this.onListTap,
scope : this
}
}
}, config));
}
return this.listPanel;
}
Check out the line itemTpl and cls config. Here both options set styles that are defined for list. These will decide the appearance of list displayed on tap of selectfield. This approach might sound dirty. But it's useful, if you want to make some drastic changes in appearance and behaviour.
I got grid with columns:
...
columns: [
{
xtype: 'rownumberer'
}, {
xtype: 'checkcolumn',
sortable: false,
header: 'done',
dataIndex: 'status',
flex: 2,
width: 55,
callback: function(success, model) {
this.setRawValue(success); // DOESNT WORK
this.setValue(success); // DOESNT WORK
},
}
...
I would like to change checkbox state to checked or unchecked. Functions setValue() or setRawValue() have no effect for the checkbox - moreover - there are not available for
the widget.
Is there simple function like setChecked(boolean) in extjs for checkcolumn?
It is ridiculous I have instance 'checkcolumn' but I can't find basic function.
I will be glad for any hint. Thank you.
Bogus
for record in grid store with 'fieldName' checkcolumn write
record.set('fieldName',false)
or
record.set('fieldName',true)
it make field selected/deselected
the most simple way is to do it in the store , you can add a new boolean field in the store with default of true to do that , and later just change that boolean in the store and the grid will be reflected with the changes
How can I remove the icon in this actioncolumn item within its handler?
{
header: 'Activate',
xtype: 'actioncolumn',
align: 'center',
width: 30,
sortable: false,
items: [{
icon: './Scripts/extjs/examples/shared/icons/fam/accept.png',
tooltip: '',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
if (rec.get('status') == '1') { // if active, don't show icon
this.up('actioncolumn').icon = '';
}
}
...
In general, it can't - configs are applied at initialization time, and sadly the ExtJS API doesn't always provide ways to change things as easily as they are specified in configs.
In the case of an ActionColumn, you can see in the source that the icon is used to generate a renderer function in the constructor and there's no way to set it afterwards.
To dynamically decide whether to show an icon or not, you'll need to use iconCls instead, see here.
I'm trying my hands on extjs 4 by trying to recreate some component I have in an old extjs 2 project.
One of the component was creating a floating toolbox (like you get with photoshop) with a thin border and no title or min/max/close buttons. Like so..
In ext4 , I can't seem to be able to reproduce that same result. Here's what the same code looks like in ext 4:
This is the code I had:
app.Toolbox = Ext.extend(Ext.Window, {
,initComponent : function()
{
Ext.apply(this,{
closable:false,
border:false,
width:345,
height:60,
onEsc:Ext.emptyFn,
resizable:false,
x:20,
y:20,
items:[
/* icons (a html items) */
]
});
app.Toolbox.superclass.initComponent.call(this, arguments);
}
/* handlers, methods, etc */
});
Is there any way to get a similar result in ext 4?
I tried using some css to hide some elements like the title bar, but ext 4 always calculates the height of the window as if the element was visible, which looks even weirder.
Any idea?
Ext.panel.Header is just an extended Ext.container.Container so you can do as you wish to it.
I think the closest you're going to get is by applying frame: true which kind of forces the content to fill the window frame.
However, it doesn't seem to work if you have a Close button in the top right.
Ext.create('Ext.window.Window', {
height: 60,
width: 345,
closable: false,
layout: 'fit',
frame: true,
items: {
html: '<p>hello</p>'
}
}).show();
You're still going to have to style it a little, but its far closer to what you need.