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;"
});
});
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()
});
I have a textarea that I want to add a simple wysiwyg editor. I chose TinyMCE but don't need all of the options available so I was using a sample from their page (http://www.tinymce.com/tryit/custom_formats.php) that just had the basic simple formatting options I was looking for.
The problem I'm having is that with the code below the editor shows up but clicking styles (i.e., Bold, Underline, etc.) doesn't update the window. It appears to update the underlying HTML style (although popping the embedded HTML editor window also doesn't seem to work here), but I don't see a style change. But, if I comment out the "formats: " block, it does work. This was testing on Chrome, Firefox, and IE.
I downloaded the tinymce package and have things in a folder like so:
sample\
sample\tiny_mce
sample\tiny_mce\langs
sample\tiny_mce\plugins
sample\tiny_mce\themes
sample\tiny_mce\utils
sample\tiny_mce\license.txt
sample\tiny_mce\tiny_mce.js
sample\tiny_mce\tiny_mce_popup.js
sample\tiny_mce\tiny_mce_src.js
sample\index.html (see code below)
I took the content of the downloaded archive \jscripts* folder and moved it up to the root of my path. My HTML is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>TinyMCE Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- OF COURSE YOU NEED TO ADAPT NEXT LINE TO YOUR tiny_mce.js PATH -->
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "table,inlinepopups",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,|,table,removeformat,code",
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,
// Example content CSS (should be your site CSS)
//content_css : "/js/tinymce/examples/css/content.css",
// Style formats
style_formats : [
{title : 'Bold text', inline : 'b'},
{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
{title : 'Example 1', inline : 'span', classes : 'example1'},
{title : 'Example 2', inline : 'span', classes : 'example2'},
{title : 'Table styles'},
{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
],
formats : {
alignleft : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'left'},
aligncenter : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'center'},
alignright : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'right'},
alignfull : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'full'},
bold : {inline : 'span', 'classes' : 'bold'},
italic : {inline : 'span', 'classes' : 'italic'},
underline : {inline : 'span', 'classes' : 'underline', exact : true},
strikethrough : {inline : 'del'},
customformat : {inline : 'span', styles : {color : '#00ff00', fontSize : '20px'}, attributes : {title : 'My custom format'}}
}
});
</script>
</head>
<body>
<!-- OF COURSE YOU NEED TO ADAPT ACTION TO WHAT PAGE YOU WANT TO LOAD WHEN HITTING "SAVE" -->
<form method="post" action="show.php">
<p>
<textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
<input type="submit" value="Save" />
</p>
</form>
</body>
</html>
Any ideas what I'm doing wrong? The example on their site seems to work fine so I'm assuming there's some sort of config problem on my end. Really I'm just looking for a textarea editor that will give me some basic HTML formatting options, I don't even need anything really fancy. Thanks for any help!
The default behavior of TinyMCE for bold, italic, underline is to use the html entities associated with the formatting. Example: <strong></strong>, <em></em>, and a span with inline style for underline.
It seems the Formats block of code is overriding this action by instead wrapping your selection in a span with a class name defined by the "classes" property.
In order to have your styles render with the formats block as seen above you need to add a style sheet with definitions for .bold, .italic, .underline and so on.
TinyMCE renders its UI on top of a textarea using iframes if I recall correctly so while simply linking a stylesheet will work for your front end, in order for this to show in the edit box you need to link to the stylesheet through the tinyMCE.init() object.
Using your folder structure, add a stylesheet \sample\tiny_mce\style.css, define your styles within, then below the formats block of code add: content_css: "\sample\tiny_mce\style.css". This will load the style sheet into the tinyMCE edit interface and you should then see your style definitions applied.
it should look like:
...
// Style formats
style_formats : [
{title : 'Bold text', inline : 'b'},
{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
{title : 'Example 1', inline : 'span', classes : 'example1'},
{title : 'Example 2', inline : 'span', classes : 'example2'},
{title : 'Table styles'},
{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
],
content_css : "tiny_mce/style.css"
...
I have vide an iframe with video that needs to be played in fancybox.
Here is the code:
<a id="playLink" href="#pageVideo">Link for video </a>
<div style="display:none">
<div id="pageVideo">
<iframe src="someVideo.mp4?autoplay=true" style="overflow:auto" frameborder="0" height="400" width="650"></iframe></div>
</div>
$('#homePlayLink').fancybox({
'padding' : 0,
'width' : 560,
'height' : 400
});
The problem is that in Chrome video starts to play on page load. Because it is in display none div I do not see it but I hear the audio. How to fix this, so the video plays only in fancy box After click on the link?
Thanks.
Your iframe src has the autoplay = true parameter; this is why it will auto play when the page loads.
How about pointing the iframe src to a blank page and then override the href when the fancybox opens?
$("#tip4").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
Take a look at http://fancybox.net/blog section 4: Show youtube clips.
CKEditor does this whenever I add a heading tag:
<h2>
Mai 2010</h2>
How can I remove the new line and spaces after the h2 starting tag, please?
The way to do this without modifying CKEditor's source is to do the following:
CKEDITOR.on( 'instanceReady', function( ev )
{
ev.editor.dataProcessor.writer.setRules( 'p',
{
indent : false,
breakBeforeOpen : true,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : true
});
});
For more information see:
http://cksource.com/forums/viewtopic.php?f=6&t=14493
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Output_Formatting
This is the default CKEDITOR behavior for a lot of tag.
To avoid it, open the ckeditor.js file and search for this:
n.setRules('title',{indent:false,breakAfterOpen:false});
and add this rule:
n.setRules('h2',{indent:false,breakAfterOpen:false});
You can add this rule for each tag you want