I have used mask on loading in my view.
Right now it is showing me default loading image (x-mask-loading)
I want to add my own image instead of that default image.
Can anybody having some idea?
Please let me know.
You can change loading icon by appliing css rules to loadMask Element (see loadingCls config):
Ext.create('Ext.view.View', {
loadingCls: 'custom-loader'
// ...
});
/* CSS */
.x-mask-msg .custom-loader {
background-image: url(http://example.com/custom-loading.gif);
}
Check out a demo.
UPDATE
This doesn't work anymore with extjs 4.2. Checkout the new version. Any idea how to fix this?
This is strange but sencha doesn't provide api (at least I didn't find one) for changing loadMask icon. So the only option is to fiddle with css again:
/* CSS */
.x-mask-msg .custom-loader .x-mask-msg-text {
background-image: url(http://example.com/custom-loading.gif);
}
ExtJs4.2 demo.
Related
I have a component A that should dynamically change the font size of some of it's contents. I currently use CSS variables to do that and the component will contribute some CSS String containing these CSS variables:
public void renderHead(IHeaderResponse response) {
String fontCss = // dynamically fetch CSS cariables
response.render(CssHeaderItem.forCSS(fontCss, "font-css"));
}
On the same page I have the possibility to change these font sizes using an AJAX update within another component B. This will add the component A to the AjaxRequestTarget, which will cause the renderHead method to be executed with updated values for the font CSS variables.
However, I don't see an updated font size in my browser as the old CSS variables still seem to be present. How can I enforce the new CSS to overwrite the old one?
So far I found 2 solutions, that seem like dirty workarounds to me:
Add the whole page to the AjaxRequestTarget, so the whole page will be refreshed.
Add JavaScript to the AJAX update to remove the old styling with:
var allStyles = document.getElementsByTagName("style");
for (var style of allStyles) {
if (style.getAttribute("id").includes("font-css")) {
style.remove();
}
}
Is there a cleaner solution to this problem?
You found the problem with workaround 2.
response.render(CssHeaderItem.forCSS(fontCss, "font-css"));
adds <style id="font-css"> ... </style> to the page. Later when the Ajax response contributes the new content the JavaScript logic finds that there is an HTML element with id font-css and assumes that there is nothing to do.
A simple solution is to use dynamic id, e.g. by using UUID in #renderHead().
Another solution is to make this <style> a proper Wicket Component, a Label, that could be added to the AjaxRequestTarget with an updated Model when needed.
In CKEditor, I added my custom image button, which directly trigger a file input. However, images can only be rendered when the Image plugin is in use.
I don't want to have 2 image buttons on the toolbar, is there a way to hide the Image button, but still use it (like display: none but in a more structural way?)
Thanks in advance.
Since 'CKEditor 4.1' you have something which is called Advanced content filtering.
This allows you set enable or disable certain tags.
The easiest way to allow the images to be displayed is to add
config.allowedContent = true;
in your config.js file. But this will allow everything.
To just add the enablement of the 'img' tag you can add it in the 'extraAllowedContent' element when you create the CKEditor
var myEditor = CKEDITOR.replace(editorId, {
extraAllowedContent : 'img(*){*}[*]'
});
There is removeButton option for CKEditor config, will it work for you ?
config.removeButtons = 'Image';
I would like the ability to add a class to images which are added to the body field in Drupal.
I want to keep things as simple as possible for our users, whereby they don't have to add classes etc. Ideally they would just click on the image button in the toolbar, paste the URL or upload an image and set align either left or right:
Image properties for adding images in CKeditor
I've tried several options, including: CKEditor adding class to img tag but I cannot get anything to work.
The path to CKEditor is to the CDN //cdn.ckeditor.com/4.5.4/full-all
I'd like to us my own SCSS to make the images float left or right at desktop, and be centered for the small breakpoint.
The text format is 'filtered HTML'.
Is there any way I can get this to work?
Many Thanks
Update
Because I'm using the CKEditor CDN, I've added the following to my local 'ckeditor.config.js' file
config.extraPlugins = 'image, dialog, dialogui';
// Enable local "imagetoolbar" plugin from /myplugins/imagetoolbar/ folder.
CKEDITOR.plugins.addExternal( 'image', '/plugins/image/' 'plugin.js' );
CKEDITOR.plugins.addExternal( 'dialog', '/plugins/dialog/' 'plugin.js' );
CKEDITOR.plugins.addExternal( 'dialogui', '/plugins/dialog/' 'plugin.js' );
// extraPlugins needs to be set too.
CKEDITOR.replace( 'news', {
extraPlugins: 'image, dialog, dialogui'
} );
The example I copied this from has 'news' as the CKEDITOR.replace, which I'm sure is wrong, what should this be? https://www.pluginsforckeditor.com/Tutorials/149/How-to-add-a-plugin-to-CKEditor/en/n149.aspx
You can modify the image plugin in order to have the class of the image already entered. So users just have to paste URL or upload an image.
Fill the default field with what you want.
I hope to help you.
I have an existing file upload (manual) in my web application. My application already shows existing uploaded files and a way to delete files.
I would like to incorporate the dropzone.js drag and drop into a small target area - but that is all. I don't want dropzone to print/render anything back to the screen - no messages, no images, nothing.
Could someone provide and example of how to configure dropzone for this limited functionality?
You can accomplish this by modifying the stylesheet. For example, setting
.dz-details
{
display:none;
}
will remove the box which shows what was uploaded. By modifying more styles, you should be able to remove the other elements that normally appear.
You can do that on init:
const dropzoneConfig = {
addedfile: file => { console.log(file); }
}
const myDropzone = new Dropzone(myDiv, dropzoneConfig)
I wanted to change just the delete Icon of jqGrid in actions column with my own Icon(newTrash-icon.png). I've seen that jqGrid loads Icon from one png icons file. How do I replace the default trashcan Icon with some other trashcan Icon.
I tried below code but it doesn't work.
In my gridComplete
$('.ui-icon-trash').removeClass('ui-icon-trash').addClass('ui-icon-customtrash');
In my CSS
.ui-icon-customtrash {
background: url("~/Images/newTrash-icon.png");
background-position: -64px -16px;
}
I want the below icon to display in place of default delete icon
What you can do is just the usage of delicon option of navGrid:
$("#list").jqGrid("navGrid", "#pager", {delicon: "ui-icon-customtrash"});
The demo uses delicon: "ui-icon-scissors" and it displays
UPDATED: The demo demonstrate the same using the icon which you posted. It displays
I used the following CSS
.ui-state-default .ui-icon-customtrash {
background: url("http://i.stack.imgur.com/Gii7J.png");
background-position: 0 0;
}
I found my answer.
I have replaced inline Action Icons(delete and Notes icons) using IcoMoon App (http://icomoon.io/app/). I selected different icons I needed from IcoMoon website and created a stylesheet that I downloaded and added to my application. And using the class name("idoc-icon-trash") provided by IcoMoon I added below code in my afterInsertRow event and boooom.. it worked as shown in the figure.
$("#gridJQ .ui-icon-trash").removeClass('ui-icon ui-icon-trash').addClass('idoc-icon-trash');
.idoc-icon-trash {
font-size: 19px;
color: #022462;
}