I would like to disable label from Extjs pie chart.
If anyone has an example that would be greatly appreciated.
assuming that we are talking about Ext.chart.series.Pie, which inherits from Ext.chart.series.Series; the 4.x documentation for onCreateLabel(storeItem, item, i, display) states, that when display is set to false, the label will be not be displayed.
the 5.x documentation for Ext.chart.label.Label states, that there is a config hidden.
it's difficult to provide any code, while not even knowing which framework version it is. this question's op should provide more details and/or a fiddle, in order to allow proper answers. embedding ExtJS 5/6 GPL in a "code snippet" did not work out... however, here's a configuration which hides all the labels:
series: [{
type: 'pie',
label: {
display: false
}
}]
Related
I am new to ExtJs ,In this I have a textareafield binding data from API response.
What I want to do is if the response has any url's in it I would like to show a tool tip kind of thing with copy option when user hover on it.Can anyone help me to get this .
code:
xtype: 'textareafield',
fieldLabel: 'Reponse',
name: 'response',
align: 'stretch',
allowBlank: false,
flex: 1
response.setValue(StringUtils.addHtmlBreaks(record.get('response')));
Thanks..
I have created simple fiddle where I have shown one textarea and binded mouse events and shown tip accordingly in this fiddle.
textarea.on('mouseover',function(evt,field){
//Show tip if url matches
},this);
textarea.on('mouseout',function(){
//just hide tip
},this);
and matched url in textarea by text.match(/\bhttps?:\/\/\S+/gi)
In this fiddle I haven't implemented copy thing because I want to confirm if this behavior fits for you. Please check and reply for same, and in case of any edits in code suggest same.
Very simple scenario: I want to have a small grid for a good overview. But when clicking in a cell the editor should have a higher width than the actual column.
Example:
https://fiddle.sencha.com/#fiddle/reg&view/editor
I tried to specify the width and I tried to add it in the afterrender. Width is always exactly as wide as the column. Same problem with textareas.
editor: {
xtype: 'textfield',
enableKeyEvents: true,
selectOnFocus: true,
width: 500,
listeners: {
afterrender: function (field) {
field.setWidth(500);
}
}
}
I thought this should be easy but I couldn't find a way to accomplish that. I can specify the height on a textarea but the width isn't considered.
Check below fiddle.
https://fiddle.sencha.com/#fiddle/27bv&view/editor
Here I have done change for setting width of table node in which cell editor is rendered by Ext.get(Ext.get(Ext.query('div.x-grid-editor')[0]).dom.childNodes[0]).setWidth(300).
This approach is having one limitation- for first time width is not getting set as in beforeedit event we do not get instance of editor.If we get this instance we can apply similar logic for setting editor's width.
please check if it could solve your issue or not.Also let me know for any changes.
Note: I have impl. this thing for first column only.
Okay, I figured out a solution which is pretty close to mine.
afterrender: function (field) {
field.bodyEl.setWidth(500);
}
This works for textareas and textfields with Ext version 5. I found out that in my fiddle I also used the wrong Ext version. Seems not to work with Ext 4.
https://fiddle.sencha.com/#fiddle/27cc&view/editor
I've got a fiddle of a base layout I'm trying to add responsive configurations to.
My goal is to use a border layout where the navigation can change between the western region and the northern region depending on the window size and the layout config can switch between vertical and horizontal so that when the region is west the buttons are grouped vertically and when the region is north the buttons are grouped horizontally.
I know that by default, the layout type cannot be changed at runtime, but I found this forum thread where a user points out that if you use the box layout type (the parent of vbox and hbox) you can update the vertical config to change the grouping at runtime.
The fiddle I linked above is my attempt at prototyping that concept out.
The problem I'm running into is that the responsiveConfig cannot find the setters for the particular properties that I'm trying to change, and it's not just for the vertical config. Config items that I know have setters and I have seen work before in the responsiveConfig are not working as well:
Ext.layout.container.Box definitely has a setPack method.
Am I mis-configured somehow?
I posted to the thread in sencha's forums where the technique I was trying was described. The poster who answered the question originally answered my post with an updated fiddle showing the correct implementation.
I've added the responsive box implementation as well as the region switching into my fiddle.
Here's the responsive sections needed:
plugins: 'responsive',
responsiveConfig:{
wide:{
layout:{
type: 'box',
vertical: true,
pack:'start'
},
region: 'west'
},
tall:{
layout:{
type: 'box',
vertical: false,
pack: 'center'
},
region: 'north'
}
I think the important part to know here (and what was tripping me up) is that you have to include the type: 'box' in the layout config for the responsiveConfig property because responsiveConfig is not firing each individual setter for the layout (type, vertical, and pack), it's firing the overall layout setter method. If you don't include the type config in the object you give the layout config, it uses the default type which is 'auto'.
This is why in the screenshot I included in the original post the error messages in the javascript console where referring to Ext.layout.container.Auto and not Ext.layout.container.Box. The error message was right, Ext.layout.container.Auto doesn't have a setPack method.
Changing layouts at runtime is not currently supported. There is a feature request for it here:
https://www.sencha.com/forum/showthread.php?294082
Fiddle with a workaround:
https://fiddle.sencha.com/#fiddle/dqj
The error is complaining about auto layout having no setter for pack.
This tells me the layout is indeed being set during runtime, according to the value specified in the responsive layout config. Since there is none defined, just the vertical and pack, config, the layout type is interpreted as auto. Small changes in your fiddle, defining the layout type as below:
responsiveConfig:{
wide:{
layout:{
type : 'vbox',
pack:'start'
},
bodyStyle:{'background-color': 'orange'}
},
tall:{
layout:{
type : 'hbox',
pack: 'center'
},
bodyStyle:{'background-color': 'purple'}
}
},
And your error was gone.
When I have a collapsible panel, ExtJs renders an icon in the tools area to expand/collapse, but also puts a little black triangle between the panels to do exactly the same thing.
I found in the documentation that I can hide the icon in the tools area, using hideCollapseTool:true, but I want to hide that little black triangle instead. How to do that?
Did you try split:false on the panel?
In Ext JS 5 (and likely some earlier versions as well) the split configuration parameter can be either a boolean value or a configuration object for an Ext.resizer.BorderSplitter object.
According to the API the collapsible property can be used to manually show or hide the collapse button in the splitter, so you can set that property to false to hide that button you're talking about.
The solution tested and working in 5.1 looks like this, assuming the panel is contained in a container with a border layout:
{
xtype: 'panel',
region: 'west',
split: {
collapsible: false
}
}
P.S. I know this is 2 years late but I found this question while looking for the solution myself. Figured I might as well share the solution from the API.
Edit: Made a fiddle. Also, it's worth mentioning that this retains all of the other splitter functionality that is lost if you use split: false, such as keeping the panel resizable.
I am facing following problems with the Extjs4 pie chart:
I am unable to change pie chart colors
I want to disable legend (not clickable)
please help me..
thanks
Changing pie colors is easy using the colorSet config:
series: [{
type: "pie",
colorSet: ["#f00", "#0f0", "#00f"],
...
}]
Disabling the click-behavior of legend is quite a bit trickier, because it is built in to the LegendItem component and there's no switch to turn it off. You could use the following hack to remove the disturbing listeners from Legend:
Ext.each(chart.legend.items, function(item) {
item.un("mousedown", item.events.mousedown.listeners[0].fn);
})
But I suggest you file a feature request to Sencha, as that kind of built-in behaviour should be configurable.