I have a grid view that has rows, and within each rows have an action column that you can click. I want to programmatically click the action column and run whatever event it does. The action column's got a itemID as well. Here's what i got so far,
var yourgrid = Ext.ComponentQuery.query('grid[itemId=yourgridname]')[0];
var record = yourgrid .getSelectionModel().select(0, true);
How do you get click the action column ?
From the docs
Firing your own events is done by calling fireEvent with an event
name.
var actionColumn = Ext.getCmp('#actionColumnId');
actionColumn.fireEvent('click', actionColumn);
Related
I am using ASP.NET 4.5 to develop my application. In my application I have a dropdownlist (DDL) and some textbox controls. The textbox controls are holding some numeric values. There are some calculations depending upon the values in the textboxes and calculation will occur when any of the controls go out of focus. I have used the blur event for this purpose:
$("#MainContent_txtQty").blur(function () {
alert('1');
var Qty = $("#MainContent_txtNewQty");
}
$("#MainContent_txtRate").blur(function () {
alert('1');
var Qty = $("#MainContent_txtNewQty");
}
However when I change the DDL item the blur is not working. I have placed all my controls inside an update panel.
UpdatePanel could load asynchronously, so maybe the DDL is not the same that had the event subscription when his value is not changed.
To intercept the load of the updatepanel, try this:
<script>
///<summary>
/// This will fire on initial page load,
/// and all subsequent partial page updates made
/// by any update panel on the page
///</summary>
function pageLoad(){
///SELECT DDL AND SUBSCRIBE BLUR HERE
}
</script>
This pageLoad() function should be called when the updatePanel chenges, so you can try to select DDL "again" (to be explicit, again is a wrong term because the DDL is a new DDL, not the same that was before, even if has the same ID) and subscribe the blur event here
The result should be the subscription of the new DDL element every time that the update panel changes
I am trying to set a on click event dynamically. After i read some data and get back true, onclick event need to do one thing on dijit/form/Button and when i get back false onclick event need to do other thing on same button.
if(m_test==true){
if(dojo.byId(tmp_tst_button)){
dojo.removeClass(tmp_tst_button,'button_fr');
dojo.addClass(tmp_tst_button,'button_fr_toggle');
var change_on_click = dojo.byId(tmp_tst_button);
dojo.connect(change_on_click,'onclick',function(){
command(tmp_binary_off);
});
}
}
else{
if(dojo.byId(tmp_tst_button)){
dojo.removeClass(tmp_tst_button,'button_fr_toggle');
dojo.addClass(tmp_tst_button,'button_fr');
var change_off_click = dojo.byId(tmp_tst_button);
dojo.connect(change_off_click,'onclick',function(){
command(tmp_binary_on);
});
}
}
and event is connect, but every time data is changed one more event onclick is ADD, so when i click on button i call multiple times command and more and more every next time. Like command functions is appended to button every time.
You need to modify your dojo.connect code as below.
var handle = dojo.connect(change_on_click,'onclick',function(){
command(tmp_binary_off);
// disconnect after use.
dojo.disconnect(handle);
});
I have a two tab layout. When the first tab button is clicked the rows are filled using data retrieved remotely. This is the same for the second tab but the layout of the data is different.
My problem is when you switch between tabs I need to fire a click event on the first row of each tab.
I am building this app for android only.
Any help is greatly appreciated...
EDIT: This is dummy code of the top of head, hope it makes a bit more sense.
leftTableView = Ti.UI.createTableView({
data: populateTableView(0),
allowsSelection:true
});
function populateTableView(byType)
{
for(length of array loop){
var tableViewRow=Ti.UI.createTableViewRow({
my_obj:myObj[i]
});
tabledata=[]
tableViewRow.addEventListener('click',function(e){
e.row.setBackgroundImage('/images/selected-row-background.png');
}
if byType 0
loop array display row for each object element
tableData.push(tableViewRow);
return tabledata
if byType 1
loop array display row for each object element, display differently
tableData.push(tableViewRow);
return tabledata
}
}
tab 1 click event listener
populateTableView(0);
leftTableView.data[0].rows[0].fireEvent('click');//this fires but says e.row.setBackgroundImage is undefined
tab 2 click event listener
populateTableView(1)
leftTableView.data[0].rows[0].fireEvent('click');//this fires but says e.row.setBackgroundImage is undefined
Listen for the blur event on the tabGroup and take action as each one of the tabs become the active tab
http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.TabGroup-event-blur
tabGroup.addEventListener('blur', function(_event) {
var activeTab = _event.tab;
// now that you have the activeTab, get the window, then the
// table and call a method to simulate a click on the first
// row
});
passing data when firing event
var row = leftTableView.data[0].rows[0];
row.fireEvent('click', { row : row } )
I have this datatable an YUI datatable inside a dialog. The datatable has only 2 columns where only one is editable with formatter: "checkbox". I'm wondering is there any way to collect only the changed data or how should I get all the data to submit it with AJAX request.
Here an sample how to listen to the checkbox click event and select the row of the datatable. You should change the code of selecting the row by a ajax query to post your data changed.
myDataTable.subscribe("checkboxClickEvent", function (oArgs) {
var elCheckbox = oArgs.target;
var oRecord = this.getRecord(elCheckbox);
if (elCheckbox.checked) {
myDataTable.selectRow(oRecord);
} else {
myDataTable.unselectRow(oRecord);
};
});
Hope this helps.
In a change event listener for the check box (the click event listener), you could add the obtained records into a (global) array by using something similar to
changedArray.push(oRecord);
And when you want to send it, send changedArray. You could also prevent multiple adds.
if (!changedArray[oRecord.keyElement]) {
changedArray.push(oRecord);
changedArray[oRecord.keyElement] = true;
}
We are developing a web application with GUI customized to use on iPhone. A page on the app has 3 subsequent SELECT dropdowns, where selection of an option from 1st dropdown derives the options for 2nd dropdown, and so forth. The subsequent dropdown options are populated by javascript based on onchange event on previous dropdown.
The problem is that, on iPhone the options for a SELECT appears with 'prev' and 'next' links to move to previous and next control. When the 'next' link is clicked, then the control moves to next SELECT and displays the options. The javascript is triggered by onchange event for previous SELECT and populates the options for next SELECT. But on dropdown for 2nd SELECT displays the previous options before it is repopulated by the javascript.
Is there a workaround or event that can sequence execution of javascript and then selection of next control? Is there any event that can be triggered when a SELECT option is selected and before control leaves the SELECT element? Is there a handle for Next and Previous links for SELECT dropdown option display?
Maybe you could use the focus event, in jQuery this would be:
$('#select2').focus(function () {
// update select2's elements
});
Although the real question is when the iPhone overload comes in, and when the event get fired. And also can the select options be changed whilst in this view.
I had the same problem on my site. I was able to fix it by manually polling the selectedIndex property on the select control. That way it fires as soon as you "check" the item in the list. Here's a jQuery plugin I wrote to do this:
$.fn.quickChange = function(handler) {
return this.each(function() {
var self = this;
self.qcindex = self.selectedIndex;
var interval;
function handleChange() {
if (self.selectedIndex != self.qcindex) {
self.qcindex = self.selectedIndex;
handler.apply(self);
}
}
$(self).focus(function() {
interval = setInterval(handleChange, 100);
}).blur(function() { window.clearInterval(interval); })
.change(handleChange); //also wire the change event in case the interval technique isn't supported (chrome on android)
});
};
You use it just like you would use the "change" event. For instance:
$("#mySelect1").quickChange(function() {
var currVal = $(this).val();
//populate mySelect2
});
Edit: Android does not focus the select when you tap it to select a new value, but it also does not have the same problem that iphone does. So fix it by also wiring the old change event.