Resolving Coolite objects in client script

| | Comments (2)
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:

  <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');
if (myGrid.hasSelection())
{
// Do something here
}
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.

2 Comments

Rahul Singla said:

I know this blog post is pretty old, but try setting IDMode=Static on your grid.

Robert Wray said:

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!) :)

About this Entry

This page contains a single entry by Robert Wray published on January 4, 2009 10:36 AM.

extJs: Combobox drop-down is half width was the previous entry in this blog.

Error on rejectChanges() call on ExtJs store is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.

Powered by Movable Type 5.04