Its been a good time since I have blogged anything directly related to Ext.Net (I have written ExtJs blog posts in the interim, but nothing that relates primarily to Ext.Net). I finally got an opportunity today to break my silence on Ext.Net.

A close acquaintance (who is ages ahead of me in terms of IT expertise and experience) recently started using Ext.Net for some project (in fact my guess is today was his first day). And I got a series of calls from him for some help on things he was getting stuck with as he was diving into Ext.Net. It then appeared to me that the sequence of calls can actually be penned down in a blog post for other beginners too, so here are the questions and their replies.

1. Q: How to show data from database in <ext:ComboBox>?
   A: The simplest way to start is to bind an IDataReader to ComboBox’s Store. This example should help:
   http://examples.ext.net/#/GridPanel/System.Data/DataReader/

   When you get the hang of things, you would realize you can bind almost any collection (List, DataTable etc.) to a Store. As Ext.Net/ExtJs is MVC based, data is bound to a store and UI controls pick their data from underlying stores.

   ---

2. Q: The referenced example is using X.IsAjaxRequest property, where do I find the X class?
   A: Ext.Net namespace, either import it at top of file, or use Ext.Net.X.IsAjaxRequest.
   

   ---

3. Q: After binding a ComboBox store to data, I initially want a particular value to be selected when Page renders. I tried a couple of things (Select method in ComboBox etc) but did not work out.
   A:  Use ComboBox’s SetValue method, passing in the value (not the display text) that should be selected.
   

   ---

4. Q: I tried disabling a control with Enabled=”False” in markup/code-behind, but did not work.
   A: Becuase of the way ASP.NET natively handles Enabled/Visible property on all controls, it is advisable to NEVER use them with Ext.Net controls. Use Disabled/Hidden properties instead.
   

   ---

5. Q: I am trying to handle the Change DirectEvent server-side on ComboBox, but how do I know the method signature for the event.
   A: Visual Studio’s Object Browser is your friend. Open Object Browser, and then open Ext.Net assembly and goto Ext.Net namespace. You would find a ComboBoxDirectEvents class (in fact you would find a DirectEvents class for all UI controls that have atleast one DirectEvent available). Goto that class and select “Change” from the right-hand list member list. Click Ext.Net.ComponentDirectevent link in Member detail panel, then goto Event event in member list. Finally clicking the Ext.Net.ComponentDirectEvent.DirectEventHandler in member detail panel will show you the signature for the event in member detail panel itself.
   An alternative approach is to use Source Code Editor Context Menu’s Go To Definiton option to browse this same sequence.
   Additonally its often very helpful to keep Ext.Net’s Visual Studio’s xml documentation file in your project’s bin folder during development for intellisense tips.
   

   ---

6. Additional Tip: Prefer ComboBox’s Select DirectEvent over Change DirectEvent. Change would fire after ComboBox loses focus, but in most cases, you want to respond to actual selection change without waiting for the component to loose focus. Select is the DirectEvent you need to use then.
   

   ---

7. Q: Okay I was able to find definition for Select DirectEvent and added my Event listener. But I find nothing in Ext.Net.DirectEventArgs. I was expecting the ComboBox’s selected value in that object.
   A: Use ComboBox’s SelectedItem, SelectedIndex, Value etc. properties.
   

   ---

8. Q: What is contained in the Ext.Net.DirectEventArgs object then.
   A: It is normally used when passing additional information from client, e.g. start/limit parameters in a Grid paging operation. You can also pass additional custom values from client through that object.
   

   ---

9. Q: Are DirectEvents invoked via Ajax?
   A: Yes, DirectEvents use XmlHttpRequest and are hence Ajax Requests.
   

   ---

10. Q: What’s is MultiSelect component for?
    A: Its your classic ListBox for enablng multiple selections from a list.
    

    ---

11. Q: Let’s say I have First Name/Last Name search options. I want to enable user search and display results. How should I organize the layout.
    A: While there’s a no one size fits all strategy, the usual way of doing it is to use a BorderLayout with a panel in north region containing the search options and a GridPanel in center region for the results.
    Add an Ext button for search, and in its Click DirectEvent, perform the search and bind GridPanel’s store.
    

    ---

12. Q: I was rather thinking of using MultiSelect instead of GridPanel for results.
    A: I asked him whether his results had one or multiple columns. He said there were 2 columns (First and Last names), but he wanted to show them comma-separated in a single column.
    My reply was use MultiSelect then, and either add a DisplayName property to your objects and bind list to use this property or use a XTemplate to configure MultiSelect display. For beginners, adding a DisplayName property to their objects would be the easier solution (it takes time to understand ExtJs’ XTemplates).
    

    ---

13. Q: Okay what if I use GridPanel for results, how would I user select multiple rows in a GridPanel?
    A: Specify a RowSelectionModel for GridPanel and set its SingleSelect property value to false (default is true). This example should help:
    http://examples.ext.net/#/GridPanel/Selection_Models/Row_Selection/
    

    ---

14. Q: Okay things are getting there now. I want First/Last name search textboxes to appear in a single row. I am using AnchorLayout.
    A: Use CompositeField, search Examples explorer.
    

    ---

15. Q: There’s no CompositeField in Exmaples Explorer.
    A: Oops, he was on Ext.Net 2.0. So please use FieldContainer instead:
    http://examples.ext.net/#/Form/FieldContainer/Overview/
    

    ---

16. Q: I want to perform an action when a GridPanel row is selected.
    A: Use Row Selection Listeners/DirectEvents on GridPanel or RowSelectionModel. For custom actions, use CommandColumn:
    http://examples.ext.net/#/GridPanel/Commands/Row_Command/ 

A common theme in all the questions and answers was persistent pointing towards the wonderful Examples Explorer for Ext.Net. Although it does not answer everything, it shows how to start (in fact, much more than that).

Please feel free to ask more questions below, and I will try to add them to the FAQ here. But please take care to keep questions at the Beginner’s level, I do not want this blog post to mutate to a forum in itself. If I do not find a question to be Beginner level, I might delete the comment without answering it. A simple rule of thumb would be anything that requires a code-example OR beyond 2-5 lines of explanation would not be considered for answering in this blog post.