Develop Reference

ExtJS make one combo item different

Maybe someone can give some ideas, how to add item to the end of combobox dropdown, and make it "different" for example put separator before it or make it bold. Combobox uses sorted (by name) store, and on load there is added item which I want to make different.
Ext.define('Plugin.workspace.store.FavouriteCarStore', {
extend : 'Plugin.workspace.store.CarStore',
alias : 'store.favouritecar',
filters : [{
property : 'favorite',
value : true
}],
listeners : {
load : function(store) {
var rec = {
id : 'showAll',
name : 'Show All',
favorite : true
};
store.add(rec);
}
}
});
combo uses this store:
tbar : [{
xtype : 'combo',
width : 200,
editable: false,
store : {
type : 'favouritecar'
},
bind : {
value : '{workspace}'
},
tpl : '<ul class="x-list-plain"><tpl for="."><li role="option" class="x-boundlist-item">{name}</li></tpl></ul>',
displayTpl : '<tpl for=".">{name}</tpl>',
listeners : {
'select' : 'onSelectWorkspace'
}
}].
This code adds item, which looks like others, and places it depending on sort.
I use 5.1 ExtJS.
EDIT: solution to add item to list end.
sorters : [{
sorterFn : function(rec1, rec2) {
if (rec1.id != 'showAll' && rec2.id != 'showAll') {
return ((rec1.get('name') > rec2.get('name')) ? 1 : (rec1.get('name') === rec2.get('name') ? 0 : -1));
} else {
return ((rec1.id == 'showAll') ? 1 : -1);
}
}
}],

Method 1
Use a custom cls on the combo's listConfig:
listConfig: {
cls: 'thisComboMakesLastItemDifferent'
},
And then use CSS to make the last item different:
.thisComboMakesLastItemDifferent li:last-child {
color: red;
font-weight: bold;
}
Method 2
Since you are marking your "different" item with favorite: true, you can code it in the template:
tpl: '<tpl for="."><li role="option" class="x-boundlist-item favorite-{favorite}">{name}</li></tpl>',
And then, again, use CSS:
.favorite-true:before {
content: 'FAV: '
}
Note that the first method focuses on making the last item different regardless of what item it is. The second method makes specific item different (you need extra logic to make sure it is the last; you have one already).
See both methods in action: https://fiddle.sencha.com/#fiddle/sdj

Maybe you can use store.insert(store.indexOf(store.last()) index, rec) or store.insert(store.count() - 1, rec)?
load : function(store) {
somewhere.static.setShowAllAsLastRecordOfStore(store);
}
filterchange(store, filters, eOpts) {
somewhere.static.setShowAllAsLastRecordOfStore(store);
}
sort(store, eOpts) {
somewhere.static.setShowAllAsLastRecordOfStore(store);
}
setShowAllAsLastRecordOfStore: function(store) {
var rec = {
id : 'showAll',
name : 'Show All',
favorite : true
};
store.remove(store.findRecord('id', 'showAll'));
store.insert(store.indexOf(store.last()) index, rec);
// or
store.insert(store.count() - 1, rec);
}

Extjs 5 listener stop working

I have weird problem with Extjs 5.0.
I have a window :
Ext.define('xxx', {
extend : 'Ext.window.Window',
// ...... //
items : [ {
xtype : 'grid',
reference : 'maingrid',
bind : {
store : '{users}'
},
flex : 1,
selModel : Ext.create('Ext.selection.CheckboxModel', {
mode : 'SIMPLE'
}),
listeners : {
selectionchange : 'onSelectionChange'
},
} ]
});
The selectionChange event handler work perfectly for the first time.
But when I close the window and open again - this event handler stop working. What am I doing wrong?

TinyMCE: Text Counter not working on readonly toggle

I have TinyMCE on my website which works fine.
Recently I added the functionality of readonly toggle.
For the readonly toggle I added a field "mytext_readonly".
TinyMCE is initialized in readonly mode, and stays in readonly if the value in "mytext_readonly" is 'readonly', otherwise it becomes editable.
The functionality is working as I want it, except the textcounter isn't working.
The problem is onKeyUp event is not working.
Text counter works if I click on B I U etc on the toolbar(means onExecCommand is working)
I want to know why onKeyUp is not working? And what shall I do to make it work?
tinyMCE.init({
mode : "exact",
elements : "mytext",
debug : false,
nowrap : false,
cleanup_on_startup : true,
fix_nesting : true,
force_br_newlines : true,
force_p_newlines : false,
gecko_spellcheck : true,
forced_root_block : '' ,
readonly : true,
setupcontent_callback : "myCustomSetupContent",
plugins : "preview",
plugins : "AtD,preview",
atd_button_url : "/tinymce-new/jscripts/tiny_mce/plugins/atd-tinymce/atdbuttontr.gif",
atd_css_url : "/tinymce-new/jscripts/tiny_mce/plugins/atd-tinymce/css/content.css",
tab_focus : ':next',
theme : "advanced",
theme_advanced_buttons1_add : "AtD",
theme_advanced_buttons1 : "bold,italic,separator, justifyfull,bullist,numlist,|,charmap,|,undo,redo,|",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
/* the URL of proxy file */
atd_rpc_url : "/common-scripts/tinymce-new/jscripts/tiny_mce/plugins/atd-tinymce/server/proxy.php?url=",
/* set your API key */
atd_rpc_id : "flinstone",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
valid_elements : ""
+"p,"
+"br,"
+"i/em,"
+"ul,"
+"li,"
+"ol,"
+"b/strong,"
+"marquee,"
+"sub,"
+"sup,"
+"table[border|width|height|align],"
+"tr[rowspan|width|height|align|valign],"
+"th,"
+"td[colspan|rowspan|width|height|align|valign]",
setup : function(ed) {
ed.onKeyUp.add(function(ed) {
textCounter('mytext','Charcount',4000);
});
ed.onExecCommand.add(function(ed) {
textCounter('mytext','Charcount',4000);
});
}
});
function myCustomSetupContent(editor_id, body, doc) {
var desc = document.getElementById('item_description').value;
desc = unescape(desc);
if (desc)
{
desc = desc.replace(/''/ig,"'");
desc = desc.replace(/&/ig,'&');
tinyMCE.get('mytext').setContent(desc);
}
textCounter('mytext','Charcount',4000);
if (document.getElementById('mytext_readonly') && document.getElementById('mytext_readonly').value == 'readonly') {
//do nothing
}
else
tinyMCE.get('mytext').getBody().setAttribute('contenteditable', true);
}

