Just as the title says, is there any way to change the text (or languaje) of the update and cancel buttons while editing a grid?
Thanks,
Edit:
I already changed the text inside RowEditor.js
saveBtnText: 'Update',
to
saveBtnText: 'Example',
but doesn't work
You can override the Ext.grid.RowEditor class like so:
Ext.define(null, {
override: 'Ext.grid.RowEditor',
saveBtnText: 'Salveaza',
cancelBtnText: 'Anuleaza'
});
Here is the working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/27uj.
Assuming that you want to localize your entire application, you should take a looke at this guide from sencha. Basically, you just require the ext-locale package in your app.json
"requires": [
"ext-locale"
]
After this, you should set the locale param (also in app.json) to the desired language:
"locale": "es"
Doing this, you will get all ExtJS components localized.
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
How can i insertContent in the tinymce active editor without triggering the focus on editor ?
UseCase :
When i execute insertContent on editor and the editor is outside of the view port
It inserts the content and scrolls the editor into view - But i don't want the editor to be focused or scroll into view.
As per the docs, you can actually pass additional arguments to insertContent command setting skip_focus to true...but it doesn't seems to be working...
activeEditor?.insertContent(htmlContent as string, {skip_focus: true});
I have tried execCommand to insert content passing skip_focus to true as well...this time it didn't insert the content...
activeEditor.editorCommands.execCommand('mceInsertContent', false, htmlContent, {skip_focus: true});
Tinymce version :
"tinymce": "^5.5.1",
"#tinymce/tinymce-react": "^3.7.0"
One way to accomplish this
activeEditor?.setContent(activeEditor.getContent() + htmlContent);
but looking for a better approach.
Try it
editor.hide();
editor.execCommand('mceInsertContent', false, text);
editor.show();
I have the default Reactify Material UI DataTable that looks like this image
I need to heavily customise it including removing the download and print functionality and add icons into the columns for status and a drop-down added into the actions column. I have been thrown in the deep end with this project and would like to know where to start. I am using Reactify and I am slowly getting used to React so just need direction on what to research and what to learn.
Do I duplicate the mui-datatables node module and start modifying that?
Thanks
You can customized it, just read the docs very carefully.
https://www.npmjs.com/package/mui-datatables
This is the link where you can find its docs and make your data tables customize, for example if you want to remove the download and print functionality you just give false values to download and print option like this
const options = {
print: false,
download: false,
};
You can add icons in the status just change the value in data array. for example
let icon = <i className="ti-close" />
const data = [
["UserName_Value", "Title_Value", icon , "Date_Value", "Action_Value"],
];
Similarly you can add dropdowns to the action columns as well, just read the docs carefully and you will get the answer.
Is it possible to disable the mobile UI feature in tinyMCE, and just show the regular editor?
I'm asking because it only shows a blank screen for me, in mobile (when I click on the "book" icon in the editor box.
I've searched for solutions to the blank page and I only found vague references to "a parent element having overflow set to anything but visible" which didn't help me much.
EDIT November 2019: TinyMCE 5.1 switches to the Silver theme by default on mobile devices. This workaround is no longer necessary.
Our documentation doesn't explicitly explain how to do this, and it isn't something we test so you may run into unexpected issues, but it is certainly possible.
Our mobile UI is implemented as a theme, even in TinyMCE 5, similar to how modern was our desktop theme for version 4 and silver is for version 5. By default when the editor detects it is on a mobile device the theme is set to mobile - we removed this from the v5 docs, but our v4 docs describe the defaults:
tinymce.init({
selector: 'textarea',
mobile: {
theme: 'mobile'
}
});
By extension of this concept, where the mobile block overrides the config, you can specify the mobile theme to be modern in TinyMCE 4, silver in TinyMCE 5 and the desktop interface will show:
tinymce.init({
selector: 'textarea',
mobile: {
theme: 'silver'
}
});
I have created a fiddle to demonstrate this which loads the desktop theme on my phone.
http://fiddle.tinymce.com/C9gaab/1
if you want to enable plugins (image, media, fullscreen etc.):
in config:
...
mobile: {
theme: 'silver'
},
...
in tinymce.min.js:
find
"lists","autolink","autosave"
replace to
"advlist", "autolink", "lists", "link", "image", "anchor", "searchreplace", "code", "fullscreen", "media", "table", "paste", "codesample"
or any plugins you need
I know, that source files should not be edited, but only this method helped me.
config the mobile like this:
mobile: {
theme: "silver",
menubar: false,
height: 300,
max_height: 500,
max_width: 500,
min_height: 400,
statusbar: false,
toolbar: false,
plugins: ["autosave", "lists", "autolink"]
}
Well, I just lost a night of sleep over this, so here's the dirty fix while #spyder can figure it out:
First, download the dev (unminified) version of tinyMCE here
Then, edit the file tinymce.js - Modify the function isOnMobile (should be around line 11930) to always return false, like this:
var isOnMobile = function (isTouchDevice, sectionResult) {
var isInline = sectionResult.settings().inline;
return false; //isTouchDevice && !isInline;
};
Finally, Save your changes and minify again (the unminified file is 1mb!). There are several online tools that can do this for you in case you don't these tools in place already.
Note that this only works if you are self-hosting. It ain't pretty, but until there is an official fix, it WORKS.
I'm answering this from the viewpoint of TinyMCE 6 but I think the same logic would work with TinyMCE 5 if you still want to use it for some reason.
The automatic switch to mobile features is poorly documented, but the logic seems to be that TinyMCE init object can include the property mobile to set defaults for the mobile clients. However, if you don't define this property, the TinyMCE internal default will be used instead of your generic config in the init object! This obviously results mobile clients getting totally different UI from the other clients.
As a result, you should always define the mobile property of your TinyMCE init object and use settings you've tested to work with the tools you use. For example, you could use configuration like
mobile: { // undo default mobile settings applied by TinyMCE core – many of these are not officially supported but seem to work pretty well with modern Android and iOS
resize: true,
object_resizing: "img",
menubar: true,
toolbar_mode: "floating",
toolbar_sticky: true,
table_grid: true,
}
or something similar to that. To see the currently available documentation, see https://www.tiny.cloud/docs/tinymce/6/tinymce-for-mobile/#configuring-mobile
I am new to sencha touch and want to have three tabs icons i.e. Home, Profile/User and Camera. The home icon is currently visible but Profile/User is not. How can I add icon of profile/user and camera to tab in sencha touch?
here is my code for Profile.js
Ext.define('find.view.Profile' , {
extend: 'Ext.Panel',
xtype: 'profile',
config: {
title: 'Profile',
iconCls: 'user',
layout: 'fit',
scrollable: true,
styleHtmlContent: true,
styleHtmlCls: 'profilepage',
html: ['<h1>Profile</h1>'].join('')
}
});
You need to make use of pictos. Before that you need to install Ruby, as well as Sass and Compass. Follow this tutorial to adding new icon mask:
http://www.netmagazine.com/tutorials/styling-user-interface-sencha-touch-application
All the icons you can use in your ST app are located into the directory
resources/themes/images/default/pictos
However, not all are included by default in your application theme.
In order to include those additional icons you need to include the line
#include pictos-iconmask(<YOUR_ICON>);
In your app.scss file and then compile the theme using COMPASS.
If you are not familiar at all with Sencha Touch, I strongly suggest you to take a look at the following video from SenchaCon 2011 on how to style ST apps.
http://docs.sencha.com/touch/2-1/#!/video/theming
PS: Please notice that the "pictos-iconmask" mixin works only on ST < 2.2.0.alpha because from this version, it has been deprecated because of the integration of the Pictos Font.
Camera is not available as iconCls. The following icons are supported (seen here):
action
add
arrow_down
arrow_left
arrow_right
arrow_up
bookmarks
compose
delete
download
favorites
home
info
locate
maps
more
organize
refresh
reply
search
settings
star
team
time
trash
user
For styling your own icon look at #Andrea Cammarata and #user1479606 answers
if you want to add custom icon(which are not listed in pictos ) use this css in place of somename name use your name for icon
.x-tab .x-button-icon.somename,.x-button .x-button-icon.x-icon-mask.somename{-webkit-mask-image:url('path-to-image/facebook-icon.png')}
and use it as
iconCls: 'somename',