Develop Reference

How to set the button in my toolbar to disabled

I have created a toolbar in my windows 10 UWP winjs app and I want to disable some of the buttons.
I append attributes to the button like so :
new WinJS.UI.Command(null, {
disable: true,
id: 'cmdSave',
label: 'save',
section: 'primary',
type: 'button',
icon: 'save',
onclick: clickbuttonprintout()
});
I have looked through the winjs css files and found many disabled tags. Is it possible to set the button to disabled like I have appended other attributes above ?

Figured this out :
You select the button, set it to disabled and then process it.
var thisBtn = document.getElementById('cmdSave');
thisBtn.disabled = true;
WinJS.UI.process(btn); //this is key
With this in mind, I set up a function so I can pass different buttons to it:
function disableButton(buttonID){
var btn = document.getElementById(buttonID);
btn.disabled = true;
WinJS.UI.process(btn);
}
P.S
Even though this is not part of the question, it may help people.
What about editing the attributes on the button too ? Ive made this function to edit any attribute on a winjs button :
function changeButtonAttributes(buttonId, element, attribute) {
var btn = document.getElementById(buttonId); //select button
btn.winControl[element] = attribute; //button.element = attribute
WinJS.UI.process(btn); //process all
}
Hope that helps :)

TinyMCE Enable button while in read only mode

I have a TinyMCE 4.x instance where the text should be in read only mode. But I still have some buttons that I want to have enabled. For example, one button could provide a character count for the part of the text I've selected.
But when I turn on read only mode for TinyMCE all buttons are disabled. Can I enable just my buttons while still retaining read only mode?

It's probably too late for you but other people may pass by here.
I came up by writing this function
function enableTinyMceEditorPlugin(editorId, pluginName, commandName) {
var htmlEditorDiv = document.getElementById(editorId).previousSibling;
var editor = tinymce.get(editorId);
var buttonDiv = htmlEditorDiv.querySelectorAll('.mce-i-' + pluginName.toLowerCase())[0].parentElement.parentElement;
buttonDiv.className = buttonDiv.className.replace(' mce-disabled', '');
buttonDiv.removeAttribute('aria-disabled');
buttonDiv.firstChild.onclick = function () {
editor.execCommand(commandName);
};
}
It does the trick in 2 steps:
make the button clickable (remove mce-disabled CSS class and remove the aria-disabled property)
assign the good command to the click event
And in my editor init event I call the function.
editor.on('init', function () {
if (readOnly) {
editor.setMode('readonly');
enableTinyMceEditorPlugin(htmlEditorId, 'preview', 'mcePreview');
enableTinyMceEditorPlugin(htmlEditorId, 'code', 'mceCodeEditor');
}
});
Current version of TinyMCE for which I wrote this code is 4.4.3. It may break in a future version, specifically about the selectors to get and modify the good HTML elements.
Command identifiers can be found at this page otherwise you can also find them under tinymce\plugins\PluginName\plugin(.min).js

Here is a simple way to enable your custom toolbar button and attach a click event handler inside a read only TinyMCE editor using JQUERY:
//Initialize read only Tinymce editor so that Lock button is also disabled
function initReadOnlyTinyMCE() {
tinymce.init({
selector: '#main'
, toolbar: 'myLockButton'
, body_class: 'main-div'
, content_css: 'stylesheets/index.css'
, readonly: true
, setup: function (readOnlyMain) {
readOnlyMain.addButton('myLockButton', { //Lock button is disabled because readonly is set to true
image: 'images/lock.png'
, tooltip: 'Lock Editor'
});
}
});
}
function displayReadOnlyTinyMCEwithLockButtonEnabled() {
var edContent = $('main').html();
$("#main").empty();
initReadOnlyTinyMCE(true);
tinyMCE.activeEditor.setContent(edContent);
//enable the lock button and attach a click event handler
$('[aria-label="Lock Editor"]').removeClass("mce-disabled");
$('[aria-label="Lock Editor"]').removeAttr("aria-disabled");
$('[aria-label="Lock Editor"]').attr("onclick", "LockEditor()");
}
function LockEditor() {
alert("Tiny mce editor is locked by the current user!!");
//Write your logic to lock the editor...
}

I couldn't find an easy way to do this. The simplest way is to remove the contenteditable attribute from the iframe body instead and substitute a read only toolbar set. It also means that people will still be able to copy content from the editor.
$("iframe").contents().find("body").removeAttr("contenteditable");

How about this :
editor.addButton('yourButton', {
title: 'One can Enable/disable TinyMCE',
text: "Disable",
onclick: function (ee) {
editor.setMode('readonly');
if($(ee.target).text() == "Disable"){
var theEle = $(ee.target).toggle();
var edit = editor;
var newBut = "<input type='button' style='opacity:1;color:white; background-color:orange;' value='Enable'/>";
$(newBut).prependTo($(theEle).closest("div")).click(function(e){
edit.setMode('design');
$(e.target).remove();
$(theEle).toggle();
});
}
}
});

