Fire Off Coolite Button from Javascript

[Juls]

This one could be easy. *I have a button statically named on my main grid. *I want to be able to invoke its Handlers and Fn's from other windows. *Using Firefox and Firebug i can confirm that I can get the Button but I don't know the javascript to fire ti off. *Any help? *Thanks.

*function RefreshTimesheet() {
** * * *var btn = document.getElementById('btnRefresh_TimeCardGrid');
** * * *console.log(dumper(btn));
** * * *if (btn != undefined) {
** * * * * *btn.click();
** * * *}
** *}

Thanks,


Juls

[Vladimir]

Hi,

All Coolite controls can be referenced by ClientID. If Controls doesn't placed to the NamingContainer (master page, user control) then ID=ClientID. Also you can set IDMode=Static for generate ClientID as ID
To fire click you need execute the following js code

Button1.fireEvent('click');

[Juls]

Hi Vladimir,

That suggestion looks very promising. *Would be a perfect way to fire off events in javascript i have already wired to buttons, ie. the refresh of the gridview. *


When i wire this up, it gives me an error.

function RefreshTimesheet() {
** * * *var btn = document.getElementById('btnRefresh_TimeCardGrid');
** * * *console.log(dumper(btn));
** * * *if (btn != undefined) {
** * * * * *btn.fireEvent('click');
** * * *}


** *}

<div class="errorTitle">btn.fireEvent is not a function
<div class="errorTrace"><div class="objectBox objectBox-stackFrame"><a class="objectLink">RefreshTimesheet</a>()UITest.aspx (line 170)
<div class="objectBox objectBox-stackFrame"><a class="objectLink">EventManager()</a>()coolite.axd?9936 (line 12)

<div class="errorSourceBox errorSource-exec">{script:"CheckboxSelectionModel1.header=...ry1_TCOptionWindow1_TCEditThis.hide();"}
<div class="errorSourceBox errorSource-exec">

<div class="errorSourceBox errorSource-exec">

<div class="errorSourceBox errorSource-exec">A dump of 'btn' looks like:
<div class="errorSourceBox errorSource-exec">

