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 下拉字段域
好多。。。 待续。。
3、Ext.NET 1.7 官方示例笔记-表单的更多相关文章
- 1、Ext.NET 1.7官方示例笔记-事件
官网参考地址:https://examples1.ext.net/#/Events/DirectEvents/Overview/ 先了解一下“事件” Ext.NET包括3种事件机制 DirectEve ...
- 4、Ext.NET 1.7 官方示例笔记 - 树
<%@ Page Language="C#" %> <%@ Import Namespace="System.Collections.Generic&q ...
- 2、Ext.NET 1.7 官方示例笔记-按钮
这一节应该比较简单,因为按钮相对其他控件还是比较简单的,但按钮是最常用的控件,先从简单的开始,才能循序渐进的学下去不是吗? 从上面的图片可以看出,可分基本&按钮组,先看下基本的Overview ...
- Django笔记 —— 表单（form）
最近在学习Django,打算玩玩网页后台方面的东西,因为一直很好奇但却没怎么接触过.Django对我来说是一个全新的内容,思路想来也是全新的,或许并不能写得很明白,所以大家就凑合着看吧- 本篇笔记(其 ...
- <玩转Django2.0>读书笔记:表单
1. 表单字段 参考: 官方文档 Django表单字段汇总 2. 表单代码示例(forms.Form) # form.py代码 # 获取数据库数据 choices_list = [(i+1,v['ty ...
- bootstrap学习笔记(表单)
1.基础表单 :对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset.legend.label标签进行了定制. fieldset { min-width: 0 ...
- Google单元测试框架gtest之官方sample笔记1--简单用例
1.0 通用部分 和常见的测试工具一样,gtest提供了单体测试常见的工具和组件.比如判断各种类型的值相等,大于,小于等,管理多个测试的测试组如testsuit下辖testcase,为了方便处理初始化 ...
- JavaScript高级程序设计学习笔记--表单脚本
提交表单 用户单击提交按钮或图像按钮时,就会提交表单.使用<input>和<button>都可以定义提交按钮,只要将其type特性的值设置为"submit" ...
- php学习笔记——表单
13.表单 1)GET vs. POST GET 和 POST 都创建数组(例如,array( key => value, key2 => value2, key3 => value ...
随机推荐
- SpringBoot（一）：构建第一个SpringBoot工程
1.项目格式如下: 1.启动类: package com.monkey01.springbootstart; import org.springframework.boot.SpringApplica ...
- JavaWeb之servlet（2）
servlet(2) ServletContext servlet的上下文 每个jvm的虚拟机中的每个web工程都只有一个ServletContext工程,即在一个web工程中,无论写了多少个Java ...
- OceanBase 架构初探
OceanBase 架构初探 原创衣舞晨风 发布于2018-11-13 08:44:14 阅读数 1417 收藏 展开 1.设计思路 OceanBase的目标是支持数百TB的数据量以及数十万TPS. ...
- express 将 Router 实例模块化
为了更好的组织代码,将 Router 实例进行模块化,将 get / post 等快捷方式放在Router上,而不是 App 上,然后将该 Router 作为中间件,use 到 server.js 上 ...
- 《大话处理器》Cache一致性协议之MESI【转】
转自:https://blog.csdn.net/muxiqingyang/article/details/6615199 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载 ...
- 5-3 可视化库Seaborn-变量分析绘图
In [1]: %matplotlib inline import numpy as np import pandas as pd from scipy import stats,integrate ...
- nignx环境搭建
国产化 环境可以支持,中标麒麟 龙芯 银河麒麟
- pdfium ppm demo
#include "fpdfview.h" #include <iostream> #include <string> #include <strin ...
- else if 使用注意
写出一个程序,接受一个有字母和数字以及空格组成的字符串,和一个字符,然后输出输入字符串中含有该字符的个数.不区分大小写. 例如:输入:ABCDE A 输出:1 错误代码如下: #include < ...
- C++ trais技术 模板特化的应用
// traits 的应用 /////////////////////////////////////////// // traits template <typename T> clas ...