如何从后面的代码创建一个简单的两列组合框,如http://examples.ext.net/#/Form/ComboBox/Two_Columns/所示?
通过将标记转换为代码隐藏来创建完全相同的控件时,很少会出现空引用错误:
cbStates.ListConfig.....
cbStates.ListConfig.Tpl...
代码:
<%@ 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>