三、Ext.NET 1.7 官方示例筆記-表單
表單【Form】，就是向客戶收集資料的窗口，用戶在表單填寫好各類信息，而後提交到服務器，服務器接收並保存到數據庫裏。javascript
表單的字段類型不少，咱們從最簡單的開始吧。css
1.1 、先開始組合框吧(ComboBox)，組合框通常用在有限的選項的狀況下，二是節省頁面顯示區域空間。html
先來看下簡單的字符串選擇吧前端
1.二、內部選項，(所謂的寫死)，對於比較固定的選項，寫死更方便java
<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 、選項來自動態數據ajax
<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.四、可編輯的組合框，若是下拉選項不足以知足需求，且須要用戶本身輸入本身的選項，能夠開啓可編輯選項，在輸入的同時，還可即時過濾下拉項。後端
<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 選擇框 api
一個相似於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 下拉字段域
好多。。。 待續。。
相關文章
- 1. 一、Ext.NET 1.7官方示例筆記-事件
- 2. 二、Ext.NET 1.7 官方示例筆記-按鈕
- 3. Cypress學習筆記5——官方示例
- 4. Android 官方示例：android-architecture 學習筆記(三)之todo-mvp-loaders
- 5. Kibana 官方示例
- 6. ThingJS官方示例教程（三）
- 7. 【Ext.Net學習筆記】02：Ext.Net用法概覽、Ext.Net MessageBus用法、Ext.Net佈局
- 8. [ActionScript 3.0] AS3 ServerSocket示例（官方示例）
- 9. [ActionScript 3.0] AS3 socket示例(官方示例)
- 10. STM32官方全部USB例程筆記
- 更多相關文章...
- • PHP 完整表單實例 - PHP教程
- • Thymeleaf+SpringMVC5示例 - Thymeleaf 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 一、Ext.NET 1.7官方示例筆記-事件
- 2. 二、Ext.NET 1.7 官方示例筆記-按鈕
- 3. Cypress學習筆記5——官方示例
- 4. Android 官方示例：android-architecture 學習筆記(三)之todo-mvp-loaders
- 5. Kibana 官方示例
- 6. ThingJS官方示例教程（三）
- 7. 【Ext.Net學習筆記】02：Ext.Net用法概覽、Ext.Net MessageBus用法、Ext.Net佈局
- 8. [ActionScript 3.0] AS3 ServerSocket示例（官方示例）
- 9. [ActionScript 3.0] AS3 socket示例(官方示例)
- 10. STM32官方全部USB例程筆記