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  下拉字段域 

好多。。。 待续。。