3、Ext.NET 1.7 官方示例笔记-表单
表单【Form】,就是向客户收集资料的窗口,用户在表单填写好各种信息,然后提交到服务器,服务器接收并保存到数据库里。
表单的字段类型很多,我们从最简单的开始吧。
1.1 、先开始组合框吧(ComboBox),组合框一般用在有限的选项的情况下,二是节省页面显示区域空间。
先来看下简单的字符串选择吧
1.2、内部选项,(所谓的写死),对于比较固定的选项,写死更方便
<ext:ComboBox
runat="server"
Editable="false"
EmptyText="Select a state...">
<Items>
<ext:ListItem Text="Alabama" Value="AL" />
<ext:ListItem Text="Alaska" Value="AK" />
</Items>
</ext:ComboBox>
Editable="false" 为不可编辑,只能选择这2项
1.3 、选项来自动态数据
<ext:ComboBox ID="ComboBox1" runat="server" StoreID="Store1" //指定数据源对象 Editable="false" DisplayField="state" //显示的字段 ValueField="abbr" //值字段 TypeAhead="true" Mode="Local" ForceSelection="true" EmptyText="Select a state..." Resizable="true" SelectOnFocus="true" />
//后端把数据绑定到ext:Store 后,前端就可以访问了
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="abbr" />
<ext:RecordField Name="state" />
<ext:RecordField Name="nick" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
//服务器数据
<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" }, new object[] { "AR", "Arkansas", "The Natural State" }, new object[] { "CA", "California", "The Golden State" }, new object[] { "CO", "Colorado", "The Mountain State" }, new object[] { "CT", "Connecticut", "The Constitution State" }, new object[] { "DE", "Delaware", "The First State" }, new object[] { "DC", "District of Columbia", "The Nation's Capital" }, new object[] { "FL", "Florida", "The Sunshine State" }, new object[] { "GA", "Georgia", "The Peach State" }, new object[] { "HI", "Hawaii", "The Aloha State" }, new object[] { "ID", "Idaho", "Famous Potatoes" }, new object[] { "IL", "Illinois", "The Prairie State" }, new object[] { "IN", "Indiana", "The Hospitality State" }, new object[] { "IA", "Iowa", "The Corn State" }, new object[] { "KS", "Kansas", "The Sunflower State" }, new object[] { "KY", "Kentucky", "The Bluegrass State" }, new object[] { "LA", "Louisiana", "The Bayou State" }, new object[] { "ME", "Maine", "The Pine Tree State" }, new object[] { "MD", "Maryland", "Chesapeake State" }, new object[] { "MA", "Massachusetts", "The Spirit of America" }, new object[] { "MI", "Michigan", "Great Lakes State" }, new object[] { "MN", "Minnesota", "North Star State" }, new object[] { "MS", "Mississippi", "Magnolia State" }, new object[] { "MO", "Missouri", "Show Me State" }, new object[] { "MT", "Montana", "Big Sky Country" }, new object[] { "NE", "Nebraska", "Beef State" }, new object[] { "NV", "Nevada", "Silver State" }, new object[] { "NH", "New Hampshire", "Granite State" }, new object[] { "NJ", "New Jersey", "Garden State" }, new object[] { "NM", "New Mexico", "Land of Enchantment" }, new object[] { "NY", "New York", "Empire State" }, new object[] { "NC", "North Carolina", "First in Freedom" }, new object[] { "ND", "North Dakota", "Peace Garden State" }, new object[] { "OH", "Ohio", "The Heart of it All" }, new object[] { "OK", "Oklahoma", "Oklahoma is OK" }, new object[] { "OR", "Oregon", "Pacific Wonderland" }, new object[] { "PA", "Pennsylvania", "Keystone State" }, new object[] { "RI", "Rhode Island", "Ocean State" }, new object[] { "SC", "South Carolina", "Nothing Could be Finer" }, new object[] { "SD", "South Dakota", "Great Faces, Great Places" }, new object[] { "TN", "Tennessee", "Volunteer State" }, new object[] { "TX", "Texas", "Lone Star State" }, new object[] { "UT", "Utah", "Salt Lake State" }, new object[] { "VT", "Vermont", "Green Mountain State" }, new object[] { "VA", "Virginia", "Mother of States" }, new object[] { "WA", "Washington", "Green Tree State" }, 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(); } </script>
1.4、可编辑的组合框,如果下拉选项不足以满足需求,且需要用户自己输入自己的选项,可以开启可编辑选项,在输入的同时,还可即时过滤下拉项。
<ext:ComboBox runat="server" StoreID="Store1" //指定数据源 Editable="true" //开启可编辑选项 DisplayField="state" //显示字段 ValueField="abbr" //值字段 TypeAhead="true" //输入前缀检索 Mode="Local" ForceSelection="true" TriggerAction="All" EmptyText="Select a state..." SelectOnFocus="true"> <SelectedItem Value="ID" /> </ext:ComboBox>
1.1.1 SelectBox 选择框
一个类似于HTML SELECT inpute的组件。支持单击并拖动列表,并在释放鼠标按钮时进行项目选择。
上面讲过了
1.1.2 MultiCombo 多选组合框,就是可以多选
<ext:MultiCombo ID="Multi1" runat="server" Width="260"> <Items> <ext:ListItem Text="Item 1" Value="1" /> <ext:ListItem Text="Item 2" Value="2" /> <ext:ListItem Text="Item 3" Value="3" /> <ext:ListItem Text="Item 4" Value="4" /> <ext:ListItem Text="Item 5" Value="5" /> </Items> <SelectedItems>//初始值,已选项 <ext:SelectedListItem Value="2" /> //可以使用值 <ext:SelectedListItem Index="4" /> //也可以使用索引器 </SelectedItems> </ext:MultiCombo>
1.1.3 日期字段 - 区间,一个日期段选择
此示例演示了两个日期字段作为日期范围。选择初始日期将设置结束字段的最小值。选择结束日期可设置起始字段的最大值。
如果在'DateField1字段'中指定/选择了值,则'DateField2字段'不允许指定/选择'DateField1'条目之前的任何日期,反之亦然。
//客户端脚本
<script type="text/javascript"> var onKeyUp = function (field) { var v = this.processValue(this.getRawValue()), field; if (this.startDateField) { field = Ext.getCmp(this.startDateField); field.setMaxValue(); this.dateRangeMax = null; } else if (this.endDateField) { field = Ext.getCmp(this.endDateField); field.setMinValue(); this.dateRangeMin = null; } field.validate(); }; </script>
//aspx页面
<ext:Window runat="server" Width="350" Title="DateRange" Icon="Date" AutoHeight="true" Closable="false" Padding="5" Layout="Form"> <Items> <ext:DateField ID="DateField1" runat="server" Vtype="daterange" FieldLabel="To" AnchorHorizontal="100%" EnableKeyEvents="true"> <CustomConfig> <ext:ConfigItem Name="endDateField" Value="#{DateField2}" Mode="Value" /> </CustomConfig> <Listeners> <KeyUp Fn="onKeyUp" /> </Listeners> </ext:DateField> <%-- // Alternative syntax using custom config property attributes. 使用自定义配置属性属性的替代语法
<ext:DateField ID="DateField1" runat="server" FieldLabel="To" Vtype="daterange" AnchorHorizontal="100%" EnableKeyEvents="true" EndDateField="DateField2"> <Listeners> <KeyUp Fn="onKeyUp" /> </Listeners> </ext:DateField> --%> <ext:DateField ID="DateField2" runat="server" Vtype="daterange" FieldLabel="From" AnchorHorizontal="100%" EnableKeyEvents="true"> <CustomConfig> <ext:ConfigItem Name="startDateField" Value="#{DateField1}" Mode="Value" /> </CustomConfig> <Listeners> <KeyUp Fn="onKeyUp" /> </Listeners> </ext:DateField> <%-- // Alternative syntax using custom config property attributes. <ext:DateField ID="DateField2" runat="server" Vtype="daterange" FieldLabel="From" AnchorHorizontal="100%" EnableKeyEvents="true" StartDateField="DateField1"> <Listeners> <KeyUp Fn="onKeyUp" /> </Listeners> </ext:DateField>--%> </Items> </ext:Window>
1.1.4 TriggerButtons 触发按钮,当选择了项后触发
<ext:ComboBox runat="server" MinChars="1">
<Items>
<ext:ListItem Text="1" />
<ext:ListItem Text="2" />
<ext:ListItem Text="3" />
<ext:ListItem Text="4" />
<ext:ListItem Text="5" />
</Items>
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true" /> //选择了项后添加清除按钮
</Triggers>
<Listeners>
<Select Handler="this.triggers[0].show();" />
<BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
<TriggerClick Handler="if (index == 0) { this.clearValue(); this.triggers[0].hide(); }" />
</Listeners>
</ext:ComboBox>
1.1.5 Items Actions 项操作,一些关于项操作的方法
<%@ Page Language="C#" %> <%@ Import Namespace="System.Collections.Generic" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!X.IsAjaxRequest)//如果不是ajax请求,意思为第一次页面加载的时候执行! { List<object> list = new List<object> //初始化一个列表,一般从数据库获取 { new {Text = "Text3", Value = 3}, new {Text = "Text4", Value = 4}, new {Text = "Text5", Value = 5} }; this.Store1.DataSource = list; //把数据给 Store1 控件 ,并绑定 this.Store1.DataBind(); //请注意,内部项会在store的上面 this.ComboBox1.Items.Insert(0, new Ext.Net.ListItem("None", "-"));//在code-behind用代码直接在combobox插入一项 this.ComboBox1.SelectedItem.Value = "-";//初始化选择项 } }
//前端js可以直接调用code-behind方法插入一些值到combobox protected void InsertRecord(object sender, DirectEventArgs e) { Dictionary<string, object> values = new Dictionary<string, object>(2); values.Add("Text", "Text0"); values.Add("Value", "0"); this.ComboBox1.InsertRecord(1, values); this.ComboBox1.SelectedItem.Value = "0"; } protected void InsertRecord2(object sender, DirectEventArgs e) { this.ComboBox2.InsertItem(0, "Text0", "0"); this.ComboBox2.SelectedItem.Value = "0"; } </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>Items Actions - Ext.NET Examples</title> <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" /> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <ext:Store runat="server" ID="Store1"> <Reader> <ext:JsonReader IDProperty="Value"> <Fields> <ext:RecordField Name="Text" /> <ext:RecordField Name="Value" /> </Fields> </ext:JsonReader> </Reader> </ext:Store> <p>1. Combo with a store and inner items (merge mode)</p> <br /> <ext:ComboBox ID="ComboBox1" runat="server" StoreID="Store1" DisplayField="Text" ValueField="Value" Mode="Local"> <Items> <ext:ListItem Text="Text2" Value="2" /> </Items> <Triggers> <ext:FieldTrigger Icon="Clear" Qtip="Remove selected" />//触发器 </Triggers> <Listeners> <TriggerClick Handler="this.removeByValue(this.getValue());this.clearValue();" />
//监@听#器,监/听/触发器的动作,第一个方法,是获取值,然后把他从列表移除,第二个清除已经选的项 </Listeners> </ext:ComboBox> <br /> <ext:Panel ID="Panel1" runat="server" Border="false"> <Items> <ext:TableLayout ID="TableLayout1" runat="server" Columns="2">//用来布局的 <Cells> <ext:Cell> <ext:Button ID="Button1" runat="server" Text="从客户端插入项"> <Listeners> <Click Handler="#{ComboBox1}.insertRecord(1, {Text:'Text1', Value:1});#{ComboBox1}.setValue(1);" />
<%-- --%> </Listeners> </ext:Button> </ext:Cell> <ext:Cell> <ext:Button ID="Button2" runat="server" Text="从服务端插入项"> <DirectEvents> <Click OnEvent="InsertRecord" /> //InsertRecore 方法在上面的 script=server </DirectEvents> </ext:Button> </ext:Cell> </Cells> </ext:TableLayout> </Items> </ext:Panel> <br /> <br /> <p>2. Combo with inner items</p> <br /> <%-- 请注意,插入项方法也能工作在内选项里 the insertRecord function works with inner items also --%> <ext:ComboBox ID="ComboBox2" runat="server"> <Items> <ext:ListItem Text="Text2" Value="2" /> <ext:ListItem Text="Text3" Value="3" /> <ext:ListItem Text="Text4" Value="4" /> <ext:ListItem Text="Text5" Value="5" /> </Items> <Triggers> <ext:FieldTrigger Icon="Clear" Qtip="Remove selected" /> </Triggers> <Listeners> <TriggerClick Handler="this.removeByValue(this.getValue());this.clearValue();" /> </Listeners> </ext:ComboBox> <br /> <ext:Panel ID="Panel2" runat="server" Border="false"> <Items> <ext:TableLayout ID="TableLayout2" runat="server" Columns="2"> <Cells> <ext:Cell> <ext:Button ID="Button3" runat="server" Text="Insert: client side"> <Listeners> <Click Handler="#{ComboBox2}.insertItem(0, 'Text1', 1);#{ComboBox2}.setValue(1);" /> </Listeners> </ext:Button> </ext:Cell> <ext:Cell> <ext:Button ID="Button4" runat="server" Text="Insert: server side"> <DirectEvents> <Click OnEvent="InsertRecord2" /> </DirectEvents> </ext:Button> </ext:Cell> </Cells> </ext:TableLayout> </Items> </ext:Panel> <br /> <h3>其他一些方法</h3> <ul> <li>addRecord: function (values)</li> <li>addItem: function (text, value)</li> <li>insertRecord: function (rowIndex, values)</li> <li>insertItem: function (rowIndex, text, value)</li> <li>removeByField: function (field, value)</li> <li>removeByIndex: function (index)</li> <li>removeByValue: function (value)</li> <li>removeByText: function (text)</li> </ul> </form> </body> </html>
1.3 DropDownField 下拉字段域
好多。。。 待续。。