I won't show treegrid icon each node.
I tried using:
1. "iconCls" config, with 'void' value.
2. Using a 'wrong' value.
Finally, I have the same that I expected, 'defaults icons' for all rows.
Someone know any form to delete these icons ?
thanks for all.
Just make sure you give an iconCls of, say treenode-no-icon. I do so in my model:
{name: 'iconCls', type: 'string', defaultValue: 'treenode-no-icon'},
Then in your css include:
.treenode-no-icon
{
display : none !important;
}
This was a few years ago, but here is a solution using ExtJS 6 that I discovered.
Using a custom theme, in the theme file associated with Ext.tree.View, I added the line:
$tree-icon-width : 0px;
My treepanel data now displays without any visible icons.
Related
I have no react, typscript or d3 experience prior to this.
I am trying to build a horizontal bar chart where I can customize the colours of the bar depending on the value of the bar
I have gotten this far. See this chart:
I need to change the conditional formatting customization so the color is not entered from a drop down and is a text area where I can enter the hex code.
This is what I need to change and the condiditional formating I am talking about. It is on the table chart:
I have traced it back to the following code in controlPanel.tsx
{
label: t('Options'),
expanded: true,
controlSetRows: [
[
{
name: 'conditional_formatting',
config: {
type: 'ConditionalFormattingControl',
renderTrigger: true,
label: t('Conditional formatting'),
description: t(
'Apply conditional color formatting to numeric columns',
The actual pop up where you enter the field and color you want to associate the colour appears to be in
/superset/superset-frontend/src/explore/components/controls/ConditionalFormatingcontrol folder. So what I was hoping to do was to copy that, make my changes and call it. However I have no idea how I need to compile it and no idea how to call it
My guess was I could change the type below to the name of the copy of the component I created if I had compiled things correctly
name: 'conditional_formatting',
config: {
type: 'ConditionalFormattingControl',
Can anyone help me?
The available chart customization controls for a chart in superset set appear to be located in
/superset/superset-frontend/src/expore/components/controls
The list of chart customization controls exported that are available for list is in
/superset/superset-frontend/src/expore/components/controls/index.js
To customize one or to create a new component for customizing a custom chart in superset copy put in the directory listed above that you have copied and changed from the directory above or created and change the index.js file so that it is exported for use
Is there a way to define a custom header template for a dynamic dialog?
For the normal dialog you have the possibility to define the p-header tag, with your custom html code.
But I don't find any way to do this for a dynamic dialog.
There is no official way mentioned in PrimeNG documents to add custom template to DynamicDialog header. When we open a DynamicDialog, we only attach a body of Dialogbox and not header/footer.
You can add dynamic title to DynamicDialog while opening it. Hope this will help.
const ref = this.dialogService.open(DialogComponent, {
data: this.data,
header: this.title,
width: '60%'
});
You can modify css of DynamicDialog header like:
::ng-deep .p-dialog .p-dialog-header {
border-bottom: 1px solid #000;
}
Important Note:
You can use simple Dialog in PrimeNG where you can create custom headers,body & Footers. It will work same like DynamicDialog. Do mention modal=true like below:
<p-dialog [(visible)]="display" [modal]="true">
<p-header>
Header content here
</p-header>
Content
<p-footer>
//buttons
</p-footer>
The answer is a little bit late. But maybe someone else is also searching for a workaround. Afaik it is still not possible since this issue on GitHub is still open.
However in documentation to DynamicDialog there is mentioned, that you can not show the header with the parameter showHeader. This means you could easily just hide the default header and in the component for your dialog design your own header.
I'm trying to mimic the behavior of the Sencha ExtJS example at this URL:
http://examples.sencha.com/extjs/6.0.2/examples/kitchensink/#form-contact
Specifically, they show the code but I don't see any place that cause the circled red exclamation point to be drawn whent he field is required.
I'm also wondering if there is a better way to get the red "*" after each field label. It looks like they repeat the code on every field definition which feels like an anti-pattern to me.
***UPDATE
Per #CD, this is how to get the red icon
defaults: {
anchor: '100%',
labelStyle: 'font-weight:bold;padding:0;',
msgTarget: 'side'
},
For the error icon have a look at msgTarget: 'side':
The location where the error message text should display. Must be one
of the following values:
qtip Display a quick tip containing the message when the user hovers
over the field. This is the default.
Ext.tip.QuickTipManager.init must have been called for this setting to
work.
title Display the message in a default browser title attribute popup.
under Add a block div beneath the field containing the error message.
side Add an error icon to the right of the field, displaying the message in a popup on hover.
none Don't display any error message. This might be useful if you are implementing custom error display.
[element id] Add the error message directly to the innerHTML of the specified element.
For adding the red "*" try this override:
Ext.define('Overrides.form.field.Base', {
override: 'Ext.form.field.Base',
initLabelable: function () {
this.callParent(arguments);
if (!this.allowBlank) {
this.labelSeparator += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
}
}
});
This appears on all of the columns in my grid:
Chrome 28.0.1500.72 m:
Firefox 21.0:
All of the columns in my table look something like this:
{
text: 'Audit Type',
width: 100,
sortable: true,
dataIndex: 'requestType'
},
I have no idea what's causing this. The javascript console shows no errors about missing images either.
Any help that could point me in the right direction would be greatly appreciated
More info
I'm using Chrome Version 28.0.1500.72 m and Extjs 4.2.1.883
My app is run on my own computer... so a local server. I'm using Play Framework with Scala on my backend.
Oh what silliness.
I did this earlier:
.x-panel {margin: 8em;}
This ended up moving the entire grid except for the menu shadows.
Giving the grid an id property in its definition and having this instead in my stylesheet solves the problem:
#grid {margin: 8em;}
I seem to be struggling with something I have used a million times! I dont understand why all of a sudden it doesnt work anymore :)
My Layout
an accordion
> toolbar
> tabs
>tab 1
> form.panel 1
> textfield (alias: 'widget.mytextfield')
> form.panel 2
>tab 2
> form.panel 1
Now heres the problem... when im at panel 1 and I try to access the textfield (mytextfield)
//panel, being 'tab 1 > panel 1'
var textfield = panel.down('mytextfield')
It just returns null.
My output for
console.info(panel.down());
is the header of the panel (so im def at the right location) -> it seems as if it cant find the body of the panel
Any ideas? Totally stuck!
The only way I get get 'mytextfield' is with
var textfield = panel.items.items[0];
But if the textfield changes order then the above code wouldnt work anymore of course
Thanks in advance!
UPDATE
Ok, I've figured something out... which is strange
If I take the textfield out of the panel and place it in a separate file. Then include it using requires. I can access the textfield with .down()
For example in my main form panel
...
requires:['App.view.MyTextField'],
items:[{
xtype:'mytextfield' //i can access you with .down()
},{
xtype:'textfield',
alias:'widget.mytextfield2' //you are showing up - but I CANT access you with .down() - only panel.items.items[0]
}]
...
MyTextField
Ext.define('App.view.MyTextField', {
extend:'Ext.form.field.Textfield',
alias:'widget.mytextfield'
});
Any ideas why?
How and where do you get your parent panel component?
http://jsfiddle.net/UBb8n/1/ — works for me.
UPDATED:
According to documentation:
alias:
List of short aliases for class names.
Most useful for defining xtypes for widgets.
So keep in mind that items: {xtype: 'blah'} != Ext.define('My.Class.Blah', {alias: 'widget.blah'}).
First it's just an instantiation of the second one.
And alias: 'widget.mycoolpanel' is just a shorthand for helper function Ext.widget that searches components with xtype: 'widget.<…>'.