I have a third party Bootstrap plugin (probably EOL), which added buttons to the toolbar, which in turn opened a dialog from where I could select Bootstrap elements to add to the content.
It used the following code:
var insertBtn = tinymce.ui.Factory.create({
type: elType,
classes: elClass,
text: bsText['button'],
icon: 'icon-btn',
name: 'insertBtnBtn',
tooltip: bsTip['button'],
onclick: function() {
showDialog('bootstrap-btn.php', 'Add button', 580, 'bsBtn');
}
});
bsItems.push(insertBtn);
But it says that Factory is undefined or that create is a non-existing function. What can I use to make this work, to show the buttons as well as showing the dialog on click? I already updated the following code to view bsItems:
editor.ui.registry.addButton('bootstrap', {
type: 'buttongroup',
classes: 'bs-btn',
items: bsItems
});
And I tried several other possibilities to find the create function:
editor.ui.registry.create()
editor.ui.Factory.create()
editor.ui.create()
tinymce.ui.registry.create()
tinymce.ui.Factory.create()
tinymce.ui.create()
All to no avail
With version 5, TinyMCE uses a new UI framework. Third party plugins written for version 4.x that provided custom UI control elements will likely not work with version 5.
As noted in this GitHub issue thread, tinymce.ui.Factory has been deprecated and will not be re-implemented, so it is no longer possible to create control Factories.
The methods to add UI elements like buttons have also changed from v4 to v5. The official migration guide goes into a fair amount of detail regarding the new locations and configuration signatures of these methods.
tl;dr This particular plugin might not work with v5's new UI framework but there are still ways of customizing the UI using the new system.
Related
I have a problem with Tabulator.js library. I am usig version 4.8, I would like to use context menu feature, but I am unable to make it work. When I use code from documentation (see bellow) browser default context menu is replaced by nothing (nothing shows up). I was not able to find answer to this. Is here someone with similar experience? I have tried three different browsers,but behavior appears to be same in every one of them.
rowContextMenu: [
{
label:"Hide Column",
action:function(e, column){
column.hide();
}
},
{
separator:true,
},
{
disabled:true,
label:"Move Column",
action:function(e, column){
column.move("col");
}
}
]
Unfortunately the example is in error. The rowContextMenu action function does not provide a Column component. It provides a Row component.
If you want to manipulate a column you will need to setup Column Menus. Start by looking here and scroll down to see the other options - http://tabulator.info/docs/4.8/menu#header-menu.
For Rows look at Row Context Menus - http://tabulator.info/docs/4.8/menu#row-context
Unfourtunately, it was all my mistake, I surely did update tabulator js version but forgot to change CSS file, so menu was working right but was shown as div without styling on the bottom.
How to disable kendo-ui grid multi column filtering?
I need to clear other column filter value when filtering with a column, and filtering only possible with single column(Not combination filter)?
demo: https://so.lucafilosofi.com/disable-kendo-ui-grid-multi-column-filtering
try this:
var datasource = $("#grid").kendoGrid({
columns: [{}],
filterable : true,
filterMenuInit: function(e) {
$("form.k-filter-menu button[type='reset']").trigger("click");
},
dataSource: {
data: [{}]
}
});
NOTE: after some research i noticed that this is a common issue in the kendo community as well as is one of the most wanted feature to bind the filter menu event, but still there is no valid fix. so, i decided to hack the source code a little bit (just few lines of code), this task has been quite annoying since the kendo source is only available in compressed/obfuscated format for non licensed copy, BTW, you can see the result on the demo page and look into the source code. source on github for direct cdn file inclusion hope this help someone...
I updated my CrossUI framework to version 1.2 and found that autoTips property is added to the DataModel of UI. Unfortunately, this change make trouble for my web. Every UI Item has its thumbnail tip. So how can I set autoTips to false as default? To insert "setAutoTips(false)" to all of my UI objects that will drive me crazy!
Add following code before any control was created:
xui.UI.setDftProp({
autoTips: false
});
And, if you only want to block SButton's autoTips, you can use
xui.UI.SButton.setDftProp({
autoTips: false
});
I'm creating a rally grid for portfolio items using the 2.0 SDK, and including the "PlannedEndDate" field. This is really nice, because it brings up a calender editor if somebody wants to edit the field.
But I want to make the PlannedEndDate smaller than the standard width. But, when I do that, I loose the nice editing feature and other defaults. How do I change the width, but not loose all the other nice defaults?
I'm changing columnCfgs From:
PlandEndDate,
To:
{ dataIndex: 'PlannedEndDate', width: 35, text:'Planned End' }
Do I need to use some fancy xtype or something?
If you add this to your PlannedEndDate column config it should work:
editor: {
xtype: 'rallydatefield',
format: Rally.util.DateTime.getUserExtDateFormat(),
validateOnChange: false
}
We hope to do some refactoring around the way columns are handled in the grid to make things like this easier.
I am trying to create a custom container but can't figure just how to do it.
I need it to look like this:
(don't pay attention that it is RTL, this is only a sketch to get started)
where the orange fonts are the title of the page that I would like to be an H1 element.
It has a simple search and an advance search that pops open when the little arrow next to the search button is clicked.
Questions:
1) What should I extend for that ?
2) How can I implement different advance search forms for different pages ?
3) how can I place a setter for the title that controllers can interact with and manipulate the dom ?
basically any advice will be good as I need a start point.
thanks
There are lots of ways of doing this, but this is what I would do.
I'm not sure about the "advanced forms for different pages" can you go into mre detail about that? Are you looking to autogenerate a search form somehow?
Extend Ext.form.Panel, and use a table layout for the fields
See: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Table
use a "tbar" on the panel instead of setting "title". you can place the search combo, tbfill, then a tbtext for the "title". As a convenience you can override the setTitle function of the panel to manipulate this tbtext field instead of the normal behavior. Something like this:
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
alias:'widget.myform',
layout:{
type: 'table',
columns: 4,
tableAttrs: {
style: {
width: '100%'
}
}
},
//overridden setTitle
setTitle:function(title){
Ext.getCmp(this.id + "_search_combo").setText(title)
},
defaults:{
xtype:"combo",
//rest of combo config here
},
items:[{
//...
}],
initComponent:function(config){
this.tbar = tbar:[{
xtype:"combo",
//...
id:this.id + "_search_combo"
},{
xtype:"tbfill"
},{
xtype:"tbText",
cls:"my_form_title",
value:this.title||""
}]
//prevent default title behavior
delete this.title
this.callParent(arguments);
}
})
I would suggest you to just extend from Ext.panel.Panel itself, and hijack the dom for all those customized items, add in search bar, etc. If you do not want any of the fancy stuff from Ext.panel.Panel, you can also extend it from Ext.Component, or Ext.container.Container (to contains more components), and even the lowest Ext.util.Observable.
It seems like you might need to extend a few Ext.menu.Menu and defines some different set of input boxes, so that you could benefit from creating a floated menu (if that's what you want). Or if you have time, you can even just extend from Ext.Component and build your own customized component, or even lower, Ext.util.Observable.
The setter? It will be in the extended component in (1) then :)
All of these serve as rough opinions. They could be different depends on your requirement.