Ext.Net 1.x_Ext.Net.Combox AutoComplete 功能

本文内容
  • 概述
  • 演示 Ext.Net.Combox AutoComplete 功能
  • 说明

概述

最近用 Ext.Net 开发软件,研究了一下它的 AutoComplete 功能。虽然暂时用不到,但是一个 Web 应用程序几个经典的功能点,早晚都会用到……一般我们用一个 Ajax 框架,都会先研究它的前后台交互方式,将几个经典功能封装……等等,了解它的设计思想。

本来想模仿 jQuery 的 AutoComplete 功能,利用 Ext.Net 实现一个,但是后来在一个外国网站,看到它 Ext.Net.Combox 自带这个功能。

演示 Ext.Net.Combox AutoComplete 功能

下面演示如何用 Ext.Net.Combox 实现 AutoComplete 功能

<ext:ComboBox ID="cbxcoustom" runat="server" EmptyText="请选择客户" TypeAhead="true"
                            ForceSelection="true" StoreID="StoreCustom" DisplayField="CustomName" ValueField="CustomCode"
                            MinChars="1" ListWidth="280" PageSize="10" ItemSelector="tr.list-item" FieldLabel="客户编码"
                            LabelStyle="text-align:right">
                            <Template ID="Template1" runat="server">
                                <Html>
                                    <tpl for=".">
						                <tpl if="[xindex] == 1">
							                <table class="cbStates-list">
								                <tr>
									                <th>客户编码</th>
									                <th>客户名称</th>
								                </tr>
						                </tpl>
						                <tr class="list-item">
							                <td style="padding:3px 0px;">{CustomCode}</td>
							                <td>{CustomName}</td>
						                </tr>
						                <tpl if="[xcount-xindex]==0">
							                </table>
						                </tpl>
					                </tpl>
                                </Html>
                            </Template>
                            <Triggers>
                                <ext:FieldTrigger Icon="Clear" HideTrigger="true" />
                            </Triggers>
                            <Listeners>
                                <BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                <TriggerClick Handler="if (index == 0) { el.focus().clearValue(); trigger.hide();}" />
                                <Select Handler="function(el){el.triggers[0].show();}" />
                            </Listeners>
                        </ext:ComboBox>
后台:
<%@ WebHandler Language="C#" Class="CustomHandler" %>

using System;
using System.Web;
using System.Collections.Generic;
using Ext.Net;
using System.Data;
using DzOpenPlat.DAL;
public class CustomHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        if (!string.IsNullOrEmpty(context.Request["query"]))
        {
            string query = context.Request["query"];
            context.Response.ContentType = "text/json";
            DataTable table = ExtCustomerDAL.CustomerList(query, "ZE"); 
            List<CustomInfo> lst = new List<CustomInfo>();
            foreach (DataRow row in table.Rows)
            {
                CustomInfo custom = new CustomInfo();
                custom.CustomName = Convert.ToString(row["MA002"]);
                custom.CustomCode = Convert.ToString(row["MA001"]);
                lst.Add(custom);
            }

            string json = Ext.Net.JSON.Serialize(lst);

            context.Response.Write(json);
        }
        else
        {
            context.Response.ContentType = "text/json";
            DataTable table = ExtCustomerDAL.CustomerList("ZE");   
            List<CustomInfo> lst = new List<CustomInfo>();
            foreach (DataRow row in table.Rows)
            {
                CustomInfo custom = new CustomInfo();
                custom.CustomName = Convert.ToString(row["MA002"]);
                custom.CustomCode = Convert.ToString(row["MA001"]);
                lst.Add(custom);
            }
            string json = Ext.Net.JSON.Serialize(lst);
            context.Response.Write(json);
        }
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}
public class CustomInfo
{
    private string _CustomName;
    public string CustomName
    {
        get { return _CustomName; }
        set { _CustomName = value; }
    }
    private string _CustomCode;
    public string CustomCode
    {
        get { return _CustomCode; }
        set { _CustomCode = value; }
    }
}
效果

Ext.Net 1.x_Ext.Net.Combox AutoComplete 功能_第1张图片

你可能感兴趣的:(Ext.Net 1.x_Ext.Net.Combox AutoComplete 功能)