<div class="errorSourceBox errorSource-exec">this.addEventListener is a function->function addEventListener() {
    [native code]
}
this.tagName is a string->TABLE
this.id is a string->btnRefresh_TimeCardGrid
this.getElementsByTagName is a function->function getElementsByTagName() {
    [native code]
}
this.className is a string->x-btn-wrap x-btn x-btn-text-icon
this.style is a object->[object CSSStyleDeclaration]
this.offsetWidth is a number->64
this.compareDocumentPosition is a function->function compareDocumentPosition() {
    [native code]
}
this.nodeType is a number->1
this.parentNode is a object->[object HTMLTableCellElement]
this.getAttributeNS is a function->function getAttributeNS() {
    [native code]
}
this.getAttribute is a function->function getAttribute() {
    [native code]
}
this.nodeName is a string->TABLE
this.nodeValue is a object->null
this.childNodes is a object->[object NodeList]
this.firstChild is a object->[object HTMLTableSectionElement]
this.lastChild is a object->[object HTMLTableSectionElement]
this.previousSibling is a object->null
this.nextSibling is a object->null
this.attributes is a object->[object NamedNodeMap]
this.ownerDocument is a object->[object HTMLDocument]
this.insertBefore is a function->function insertBefore() {
    [native code]
}
this.replaceChild is a function->function replaceChild() {
    [native code]
}
this.removeChild is a function->function removeChild() {
    [native code]
}
this.appendChild is a function->function appendChild() {
    [native code]
}
this.hasChildNodes is a function->function hasChildNodes() {
    [native code]
}
this.cloneNode is a function->function cloneNode() {
    [native code]
}
this.normalize is a function->function normalize() {
    [native code]
}
this.isSupported is a function->function isSupported() {
    [native code]
}
this.namespaceURI is a object->null
this.prefix is a object->null
this.localName is a string->TABLE
this.hasAttributes is a function->function hasAttributes() {
    [native code]
}
this.ELEMENT_NODE is a number->1
this.ATTRIBUTE_NODE is a number->2
this.TEXT_NODE is a number->3
this.CDATA_SECTION_NODE is a number->4
this.ENTITY_REFERENCE_NODE is a number->5
this.ENTITY_NODE is a number->6
this.PROCESSING_INSTRUCTION_NODE is a number->7
this.COMMENT_NODE is a number->8
this.DOCUMENT_NODE is a number->9
this.DOCUMENT_TYPE_NODE is a number->10
this.DOCUMENT_FRAGMENT_NODE is a number->11
this.NOTATION_NODE is a number->12
this.setAttribute is a function->function setAttribute() {
    [native code]
}
this.removeAttribute is a function->function removeAttribute() {
    [native code]
}
this.getAttributeNode is a function->function getAttributeNode() {
    [native code]
}
this.setAttributeNode is a function->function setAttributeNode() {
    [native code]
}
this.removeAttributeNode is a function->function removeAttributeNode() {
    [native code]
}
this.setAttributeNS is a function->function setAttributeNS() {
    [native code]
}
this.removeAttributeNS is a function->function removeAttributeNS() {
    [native code]
}
this.getAttributeNodeNS is a function->function getAttributeNodeNS() {
    [native code]
}
this.setAttributeNodeNS is a function->function setAttributeNodeNS() {
    [native code]
}
this.getElementsByTagNameNS is a function->function getElementsByTagNameNS() {
    [native code]
}
this.hasAttribute is a function->function hasAttribute() {
    [native code]
}
this.hasAttributeNS is a function->function hasAttributeNS() {
    [native code]
}
this.title is a string->
this.lang is a string->
this.dir is a string->
this.caption is a object->null
this.tHead is a object->null
this.tFoot is a object->null
this.rows is a object->[object HTMLCollection]
this.tBodies is a object->[object HTMLCollection]
this.align is a string->
this.bgColor is a string->
this.border is a string->0
this.cellPadding is a string->0
this.cellSpacing is a string->0
this.frame is a string->
this.rules is a string->
this.summary is a string->
this.width is a string->
this.createTHead is a function->function createTHead() {
    [native code]
}
this.deleteTHead is a function->function deleteTHead()
{ [native code]
}
this.createTFoot is a function->function createTFoot() { [native
code]
}
this.deleteTFoot is a function->function deleteTFoot() { [native
code]
}
this.createCaption is a function->function createCaption() { [native
code]
}
this.deleteCaption is a function->function deleteCaption() { [native
code]
}
this.insertRow is a function->function insertRow() { [native code]
}
this.deleteRow is a function->function deleteRow() { [native code]
}
this.offsetTop is a number->0
this.offsetLeft is a number->0
this.offsetHeight is a number->21
this.offsetParent is a object->[object HTMLTableCellElement]
this.innerHTML is a string-><tbody><tr><td
class="x-btn-left">&amp;nbsp;</td><td
class="x-btn-center"><em unselectable="on"><button
id="ext-gen371" class="x-btn-text icon-reload"
type="button">Reresh</button></em></td><td
class="x-btn-right">&amp;nbsp;</td></tr></tbody>
this.scrollTop
is a number->0
this.scrollLeft is a number->0
this.scrollHeight is a number->21
this.scrollWidth is a number->64
this.clientTop is a number->0
this.clientLeft is a number->0
this.clientHeight is a number->21
this.clientWidth is a number->64
this.tabIndex is a number->-1
this.contentEditable is a string->inherit
this.blur is a function->function blur() { [native code]
}
this.focus is a function->function focus() { [native code]
}
this.spellcheck is a boolean->false
this.removeEventListener is a function->function
removeEventListener() { [native code]
}
this.dispatchEvent is a function->function dispatchEvent() { [native
code]
}
this.baseURI is a string->http://localhost:3540/UITest.aspx
this.textContent is a string->*Reresh*
this.isSameNode is a function->function isSameNode() { [native code]
}
this.lookupPrefix is a function->function lookupPrefix() { [native
code]
}
this.isDefaultNamespace is a function->function isDefaultNamespace()
{ [native code]
}
this.lookupNamespaceURI is a function->function lookupNamespaceURI()
{ [native code]
}
this.isEqualNode is a function->function isEqualNode() { [native
code]
}
this.getFeature is a function->function getFeature() { [native code]
}
this.setUserData is a function->function setUserData() { [native
code]
}
this.getUserData is a function->function getUserData() { [native
code]
}
this.DOCUMENT_POSITION_DISCONNECTED is a number->1
this.DOCUMENT_POSITION_PRECEDING is a number->2
this.DOCUMENT_POSITION_FOLLOWING is a number->4
this.DOCUMENT_POSITION_CONTAINS is a number->8
this.DOCUMENT_POSITION_CONTAINED_BY is a number->16
this.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC is a number->32
this.getElementsByClassName is a function->function
getElementsByClassName() { [native code]
}
this.getClientRects is a function->function getClientRects() {
[native code]
}
this.getBoundingClientRect is a function->function
getBoundingClientRect() { [native code]
}*

<div class="errorSourceBox errorSource-exec">

[Juls]

*I should just note this as well. *I am using IDMode="static" and trying to fire off a button in another UserControl. *I dont think that should be a problem with the static ID. *Basically, I am trying to get a client side refresh of the Gridpanel because I know the store has now been changed.



Trying to fire this off in Javascript.

*<ext:Button ID="btnRefresh_TimeCardGrid" IDMode="Static" runat="server" Icon="Reload" Text="Reresh">
** * * * * * * * * * <AjaxEvents>
** * * * * * * * * * * *<Click OnEvent="Refresh_GridView" />
** * * * * * * * * * </AjaxEvents>
**</ext:Button>

[Juls]

*this button lives in a topbar. *Not sure if that matters.

Thanks

[Vladimir]

Hi,

You don't need to use*&#100;ocument.getElementById. It gives pure dom element
Just use ClientID directly. All Coolite controls define own variable which eqaul own ClientID. So, just try

*btnRefresh_TimeCardGrid.fireEvent('click');

or

Ext.getCmp('btnRefresh_TimeCardGrid').fireEvent('click');

[Juls]

*Brilliant!

Thanks again!