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.
Related
I'd like to have an introductory hint in EnjoyHint that the user can move on from by simply pressing "Next". So no arrow to an element. Is this possible?
HTML
<div class="hidden"></div>
JS
var enjoyhint_script_steps = [
{
'click .hidden': '<h2>Introduction</h2><p>This is an introductory sentence, which tells you a bit about everything.</p>',
showSkip: false,
showNext: true,
margin: 0,
onBeforeStart: function () {
document.getElementsByClassName('enjoyhint_svg_wrapper')[0].style.display = 'none';
}
},
{
onBeforeStart: function () {
document.getElmentsByClassName('enjoyhint_svg_wrapper')[0].style.display = 'block';
},
...rest of step 2...
}
...rest of steps...
];
Explanation
<div class="hidden"></div> is an empty element for EnjoyHint to target.
'click .hidden': '...description...' targets the empty element and adds a description.
showSkip: false hides the skip button.
showNext: true shows the next button.
margin: 0 hides the area highlighted by EnjoyHint.
onBeforeStart: function () {...} is used to hide the arrow in the first step and show it in the second step.
var enjoyhint_script_steps = [
{
'next .hidden': '<h2>Introduction</h2><p>This is an introductory sentence, which tells you a bit about everything.</p>',
showSkip: false,
showNext: true,
onBeforeStart: function () {
$('#enjoyhint_arrpw_line').hide();
}
},
{
...rest of step 2...
}
...rest of steps...
];
Explanation
There is a better solution then target to a hidden div, when assigning the 'click' event.
The 'click' event expects the user to click on the highlithed element in order to move on to the next step and when your element is hidden you cannot click on it.
In order to have 'Next' button by default and target the user to click on it you need to use the 'next' event.
The onBeforeStart gives you the option to run any function you want just before this specific hint starts, so you can run:
function () {
$('#enjoyhint_arrpw_line').hide();
}
Inside the onBeforeStart.
When you do it like that you can highlight any element on page without an arrow and have a mandatory 'Next' button.
You can also write it that way if it's more readable:
var enjoyhint_script_steps = [
{
event: 'next',
selector: '.hidden', // or any element you want to highlight
description: '<h2>Introduction</h2><p>This is an introductory sentence, which
tells you a bit about everything.'</p>
showSkip: false,
showNext: true, // not necessary
onBeforeStart: function () {
$('#enjoyhint_arrpw_line').hide();
}
},
{
...rest of step 2...
}
...rest of steps...
];
You can make div class="hidden" and make arrow transparent
let enjoyhint_script_steps = [
{
'click .hidden': '<h2>Hello</h2>',
arrowColor:'transparent'
}
];
I'm trying to create a code button with the Froala editor which can basicly do the same thing as here on SO by pressing CNTRL+K. Now I think I have two choices.
The first one is to edit the froala-editor.js file, because Froala already has a 'code' button which only adds the <pre> tags. If I could somehow get it to also add the <code> tag, problem solved. Unfortunately I didn't get this to work.
The second option is to create a custom button, so far I have this piece of code:
$('textarea[name="description"]').editable({
//Settings here
customButtons: {
insertCode: {
title: 'Insert code',
icon: {
type: 'font',
value: 'fa fa-code'
},
callback: function() {
this.saveSelection();
if (!this.selectionInEditor()) {
this.$element.focus(); // Focus on editor if it's not.
}
var html = '<pre><code>' + this.text() + ' </code></pre>';
this.restoreSelection();
this.insertHTML(html);
this.saveUndoStep();
}
}
}
});
It works somehow, but it's buggy and produces strange html like so:
<p><code></code>
<pre><code>asdasdasdasd
</code></pre>
</p>
Any help with getting this done for either option one or two would be greatly appreciated.
If you upgrade to version 1.2.3 that is available on Github your code should work https://github.com/froala/wysiwyg-editor. It's not necessary to save/restore selection.
LATER EDIT:
Here is a jsFiddle for it http://jsfiddle.net/9pmmg1jk/.
customButtons: {
insertCode: {
title: 'Insert code',
icon: {
type: 'font',
value: 'fa fa-code'
},
callback: function() {
if (!this.selectionInEditor()) {
this.$element.focus(); // Focus on editor if it's not.
}
var html = '<code>' + (this.text() || '') + '<span class="f-marker" data-type="false" data-id="0" data-fr-verified="true"></span><span class="f-marker" data-type="true" data-id="0" data-fr-verified="true"></span></code>';
this.insertHTML(html);
this.restoreSelectionByMarkers();
this.saveUndoStep();
}
}
}
i am have 2 forms, and in first form i am have button1:
Buttons[{
width: 350,
text: 'Book',
name:'button1'}]
on second form i am have button2, and when button click in second form, then button in first form disabled, before i am use id of button (id:'button1') and make this:
Ext.getCmp('button1').setDisabled(true);
but now i am remove ID and use name in components. But i am didn"t know how disable button1 by name!
Buttons don't have a name property - you should consult the documentation to see what configuration variables you have available to you. I'd instead assign it an itemId so you can make use of the up() and down() functions in order to easily find an item in the component hierarchy from an event handler.
Or if you want to find it directly you can use the following to lookup up the item:
{
text : 'Button',
itemId : 'buttonSelector'
}
var button = Ext.ComponentQuery.query('#buttonSelector');
if(button.length) button[0].disable();
Keep in mind that the ComponentQuery utility returns an array of items (even if you make your itemId unique). Here's a simple fiddle / demonstration.
In response to your comment, there may be confusion in regards to what the buttons config actually does - according to the docs it is shorthand for the following:
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
defaults: {minWidth: minButtonWidth},
items: [
{ xtype: 'component', flex: 1 },
{ xtype: 'button', text: 'Button 1' }
]
}]
... this creates an extra "step" in the hierarchy which you must account for in a query. For example, if your form had an itemId of formId you could try something like:
Ext.ComponentQuery.query('#formId toolbar #myButtonId')[0].disable();
I've updated your fiddle to demonstrate this.
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');
}
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.