I am trying to customise a button with multiple entries and multiple sub menus. I have managed to do this satisfactorily with the following code but would like the button label to remain the same whatever menu item is chosen. The listbox is the only method that I have been able to get this effect but fail on other types of button that do retain the label.
tinymce.init({
selector: "textarea",
toolbar: "mybutton",
setup: function(editor) {
editor.addButton('mybutton', {
type: 'listbox',
text: 'Test Menu',
icon: false,
onselect: function(e) {
editor.insertContent(this.value());
},
values: [
{text:'Menu No 1', menu:[
{text:'Sub Menu 1',value:'Some text for sub menu 1'},
{text:'Sub Menu 2',value:'Some text for sub menu 2'}
]},
{text:'Menu No 2', menu:[
{text:'Sub Menu 3',value:'Some text for sub menu 3'},
{text:'Sub Menu 4',value:'Some text for sub menu 4'}
]}
],
});
} });
Any help most appreciated
Having had the same problem I solved it with resetting the text in onselect:
onselect: function(e) {
editor.insertContent(this.value());
this.text('Test Menu');
}
Related
Is it possible to put a standard text on lines that do not have events?
You could add a title to a background event
{
id: '1',
resourceId: '123',
start: '2021-03-07T02:00:00',
end: '2021-03-07T06:00:00',
rendering: 'background',
title: 'my background title'
}
then in eventRender you could output it to the screen, inside the event block
eventRender: function (event, element) {
if (event.rendering == 'background') {
element.append(event.title);
}
}
then you could use CSS to gain control of how it looks.
https://fullcalendar.io/docs/background-events
I have created a menu with extjs where you click on it and can see menu items dropping down. The first item is open. This button is supposed to open a file from file-dialog. But the only way I can open the file dialog I found is to place the file dialog field in the menu by only showing the button.
Now I need help to make this button look like just regular menu item:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
// maybe to add some css class here
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', item.getValue());
}
}
});
var mainmenu = Ext.create('Ext.menu.Menu', {
width: 200,
margin: '0 0 10 0',
items: [item]
});
You can add the attribute buttonConfig to the Ext.form.field.File item and then use the standard attributes to a button. For example, this might work:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
buttonConfig: {
style: {
background: "#f1f1f1",
border: 0
}
},
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', item.getValue());
}
}
});
Try changing putting a cls instead of a style attribute in the buttonConfig to use a CSS class instead of inline CSS.
I'm working on Sencha touch 2. I have a tab panel inside which I have many tabs horizontally placed. I want to show the horizontal scroll bar always so that the user will know there are more tabs.
This is my tab panel with tabBar configuration. How can I make the scroll bar indicator visible always?:
Ext.define('Project.view.Result', {
extend: 'Ext.tab.Panel',
id:'searchTab',
tabBar: {
scrollable:'horizontal',
scrollBar:'true',
docked:'top',
layout: {
pack: 'center',
},
},
items:[
{
title: 'A Result',
xtype:'AList'
},
{
title: 'B Result',
xtype:'BList'
},
......
......
{
title: 'Z Result',
xtype:'ZList'
}
]
});
I tried this with css:
#searchTab .x-scroll-indicator[style] {
opacity: 0.5 !important;
}
But then the scroll bar becomes visible for the list items under each tab . But not for the tab bar.
You nearly got it just change your css to this:
.x-tabpanel .x-scroll-indicator {
opacity: 0.5 !important;
}
Hope it helps :)
"New in Touch 2.3.0, each indicator has an autoHide configuration that
allows you to control it. Setting autoHide to false will tell that
indicator not to auto-hide. You can use the indicators config within
the scrollable config on a Container or subclass."
http://www.sencha.com/blog/top-support-tips-march-2014
Ext.application({
name: 'Fiddle',
launch : function() {
Ext.Viewport.add({
xtype: 'container',
html: 'The y scroll indicator will always show, x will hide as autoHide defaults to true',
scrollable: {
direction: 'both',
indicators: {
y: {
autoHide: false
}
}
}
});
}
});
https://fiddle.sencha.com/#fiddle/1u9
I have a repeater In which I am displaying different values.On click of each row I want to display few values.But in the enyo example the content of the popup is popup.....
This content I want to change.I have tried as below
I have the popup-
{name: "basicPopup", kind: "enyo.Popup", floating: true, centered: true,
style: "background-color: yellow; padding: 10px", onHide: "popupHidden", components: [
{content: "Popup..."}
]
},
the mathod i used on tap of each row is
tapped: function(inSender, inEvent) {
alert(inSender.getContent())
this.$.basicPopup.setValue(inSender.getContent());
this.$.basicPopup.show();
},
But by this the vale of the popup is not changing.I want to change the value.Please help.
What you need to do is setContent() on the component inside the Popup OR destroyClientControls() on the Popup and then createComponents() to add what you want in there.
To do it the first way, you want to provide a name for that component, something like:
{name: "popupContent", content: "Popup..."}
and then use this.$.popupContent.setContent("foo");
I have a extjs button "Order" with menu items 'orderInsuranceMenu' for the button. I need to hide the menu items depeniding on some condition. How can i achive it
orderInsuranceMenu = {
id: 'menu-order-insurance'
,items: [
{
id:'btnMenu1',
text: 'Test Buton1',
iconCls: 'icon-cls',
listeners: {
click: function(b,e){
//some code goes here
}
}
}
,{
id:'btnMenu2',
text: 'Test Buton2',
iconCls: 'icon-first-title',
listeners: {
click: function(b,e){
//Some code here
}
}
}
]
};
Order = new Ext.Button({
text: 'Order '
, iconCls: 'icon-go'
, disabled: true
, menu: orderInsuranceMenu
, handler: function() {
}
});
I have tried this code but it doesnt work:
Ext.getCmp('btnMenu2').hide();
You can achieve this with the method setDisabled for the button. I.e:
Ext.getCmp('btnMenu2').setDisabled(true);
If you want to apply this for all items in your menu you can do this:
Ext.getCmp('menu-order-insurance').items.each(function(item) {
if (item.isXType('button')) {
item.setDisabled(true); // your condition here
}
});
Soloution:
In Extjs 2.2 there is no method to show or hide menu item by using isVisible
So after lot of digging and checking in firebug the final soloution I found was to hide or show the specific item as shown below
extManager.orderInsuranceMenu.items.items[1].hide();
orderInsuranceMenu.items.items[1].show();
You can use the setVisible method available in 2.2, in menu items. http://i.stack.imgur.com/kdw7f.png
If for some reason that does not work, I would resort to removing the item from the menu, and then adding it back into the menu when it is needed.