i cant change the backgroundColor of Textareafield In EXT js4.2
css
.disable-field{
background: #b5b8c8 !important;
}
Js
var remaskTextField = Ext.create('Ext.panel.Panel', {
id : 'remasksTextField',
title: 'Remark',
items: [ {
id : 'remask',
xtype : 'textareafield',
name : 'message',
width: 310,
height:230
}]
});
i tried the following code to change colour .
only the first one can change the backgroundColor but the top line of the Textareafield still remaining unchanged .
document.getElementById('remaskTextField').style.backgroundColor = "#c3c5ce";
Ext.getCmp('remask').addClass('disable-field');
Ext.getCmp('remasksTextField').addClass('disable-field');
One approach, that worked for me with ExtJS 4.2, is fieldStyle config:
fieldStyle : String
Optional CSS style(s) to be applied to the field input element. Should
be a valid argument to Ext.Element.applyStyles. Defaults to undefined.
See also the setFieldStyle method for changing the style after
initialization.
Example:
Ext.onReady(function() {
Ext.create('Ext.form.TextArea', {
renderTo: Ext.getBody(),
width: 400,
height: 400,
fieldStyle: "background: #b5b8c8 none repeat scroll 0 0 !important;"
});
});
Related
We are adding custombuttons to our fullcalendar like below.
Is there a way to change the background and foreground color of the button?
And is there a way to set padding or margins to the custom buttons?
var calendar = new Calendar(calendarEl, {
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}
});
Yes, you can set any properties you like using CSS.
On inspecting how fullCalendar renders the buttons in HTML, I noticed it gives each one a class according to the property name of the button.
For example, if - per your sample code - you call the button myCustomButton then fullCalendar will give the rendered <button a CSS class called fc-myCustomButton-button. This means you can specify any rules you like for that class, e.g.:
.fc-myCustomButton-button
{
background-color: red !important;
}
(You need the !important so that fullCalendar's other CSS rules don't override it.)
Demo: https://codepen.io/ADyson82/pen/WNJqXLM
I am using deltaDecorations to show errors in my editor.
here is my code: https://gist.github.com/dinager/41578bd658b60cc912a6023f80431810
Here is the result:
I am trying to add resize property to the editor by adding to the style
resize: both;overflow: auto;
But then the hover message is partly hidden by the edges of the editor
As you can see in below attached image - the editor can resize now (bottom right), but the hover message is partly hidden
How can I add resize property to not hide elements?
Another question: can I make the hover message float inside the editor, meaning if it's at the top line it should float to the bottom, if at the side of the editor float to the middle, etc..
Attaching the code adding the markerDecorations (exists also in the gist link at the top):
this.markerDecorations = codeEditor.deltaDecorations(this.markerDecorations, [
{
range: new monaco.Range(pos.startLine, pos.startColumn, pos.endLine, pos.endColumn),
options: {
className: 'squiggly-error',
minimap: {
color: { id: 'minimap.errorHighlight' },
position: monaco.editor.MinimapPosition.Gutter,
},
overviewRuler: {
color: { id: 'editorOverviewRuler.errorForeground' },
position: monaco.editor.OverviewRulerLane.Full,
},
stickiness: monaco.editor.TrackedRangeStickiness.AlwaysGrowsWhenTypingAtEdges,
zIndex: 1,
hoverMessage: { value: parseResponse.error, isTrusted: false },
},
},
]);
solved it by adding fixedOverflowWidgets: true on monaco.editor.create options.
this.editor = monaco.editor.create(el, {
// ...
fixedOverflowWidgets: true
});
Is there any way to display our view without creating any button clicks events in controller
Console view
give your view xtype and id to the Viewport items and then paste the code into the console
Ext.Viewport.add({
xtype : 'panel',
itemId : 'testingOverlay',
showAnimation : {
type : 'popIn',
duration : 250,
easing : 'ease-out'
},
hideAnimation : {
type : 'popOut',
duration : 250,
easing : 'ease-out'
},
height : '630px',
width : '335px',
left : '210px',
top : '205px',
items : [{
xtype : 'viewXtype',
id : 'viewId'
}],
});
You can also use renderTo property, if you specify renderTo:Ext.getBody() it will render the content or replace Ext.getBody() with html element.
But in real applications you will need a viewport this is better than renderTo
Fiddle Sample Code
Ext.create('Ext.panel.Panel',{
title:'Test Panel',
width:400,
height:500,
renderTo:Ext.getBody()
});
Using ExtJs 4.1.
I'm creating a panel (for example) and I would like that the generated html includes one or more "data-" attributes (for example: data-intro="some text" data-step="1")
How can this be done?
After the component has rendered, you could apply the attributes to the top level element representing the component
Example:
var panel = Ext.create('Ext.panel.Panel',{
title: 'Test',
width: 500,
height: 200,
renderTo: Ext.getBody(),
listeners: {
afterrender: function(cmp) {
cmp.getEl().set({
"data-intro": 'some text',
"data-step": 1
});
}
}
});
panel.show();
You can use the autoEl config option to achieve this.
{
xtype: 'panel',
title: 'My Panel',
autoEl: {
tag: 'div',
'data-step': '1'
}
}
I'm using TinyMCE in a Rails application. In my form, I have a "description" field with TinyMCE and this field is mandatory for the form validation.
But when I try to submit my form, I can't, because of the HTML5 form validation. My browser (Chrome and Firefox) tells me that the field is empty. And I have another problem. When Chrome displays the dialog for the empty field, it appears on the top of my page, not near my form field.
FF show up a bubble for required fileld but at wrong place, Chrome throws an error because it can't find field to show bubble.. So my solution is disable display:none style set by TinyMCE and reduce the field size and make its visibility hidden. this way browser will show bubble next to this field as this field is next to TinyMCE editor user will know what required field is missing.
textarea.tinymce {
background: transparent;
border: none;
box-shadow: none;
display: block !important;
height: 0;
resize: none;
width: 0;
visibility: hidden;
}
I used the "oninit" option in the textareas and worked:
oninit: function(editor) {
$currentTextArea.closest('form').bind('submit invalid', function() {
editor.save();
});
}
You could try to use onChange event, but it doesn't work properly in Firefox.
My complete code:
$('textarea.tinymce').each(function(){
var options = {
theme : "advanced",
skin : "cirkuit",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", theme_advanced_buttons1 :"formatselect,fontsizeselect,forecolor,|,bold,italic,strikethrough,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,|,link,unlink,|,spellchecker",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
},
$this = $(this);
// fix TinyMCE bug
if ($this.is('[required]')) {
options.oninit = function(editor) {
$this.closest('form').bind('submit invalid', function() {
editor.save();
});
}
}
$this.tinymce(options);
});
I took #lucaswxp code and changed it a bit, because Firefox was throwing an error ($this.is not a function, if I recall it correctly).
Also I changed the way it fires the code from:
$this.tinymce(options);
to:
tinymce.init(options);
Full code:
$(window).load(function() {
var options = {
selector: 'textarea',
skin: "lightgray"
},
$this = $(this);
// fix tinymce bug
if ($this.is('[required]')) {
options.oninit = function(editor) {
$this.closest('form').bind('submit, invalid', function() {
editor.save();
});
}
}
tinymce.init(options);
});
Many thanks to the creator, it worked like wonder :)