I have a tabpanel and have many childs. Each are closable. I want to remove the tabpanel itself when there are no children.
listeners: {
close: function(element) {
var detailTabPanel = element.up('DetailTabPanel');
if(detailTabPanel.items.length <= 1)
{
detailTabPanel.destroy();
}
}
}
I have written code like above for close action. But i get error like
Uncaught TypeError: Cannot read property 'get' of null DetailTabPanel is the tabpanel.
Almost there! Try it like this:
listeners: {
remove: function(tabpanel, child, eOpts) {
if (tabpanel.items.length === 0) {
tabpanel.destroy();
}
}
}
See Fiddle here: https://fiddle.sencha.com/#fiddle/1fo2
You don't have to do callParent inside a listener.
You're using the wrong event. Rather than listening for the close event of the children (which is called after the tab is removed from the panel), you want to listen for the remove event on the tab panel itself.
Related
When a user clicks on a link, it uses routing to send the user to another component, you start at home and can click to charts. My problem is that I need to get the queryselector for the charts element, but when code is loaded from the component, it doesn't exist yet. How can I wait for the element to be created to execute the code?
I solved this by adding a MutationObserver inside the constructor.
Element chartsElement;
ChartsComponent() {
MutationObserver observer = MutationObserver(_onMutation);
Element my_app = querySelector('my-app');
observer.observe(my_app, childList: true);
}
_onMutation(List<dynamic> mutations, MutationObserver observer) {
mutations.forEach((value) {
MutationRecord record = value as MutationRecord;
if (record.addedNodes.contains('charts')) {
chartsElement = record.addedNodes[0];
}
});
observer.disconnect();
//Do stuff
}
In my Vaadin 7 application I have to add Delete button, but this button should be only accessible to an authorized person.
I have added the button with a following code:
if (canRemove()) {
layout.addComponent(createRemoveButton());
}
Also I have added a listener to this button:
button.addClickListener(e -> {
//some logic
});
Do I need to add one more condition inside of this listener:
button.addClickListener(e -> {
if (canRemove()) {
//some logic
}
});
or this condition is redundant and I can avoid it ?
Summarizing the comments on the question:
It's redundant, no button, no click event. Alternative is hiding the button like button.setVisible(isAuthorized(user)) if not authorized.
Imagine, you want to listen to all clicks made to any anchor element on page. The anchors on page can be dynamically added/removed during the page lifetime and you want to register all of the click events, even on newly added.
Is there any way how to attach delegated event (like in jQuery) in Dart using its standard libraries?
In jQuery you can achieve this with element.on('click', '.selector', handler);.
You can now do that with ElementStream.matches like this :
document.body.onClick.matches('.selector').listen((Event event) {
print('Super cool!');
// The currently registered target for the event
// document.body
event.currentTarget;
// The element whose CSS selector matched
// .selector
event.matchingTarget;
// The target to which the event was originally dispatched
// the real element clicked under .selector
event.target;
});
Because I have found no viable solution, I have created package that enables delegation.
You can find it at
http://pub.dartlang.org/packages/delegate
Code is simple:
delegate(parent, condition, handler) {
return (event) {
var element = event.target;
while (element != parent && element != null) {
if (condition(element)) {
handler(event, element);
}
element = element.parent;
}
};
}
delegateOn(parent, String eventType, condition, handler) {
parent.on[eventType].listen(delegate(parent, condition, handler));
}
I have a problem that I can't seem to figure out. I'm trying to have a droppable element conditionally fire a different function based on the class of the item dropped. For the life of me I can't figure out how to do this. Here's the link: http://jsfiddle.net/643PC/22/
The pageContainer accepts Rows. Rows accept Spans. Spans should accept Actions and Fields and fire a different function based on which item is dropped. Any ideas?
Finished function with David's help:
function generalDrop(event, ui) {
var appendTarget = $(this);
if (ui.draggable.hasClass('field-item')) {
fieldDrop(event, ui, appendTarget);
}
else {
actionDrop(event, ui, appendTarget);
}
}
function actionDrop(event, ui, appendTarget) {
$(document.createElement('a'))
.addClass('btn btn-primary')
.attr('href', '#')
.text('Button')
.appendTo(appendTarget)
}
Change your generalDrop function to this:
function generalDrop(event, ui) {
if (ui.draggable.hasClass('field-item')) {
fieldDrop(event, ui);
}
else {
actionDrop(event, ui);
}
}
I'm trying to have a jQuery UI event fire only if it meets the criteria of being clicked while the shift key is in the keydown state ( to mimic being held), and if not disable the event.
This example uses jQuery UI's .draggable to drag a container div only if the user clicks and holds shift.
http://jsfiddle.net/zEfyC/
Non working code, not sure if this is the best way to do this or what's wrong.
$(document).click(function(e) {
$('.container').keydown(function() {
if (e.shiftKey) {
$('.container').draggable();
} else {
$('.container').draggable({
disabled: true
});
}
});
});
I see lots of errors with that code. Firstly, you only add the key listener after there's been a click on the document. Second you are adding keydown to the container div, rather than the whole document. Then, you also need to listen to keyup, since releasing the shift key should disable draggability, then you also need to pass disabled: false to the case where shift is down. And your handler is missing the e parameter. Try this:
$(function(e) {
var handler = function(e) {
if (e.shiftKey) {
$('.container').draggable({
disabled: false
});
} else {
$('.container').draggable({
disabled: true
});
}
};
$(document).keydown(handler);
$(document).keyup(handler);
});