Ext.net 2.1 Multicolumn ComboBox from Codebehind

Question

How to create a simple two column combobox as shown at http://examples.ext.net/#/Form/ComboBox/Two_Columns/ from the code behind?

When creating exactly the same control by translating the markup to codebehind, few null reference errors occur on:

cbStates.ListConfig.....
cbStates.ListConfig.Tpl...

Code:

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Store1.DataSource = new object[]
        {
            new object[] { "AL", "Alabama", "The Heart of Dixie"},
            new object[] { "AK", "Alaska", "The Land of the Midnight Sun"},
            new object[] { "AZ", "Arizona", "The Grand Canyon State"},
            // 44 other states
            new object[] { "WV", "West Virginia", "Mountain State"},
            new object[] { "WI", "Wisconsin", "America's Dairyland"},
            new object[] { "WY", "Wyoming", "Like No Place on Earth"} 
        };

        this.Store1.DataBind();
        CreateCombo();
    }

    private void CreateCombo()
    {
        Ext.Net.ComboBox cbStates = new Ext.Net.ComboBox();
        cbStates.EmptyText = "Select State";
        cbStates.TypeAhead = true;
        cbStates.ForceSelection = true;
        cbStates.DisplayField = "state";
        cbStates.ValueField = "abbr";
        cbStates.MinChars = 1;
        cbStates.MatchFieldWidth = false;
        cbStates.PageSize = 10;
        cbStates.StoreID = "Store1";

        cbStates.ListConfig.Width = 320;
        cbStates.ListConfig.Height = 300;
        cbStates.ListConfig.ItemSelector = ".x-boundlist-item";
        cbStates.ListConfig.Tpl.Html = "<tpl for=\".\">"
                            + "<tpl if=\"[xindex] == 1\">"
                            + "<table class=\"cbStates-list\">"
                            + "<tr>"
                            + "<th>State</th>"
                            + "<th>Nick</th>"
                            + "</tr>"
                            + "</tpl>"
                            + "<tr class=\"x-boundlist-item\">"
                            + "<td>{state}</td>"
                            + "<td>{nick}</td>"
                            + "</tr>"
                            + "<tpl if=\"[xcount-xindex]==0\">"
                            + "</table>"
                            + "</tpl>"
                            + "</tpl>";

        Ext.Net.FieldTrigger trigger1 = new FieldTrigger();
        trigger1.Icon = TriggerIcon.Clear;
        trigger1.HideTrigger = true;

        cbStates.Triggers.Add(trigger1);

        cbStates.Listeners.BeforeQuery.Handler = "this.getTrigger(0)[this.getRawValue().toString().length == 0 ? 'hide' : 'show']();";
        cbStates.Listeners.TriggerClick.Handler = "if (index == 0) {this.focus().clearValue(); trigger.hide();}";
        cbStates.Listeners.Select.Handler = "this.getTrigger(0).show();";

        form1.Controls.Add(cbStates);
    }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Store ID="Store1" runat="server" IsPagingStore="true" PageSize="10">
        <Model>
            <ext:Model ID="Model1" runat="server">
                <Fields>
                    <ext:ModelField Name="abbr" />
                    <ext:ModelField Name="state" />
                    <ext:ModelField Name="nick" />
                </Fields>
            </ext:Model>
        </Model>
    </ext:Store>
    </form>
</body>
</html>

score 0 · Accepted Answer · answered Jan 13 '13 at 12:50

Do this way:

Ext.Net.ComboBox cbStates = new Ext.Net.ComboBox();
cbStates.EmptyText = "Select State";
cbStates.TypeAhead = true;
cbStates.ForceSelection = true;
cbStates.DisplayField = "state";
cbStates.ValueField = "abbr";
cbStates.MinChars = 1;
cbStates.MatchFieldWidth = false;
cbStates.PageSize = 10;
cbStates.StoreID = "Store1";

BoundList listConfig = new BoundList();
listConfig.Width = 320;
listConfig.Height = 300;
listConfig.ID = "lc";
listConfig.ItemSelector = ".x-boundlist-item";
XTemplate tpl = new XTemplate();

tpl.Html = "<tpl for=\".\">"
                    + "<tpl if=\"[xindex] == 1\">"
                    + "<table class=\"cbStates-list\">"
                    + "<tr>"
                    + "<th>State</th>"
                    + "<th>Nick</th>"
                    + "</tr>"
                    + "</tpl>"
                    + "<tr class=\"x-boundlist-item\">"
                    + "<td>{state}</td>"
                    + "<td>{nick}</td>"
                    + "</tr>"
                    + "<tpl if=\"[xcount-xindex]==0\">"
                    + "</table>"
                    + "</tpl>"
                    + "</tpl>"; lc.Tpl = tpl;

cbStates.ListConfig = lc;


Ext.Net.FieldTrigger trigger1 = new FieldTrigger();
trigger1.Icon = TriggerIcon.Clear;
trigger1.HideTrigger = true;

cbStates.Triggers.Add(trigger1);

cbStates.Listeners.BeforeQuery.Handler = "this.getTrigger(0)[this.getRawValue().toString().length == 0 ? 'hide' : 'show']();";
cbStates.Listeners.TriggerClick.Handler = "if (index == 0) {this.focus().clearValue(); trigger.hide();}";
cbStates.Listeners.Select.Handler = "this.getTrigger(0).show();";

form1.Controls.Add(cbStates);

Ext.net 2.1 Multicolumn ComboBox from Codebehind

1 Answers1