Need to retain dynamically created option in combo box using Knockout.js

I have a codeset that dynamically creates an "option" in a select box. But, since we're using Knockout, when I go to SELECT that newly created option, and click on it, it gets removed, e.g. DISAPPEARS! Poof!!!!
So, here's the create script:
function createNewGroup()
{
var htmlSelect = document.getElementById('groups');
var optionValue = document.getElementById('newgroupname');
if (optionValue.value === '')
{
alert('Please enter group name.');
optionValue.focus();
return false;
}
if (isOptionAlreadyExist(htmlSelect, optionValue.value))
{
optionValue.value = "";
alert('Group name already exists.\n\nPlease try again.');
optionValue.focus();
return false;
}
var selectBoxOption = document.createElement("option");
selectBoxOption.value = optionValue.value;
selectBoxOption.text = optionValue.value;
htmlSelect.add(selectBoxOption, null);
optionValue.value = "";
alert("New group has been added successfully.");
optionValue.focus();
return true;
};
Since this is a KNOCKOUT observable, how to keep it in the box when I select it, moreover, how do I send that new value back to JSON object. Here's an example of that:
{"groups":[
{
"groupname" : "Administrator",
"attr" : { "id" : "li.attr.node_1",
"href" : "#",
"data-bind" : "click: grpMgmt('Administrator');" }
},
{
"groupname" : "Guest",
"attr" : { "id" : "li.attr.node_2",
"href" : "#",
"data-bind" : "click: grpMgmt('Guest');" }
}
]
}
Hence, the admin user can create a new user so it can look like this:
{"groups":[
{
"groupname" : "Administrator",
"attr" : { "id" : "li.attr.node_1",
"href" : "#",
"data-bind" : "click: grpMgmt('Administrator');" }
},
{
"groupname" : "Guest",
"attr" : { "id" : "li.attr.node_2",
"href" : "#",
"data-bind" : "click: grpMgmt('Guest');" }
}
],
"users":[
{
"groupname" : "Joes Users",
"attr" : { "id" : "li.attr.node_1",
"href" : "#",
"data-bind" : "click: grpMgmt('Joe');" }
}
]
}
OK, I'll stop writing for now... thanks...

If you're using knockout (which I can't actually see) all you need to do is bind your select box to an observable array and when you need to add a new item just push it onto the array and knockout will add it to the list for you.
Knockout should essentially replace that script you've included with a lot less, much more simplistic code.

jstree remove default elements from context menu

I have a problem with JsTree's contextmenu, how can I remove the default elements from the contextmenu like Create, Delete, Rename? I want to provide elements of my own, but the default elements are still at the contextmenu.
"contextmenu" : {
"items" : {
"IsimVer" : {
"label" : "İsim Değiştir",
"action" : function (obj) { this.rename(obj); }
},
"Ekle" : {
"label" : "Ekle",
"action" : function (obj) { this.create(obj); }
},
"Sil" : {
"label" : "Sil",
"action" : function (obj) { this.remove(obj); }
}
}

I had this issue a couple of days ago but haven't yet decided if this is a bug or a feature. It may be related to the order in which the plugins are loaded.
What worked for me was returning the items from a function:
"contextmenu" : {
"items" : function ($node) {
return {
"IsimVer" : {
"label" : "İsim Değiştir",
"action" : function (obj) { this.rename(obj); }
},
"Ekle" : {
"label" : "Ekle",
"action" : function (obj) { this.create(obj); }
},
"Sil" : {
"label" : "Sil",
"action" : function (obj) { this.remove(obj); }
}
};
}
}
After some searching it seems that the default behaviour is for your menu items to extend the defaults, so this is a feature. Unfortunately the documentation currently lacks the detail on this point.

If you like to modify labels of existing items or remove a few, a simple solution like below will work
"contextmenu": {
"items": function(node) {
var defaultItems = $.jstree.defaults.contextmenu.items();
defaultItems.create.label = "Ekle";
delete defaultItems.ccp;
return defaultItems;
}
}
This will set "Create" items label as "Ekle" and remove cut copy paste from default items.

Just set value to false in items object. For example, to disable edit (cut, copy, paste) menu try this:
contextmenu : {
items : {
"ccp" : false
}
}

Set ccp, create, rename, remove to false like this :
plugins : ["themes","json_data","ui","crrm", "hotkeys", "types", "contextmenu"],
contextmenu : {
items : {
"IsimVer" : {
"label" : "IsimVer",
"action" : function (obj) { alert("IsimVer"); }
},
"Ekle" : {
"label" : "Ekle",
"action" : function (obj) { alert("Ekle"); }
},
"Sil" : {
"label" : "Sil",
"action" : function (obj) { alert("tiga"); }
},
"ccp" : false,
"create" : false,
"rename" : false,
"remove" : false
}
}