Resolving Coolite objects in client script
Has anyone found a good way to do this? Or, indeed, is there a trick I'm missing from Coolite? There doesn't appear to be a "Coolite." namespace declared in the same way there's an "Ext" namespace declared/provided when the components are used on a page.
What I want to be able to do is write arbitrary client side javascript (event handlers and suchlike) inside a script block rather than inside an attribute of the server-side tag. The different ways I've discovered are:
Inside tag attributes
This is the tidiest way of writing the code as you get "nice" shortcut referencing of the server-side components like:
Which shows using the "#" shortcut to resolve client-side control names. This doesn't actually do anything client-side, but instead is processed by Coolite as part of the controls rendering and converted into fully qualified names. It also makes for code that's quite difficult to work on as you get no Intellisense/Syntax highlighting, etc, inside the attribute.
<%=ServerControl.ClientID=> jiggery-pokery
The other option is to have a block of code inside your javascript that says something like:
The code snippet above seems to generally upset the crap out of the Javascript parsing engine in Visual Studio 2k8 and means you get an irritating yellow warning in the Error List. Changing it to be the following code (yes, eval bad, etc,..) removes the warning:
Something similar to "document.getElementById" or ASP.net AJAX's $get/$find pair but for Coolite. It may already be in the Coolite code, but if not, it's going to get written (if at all possible) by me very soon. So, I'll be able to write:
What I want to be able to do is write arbitrary client side javascript (event handlers and suchlike) inside a script block rather than inside an attribute of the server-side tag. The different ways I've discovered are:
Inside tag attributes
This is the tidiest way of writing the code as you get "nice" shortcut referencing of the server-side components like:
<ext:GridPanel Title="My Grid of Items" ID="myGrid" runat="server" StoreID="itemStore" > <ColumnModel> <Columns> <ext:Column Header="Id" DataIndex="ItemId"/> <ext:Column Header="Name" DataIndex="ItemName"> </ext:Column> </Columns> </ColumnModel> <SelectionModel> <ext:RowSelectionModel runat="server" SingleSelect="true"> <Listeners> <RowSelect Handler=
"#{modifyItemButton}.enable();
#{deleteItemButton}.enable();" /> <RowDeselect Handler=
"if (!#{myGrid}.hasSelection())
{
#{modifyItemButton}.disable();
#{deleteItemButton}.disable();
}" /> <Show Handler=
"if (!#{myGrid}.hasSelection())
{
#{modifyItemButton}.disable();
#{deleteItemButton}.disable();
}" /> <SelectionChange Handler=
"if (!#{myGrid}.hasSelection())
{
#{modifyItemButton}.disable();
#{deleteItemButton}.disable();
}" /> </Listeners> </ext:RowSelectionModel> </SelectionModel> <Buttons> <ext:Button Text="Refresh" runat="server" ID="refreshGridButton"> <Listeners> <Click Fn="refreshGridButton_Click" /> </Listeners> </ext:Button> <ext:Button Text="New" runat="server" ID="createItemButton"> <Listeners> <Click Fn="createItemButton_Click" /> </Listeners> </ext:Button> <ext:Button Text="Delete" runat="server" ID="deleteItemButton" Disabled="true"> <Listeners> <Click Fn="deleteItemButton_Click" /> </Listeners> </ext:Button> <ext:Button Text="Modify" runat="server" ID="modifyItemButton" Disabled="true"> <Listeners> <Click Fn="modifyItemButton_Click" /> </Listeners> </ext:Button> </Buttons> </ext:GridPanel>
Which shows using the "#" shortcut to resolve client-side control names. This doesn't actually do anything client-side, but instead is processed by Coolite as part of the controls rendering and converted into fully qualified names. It also makes for code that's quite difficult to work on as you get no Intellisense/Syntax highlighting, etc, inside the attribute.
<%=ServerControl.ClientID=> jiggery-pokery
The other option is to have a block of code inside your javascript that says something like:
function getMyGrid() { return <%=myGrid.ClientID%>; }which causes the ASP.net rendering engine to emit the relevant reference. This, rather than using "document.getElementById" works for Coolite created ExtJs components as they're javascript objects that render markup, rather than markup elements with associated javascript. Or at least, that's how it appears from my perspective (Your viewpoint may vary).
The code snippet above seems to generally upset the crap out of the Javascript parsing engine in Visual Studio 2k8 and means you get an irritating yellow warning in the Error List. Changing it to be the following code (yes, eval bad, etc,..) removes the warning:
function getMyGrid() { return eval('<%=myGrid.ClientID%>'); }What I want
Something similar to "document.getElementById" or ASP.net AJAX's $get/$find pair but for Coolite. It may already be in the Coolite code, but if not, it's going to get written (if at all possible) by me very soon. So, I'll be able to write:
var myGrid = Coolite.getComponent('myGrid');Without having to worry about the fact that 'myGrid' is stuck in several ASP.net naming containers and is thus actually called ctl00_mainArea_subArea_ctl02_myGrid, or something equally obscure.
if (myGrid.hasSelection())
{
// Do something here
}

I know this blog post is pretty old, but try setting IDMode=Static on your grid.
I'm already using that, and have been for a while. I have a feeling it was introduced sometime between now and the time that I wrote that entry (over a year ago, eep!) :)