I have function for creating/rendering input fields but i don't know how to add tool tip on it in EXTjs6
this is my function:
createInputField: function(value, fieldsMarginBottom, readonly) {
var fieldStyle = this.getFieldStyle(readonly);
var nameField = Ext.create('Ext.form.field.Text', {
name: 'name',
readOnly: true,
hideLabel: true,
value: value,
width: this.fieldWidth,
style: {
marginBottom: fieldsMarginBottom + 'px'
},
//My try which is not working
tooltip: {
trackMouse: true,
width: 140,
renderer: function(tip, item){
tip.setTitle('name');
tip.update('Count: ');
}
},
fieldStyle: fieldStyle
});
return nameField;
}
I hope you guys can help me. If you need any additional informations, please let me know and I'll provide. Thank you
As can be seen in the textfield docs, fields do not have a way to add a tooltip to their configuration, so you would have to create the tooltip manually.
If you look at the docs for Ext.tip.ToolTip how to do that, you may find a small example, where you just have to change the target as per the target configuration description:
var tip = Ext.create('Ext.tip.ToolTip', {
target: nameField.getEl(),
html: 'Press this button to clear the form'
});
Above answer is correct. Here is example of generic function which you write once and use wherever you required in project by using using attributes.
addToolTip : function (id, msg) {
new Ext.ToolTip({
target : id,
dismissDelay : 0,
anchor : 'right',
html : msg
});
};
Related
I would like to implement custom file picker to TinyMCE 4, but i dont know how to return value from second popup window.
Here is my code:
textTiny.settings.file_picker_callback = function(callback, value, meta) {
imageFilePicker(callback, value, meta);
};
var imageFilePicker = function (callback, value, meta) {
tinymce.activeEditor.windowManager.open({
title: 'Photo picker',
url: "files-list.html",
width: $(window).width() * 0.8,
height: $(window).height() * 0.8,
buttons: [{
text: 'Insert',
onclick: function () {
var file_src = $(".photo.selected").attr("href");
callback(file_src);
tinymce.activeEditor.windowManager.close();
}
},
{
text: 'Close',
onclick: 'close'
}],
});
};
I will appreciate any advice.
Thank you.
I think you could start by going to TinyMce website. They have a demo tab where you can find a code snippet for implement basic local file picker here
I'm trying to use bootstrap-markdown and everything works fine except I can't call the plugin via JavaScript. For instance:
$("#content").markdownEditor({
autofocus: false,
savable: false,
iconlibrary: 'fa',
resize: 'vertical',
additionalButtons: custom_buttons, // an array defining custom commands
onPreview: function (e) {
var content = e.getContent();
console.log('content', content);
}
});
Does anyone has any ideas what might be the case? Couldn't find anything useful on the web or repo's github page. And yes I've already included markdown.js and to-markdown.js which weren't mentioned in the docs at all but it was quick find anyway.
All I need now is to call the editor, add a couple of custom toolbar buttons (image upload, code block insert etc.) and be done with it.
Code snippets, links & live fiddles are much appreciated :)
For some reason, changing the order of script references fixed this.
Here's the order now:
lib/markdown.js
lib/bootstrap-markdown.js ,
lib/to-markdown.js
And here's my initialization:
$(function () {
var custom_buttons = [[
{
name: "insertCode",
data: [{
name: "cmdInsertCode",
toggle: "toggle",
title: "Insert Code",
icon: "fa fa-fire",
callback: function (e) {
var selected = e.getSelection(),
content = e.getContent();
// e.replaceSelection(chunk);
// var cursor = selected.start;
//e.setSelection(cursor, cursor + chunk.length);
console.log('cmdInsertCode clicked');
}
}]
}
]];
$("#content").markdown({
autofocus: false,
savable: false,
iconlibrary: 'glyph',
resize: 'vertical',
additionalButtons: custom_buttons,
onShow: function (e) {
console.warn('e:editor shown');
}
});
});
Kudos :godmode:
I have kendo-ui grid, with some fields.
I need one of the fields to be editable on add new row, and not editable on update row.
I try to change data-source definitions before add row, and change it back before update.
But the changing doesn't help.
Is there any way to do it?
Here is what I tried to do:
var schema = {
data: 'results',
model: {
id: 'GroupCode',
fields: {
GCode: { editable: false },
GroupPrincipalId: { editable: false },
GroupPrincipalName: { editable: false },
ChildCount: { editable: true },
}
}
};
onAddClick: function(){
var gridElement = ('#myGrid').data('kendoGrid');
gridElement.dataSource.options.schema.model.fields.GroupPrincipalId.editable = true;
gridElement.dataSource.options.schema.model.fields.GroupPrincipalName.editable = true;
gridElement.addRow();
}
(onAddClick is called by my custom adding-button, not related to kendo-adding-logic);
You can use the approach described here:
http://www.telerik.com/forums/making-column-as-readonly-on-update-and-editable-on-insert-in-grid
When create button is pressed you mark a variable as isCreating and in the edit section you check it and if is false you disable the requiered field/fields.
I created an initial version of a plugin for inserting footnotes in tinyMCE, basing on some resources that I found for WordPress and Drupal. Here's the code:
tinymce.PluginManager.add('footnotes', function(editor) {
function showDialog() {
var win = editor.windowManager.open({
title: "Add a footnote",
id: 'footnote-dialog',
body: {
type: 'textbox',
name: 'footnote',
multiline: true,
minWidth: 520,
minHeight: 100,
//style: 'direction: ltr; text-align: left'
},
onSubmit: function(e) {
e.preventDefault();
var footnote = e.data.footnote;
if (footnote.length){
var html = '<span><sup class="footnote-elem" data-toggle="tooltip" data-placement="top" title="'+footnote+'">[*]</sup></span>';
editor.undoManager.transact(function() {
tinyMCE.activeEditor.execCommand('mceInsertRawHTML', false, html);
});
editor.windowManager.close();
}
}
});
}
editor.addButton("footnotes", {
title : 'Insert a footnote',
image : tinyMCE.baseURL + '/plugins/footnotes/img/note_add.png',
onclick: showDialog
});
});
the plugin basically works:
the problem is that the following inserted text is inserted as <sup> too:
So the desired behaviour would be:
put the cursor immediately after the inserted html;
restore original formatting.
Any suggestion/help on how to achieve that?
Thanks
Hi I'm very new to 'Ext JS' (about 4 days) and have to edit 'Ext JS' form. That form is to edit existing entry. So I have to update 'project name' field in this form and need to follow following conditions.
Users can submit form with its old project name (old old project
name means project name when form is load).
When user select existing project name from suggestion drop down (except old project name), need to show error.
Basic idea of this conditions is prevent duplicate project names.
So I try to do this with 'validator' but I can't find a way to compare old project name and new project name.
Is there any method to compare those values ??
Any other way to validate this field ???
this is what I have done so far...
_est.project.view.panel.updateprojectname.combox = function (projectdetails) {
var nstore = _est.project.view.panel.updateprojectnstore();
var combo = Ext.create('Ext.form.ComboBox', {
fieldLabel: _est.project.text.nameText,
store: nstore,
labelSeparator: ' ',
vtype: 'text',
afterLabelTextTpl: _est.afterLabelTextRequiredTpl,
msgTarget: 'side',
displayField: 'projectname',
valueField: 'projectname',
labelWidth: 130,
maxLength: 200
name: 'projectname',
allowBlank: false,
pageSize: true,
triggerAction: 'query',
autoSelect: true,
minChars: 0,
itemId : 'project-name-field',
value: Ext.htmlDecode(projectdetails.projectname),
hideTrigger: true,
anchor: '95%',
validator: function(oldValue) {
var existnstore = Ext.StoreMgr.lookup("ptoject-project-names-get-store");
if(existnstore){
var nstore = existnstore.findExact('projectname',oldValue);
if(nstore < 0){
return true;
}else{
return 'Job name already exist.';
}
}
},
listConfig: {
getInnerTpl: function () {
return '<a class="search-item">' +
'<span>{projectstate}</span>' +
'{projectname}' +
'</a>';
}
},
});
return combo;
}
any suggestions or opinions to do this :) thanks in advance..
I change 'validator' function and this work for me
validator: function(Value) {
var existname = projectdetails.projectname;
if(Value !== existname){
var existnamestore = Ext.StoreMgr.lookup("update-ptoject-project-names-get");
if(existnamestore){
var namestore = existnamestore.findExact('projectname',Value);
if(namestore < 0){
return true;
}else{
return 'Job name already exist. Please select different job name.';
}
}
}
return true;
}