You can try to run the code below:
$("#tinymce").contentEditable="false";
if you have more than one editors, you can use their id like below
$("#tinymce[data-id='idOfTheEditor']").contentEditable="false";

How to change configuration properties of Ext Js components after they are rendered

There are scenarios when I have to change some configuration properties of Ext Js components after render. In Api documentation, I don't see getters/setters for most of the configs. Is there any way to change configuration and then re-render component or Update layout?
In the following code I need to change collapsible property to true or false dynamically after the Ext.form.FieldSet is rendered:
var container = Ext.create("Ext.container.Container", {
renderTo: Ext.getBody(),
layout: {
type: "vbox"
}
});
var fieldset = Ext.create("Ext.form.FieldSet", {
renderTo: "fieldset"
});
var text = Ext.create("Ext.form.field.Text", {
renderTo: "text"
});
var button = Ext.create("Ext.Button", {
renderTo: "button",
text: "My Button"
});
fieldset.add(text);
fieldset.add(button);
container.add(fieldset);
Also the below code does not update layout:
Ext.apply(fieldset,{collapsible:true,style:"bakground:red"});
http://jsfiddle.net/2nyhE/

fld.titleCmp.el.on({
'click': fld.toggle,
scope: fld
});
fld.titleCmp.el.addCls(me.baseCls + '-header-text-collapsible');
fld.legend.items.add(fld.createToggleCmp());
fld.legend.updateLayout();
http://jsbin.com/IFUZut/1/

there is methods collapse and expand which you could call on your field set to collapse or expand it.
You can try this. Set an id property for the desired fieldset (id:'anyId') and use Ext.apply(Ext.getCmp('anyId'), {your config object});
Ext.applay documentation
You can see this post
And also you can read about what is the difference between Ext.apply and simple javascript parameter adding here.

Extjs 4.1 remove element from combox after loading

I've an MVC panel with a combobox and I'would remove some elements from the combobox after his store (local or remote) has completed to load.
the combo is declared in the view of this panel as follow:
{
xtype:'combo',
name: 'type',
editable: false,
//a local simple store with two field: 'valueType' and 'text'
store : Ext.create('AM.store.custompropview.propertyType'),
valueField : 'valueType',
fieldLabel: 'combo'
}
I've tried in the controller to control the event 'afterrender' or 'boxready' and in the function to remove some element from the store, but it don't work at all.
'combo[name="type"]' : {
boxready:function(th, width, height, eOpts ){
th.store.removeAt(0);
th.store.removeAt(0);
th.store.removeAt(0);
}
How i can do it?
thank you

I think you should remove your item after store is loaded not just after your combo is rendered so you can code this in controller's init function:
Ext.getStore('AM.store.custompropview.propertyType').on('load', function(store){
store.removeAt(0);
});

Customising CKEditors Link Plugin

I am editing the link plugin to allow staff to select links to internal content.
I have managed to add another tab to the link plugin dialog with a text input with an onKeyup event. The idea is, when they type it will list the results below where they can select the link they want. Once selected I was just going to update the info tab with the url and protocol.
Here is my code sections from the existing link plugin:
....
....
//Should update info tab with value
function AddLink(txtLink)
{
var dialog = this.getDialog();
dialog.setValueOf('info', 'url', txtLink);
dialog.setValueOf('info', 'protocol', '');
}
//called when the user types in the search box. currently just uses text for basic testing
var searchBoxChanged = function ()
{
var dialog = this.getDialog();
var href = $(this).attr('href');
var txt = dialog.getValueOf('article', 'searchWords');
$('#searchResults').html("Test Title");
}
....
....
{
//Adds extra tab to the link plugin for custom link searching
id: 'article',
label: linkLang.article,
title: linkLang.article,
elements:
[
{
type: 'text',
id: 'searchWords',
label: linkLang.articleSearch,
style: 'height:40px',
size: 29,
onKeyUp: searchBoxChanged
},
{
type: 'html',
html: '<div id="searchResults">Please start tying to get results</div>'
}
]
}
....
....
At the moment I am just using some basic static data from the textbox. The link in creating on the page ok, but when it is clicked I get the error:
CRIPT5009: 'AddLink' is undefined
Can anyone shed some light on where I am going wrong?

In my experience, ["x" is undefined] errors quite often mean there's a syntax error or, often, something in the function does not evaluate to what you think it does.
Possibly, this.getDialog() is out of context so it doesn't return anything. Then, dialog.setValueOf() won't work.