I'm using the rowEditing on my grid in my mvc application. I'm able to handle the event when the user clicks update. However i'm having issues get the selected record. The below behaves strangely. I do not get the record.data.Name value the first time i click update. Tho i can see the value in fire bug.
init: function () {
this.control({
'button[text=Update]': {
click: this.onMaterialUpdate
}
});
},
onLaunch: function () {
},
onMaterialUpdate: function (button) {
var grid = Ext.getCmp('materialsContainer');
var record= grid.getSelectionModel().getSelection()[0];
if (record != null) {
console.log(record.data.Name);
}
}
Not sure about it... but I think the click event happens before completeEdit, thus the record is neither committed, nor updated in the grid (or its selection).
Perhaps try to capture the edit event of the row editor instead of click? You should get the correct record there?
I'd suggested handle edit event of the RowEditor plugin. You could subscribe to this event on grid render event for example. By getting the plugin by pluginId.
Related
When the user clicks this camera icon the get a snapshot of the page in a modal. If they click repeatedly it will make multiple snapshots before the modal has loaded and essentially blocked the camera icon.
Is there a way that I can say if a snapshot modal has just been created do not create another one?
events: {
'click .snapshot-camera' : 'clickCamera'
}
clickCamera: (event) ->
event.preventDefault()
#snapshot = new ******.Models.Snapshot({ user_id: ******.State.get('signInUser').id })
You can use underscore's debounce method which prevents double submissions.
// prevent double-click
$('button.my-button').on('click', _.debounce(function() {
console.log('clicked');
/* .. code to handle form submition .. */
}, 500, true);
Have a look into the below article
http://jules.boussekeyt.org/2012/backbonejs-tips-tricks.html
I have a button and in my controller i created one mouse over event and a click event for that button's id. But everytime when i click button it goes to the mouseover event function only, but when I comment the mouseover it goes to the click event function nicely. Why this is so? I am using ext4.1
thanks in advance.
me.control({
'#notificationIconId':{
click:me.notificationClick
},
'#notificationIconId':{
mouseover:me.notificationMouseOver
}
});
},
notificationMouseOver : function (){
alert('1')
},
notificationClick :function(menuitem)
{
alert('2')
}
You're using two times the same key '#notificationIconId' in a Javascript object... So, the last one is overriding previous ones.
You can add multiple listeners for the same selector:
'#notificationIconId': {
click: me.notificationClick
,mouseover: me.notificationMouseOver
}
I have a list with handler on list item disclose, when the user click on an item
I'm pushing a form view with the next code:
list.up('navigationview').push({
xtype: 'xEditAddFormPanel',
title: 'Edit task',
data: record.getData()
});
In the first click it's working and the navigation display the xEditAddFormPanel..
But then, after click on the back button (and return to the list screen) and then press again on list item (what triggers the above code again) - now nothing happens.
How do I display the form screen again?
I had the same problem and the reason was that the listener(s) is(are) lost the second time that you push a view into the navigator. Why? Because every time that you push a view into the Navigator the old view is destroyed, taking with it all listeners to the grave...
To get around this problem I binded the events manually whenever I create a new view that I wanted pushed:
onXButtonTap: function () {
var view = Ext.create('MyApp.view.XEntryView');
//Bind the events you need manually every time you push.
view.on('myEvent', this.onSubmitNewX);
this.getXMainView().push(view);
}
Often in Sencha, you have to manually destroy components. You may need to do something like this:
var formPanel = Ext.create('YourApp.view.EditAddFormPanel', {
title: 'Edit task',
data: record.getData()
});
formPanel.onAfter('erased', function(){
this.destroy();
}, this);
list.up('navigationview').push(formPanel);
If I have a View in backbone.js and it has an event in the events list:
events: {
'click #somebutton': 'clicked'
},
clicked: function () {
console.log('clicked');
}
How can I then disable/enable that event? So for instance if its clicked then
the event is removed (the button remains on screen but is greyed out etc). When some other part of the view is updated or whatever the event
enabled. Sure I can use jquery but I want to know if this functionality is available in backbone.
Thanks for any answers
Paul
You can always use delegateEvents() and undelegateEvents() to redo your event binding between the DOM and your Backbone View. That said, I usually just keep the event handler and add a conditional in the handler.
// .disabled class (CSS) grays out the button
clicked: function(event) {
var buttonEl = $(event.currentTarget);
if (buttonEl.hasClass('disabled')) {
// Do nothing
} else {
// Do something AND...
buttonEl.addClass('disabled');
}
}
Then you can have your other view or code simply removeClass('disabled') when you want to restore functionality.
UPDATE - disabled property
See comments, but a simpler, much better solution is to use the disabled property disabled="disabled" of buttons.
Use delegateEvents and undelegateEvents for binding and unbinding events. Check for reference: delegateEvents
Using Wijmo Open ComponentOne's Dropdown, I tried to place it in a registration form that displays when a button is clicked. This form is inside a jquery modal window.
The problem is that it is not displayed like a wijdropdown inside the form.
I supposed that since is was hidden, then it wasn't part of the DOM and so I added a method in the callback of the function that displayed the modal window; when the modal window finishes displaying, then call the .wijdropdown() on the element. However, it didn't work.
In conclusion: the select tag is not being wijdropdowned...
¿Any recommendations?
Script
$(function() {
// show overlay
$('#product-slideshow-overlay-trigger').live('click', function() {
var $registerOverlay = $('#product-slideshow-overlay');
//left position
var positionLeft = ($(window).width() - $registerOverlay.width())/2;
$registerOverlay.css({'left':positionLeft});
//show mask
$('#mask').fadeIn();
$registerOverlay.slideDown(function()
{
console.log("Started");
/**Add WijmoDropdown***/
$('#estado').wijdropdown(function()
{
console.log("Did the wijdropdown");
});
console.log("Ended");
});
return false
});
}); // end document ready function
Refresh the wijdropdown when the dropdown is not hidden:
$('.wijmo_drp').wijdropdown("refresh");
or
Find the wijmo component and check if it's visible or not (styled or not).
And trigger the visiblity changed event when you display the modal window.
if($('.wijmo-wijobserver-visibility').is(':visible'))
{
$('.wijmo-wijobserver-visibility').trigger("wijmovisibilitychanged");
}