Ext.Net 1.2.0_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 功能。

脚本方式

<script type="text/javascript">
    Ext.onReady(function() {

        Ext.QuickTips.init();

        var ds = new Ext.data.Store({
            proxy: new Ext.data.ScriptTagProxy({
                url: 'http://extjs.com/forum/topics-remote.php'
            }),
            reader: new Ext.data.JsonReader({
                root: 'topics',
                totalProperty: 'totalCount',
                id: 'post_id'
            },
            [{ name: 'title', mapping: 'topic_title' },
            { name: 'topicId', mapping: 'topic_id' },
            { name: 'author', mapping: 'author' },
            { name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp' },
            { name: 'excerpt', mapping: 'post_text'}]
        )
        });


        var search = new Ext.form.ComboBox({
            store: ds,
            fieldLabel: 'AutoComplete',
            displayField: 'title',
            typeAhead: true,
            loadingText: '查找...',
            pageSize: 10,
            renderTo: Ext.getBody(),
             400
        });
    });
</script>

标记方式

<ext:ComboBox ID="ComboBox2" runat="server" LoadingText="查找..." TypeAhead="true"
    FieldLabel="AutoComplete" PageSize="10" Width="400" DisplayField="title">
    <Store>
        <ext:Store ID="Store2" runat="server">
            <Proxy>
                <ext:ScriptTagProxy Url="http://extjs.com/forum/topics-remote.php">
                </ext:ScriptTagProxy>
            </Proxy>
            <Reader>
                <ext:JsonReader Root="topics" TotalProperty="totalCount" IDProperty="post_id">
                    <Fields>
                        <ext:RecordField Name="title" Mapping="topic_title">
                        </ext:RecordField>
                        <ext:RecordField Name="topicId" Mapping="topic_id">
                        </ext:RecordField>
                        <ext:RecordField Name="author" Mapping="author">
                        </ext:RecordField>
                        <ext:RecordField Name="lastPost" Mapping="post_time" Type="Date" DateFormat="timestamp">
                        </ext:RecordField>
                        <ext:RecordField Name="excerpt" Mapping="post_text">
                        </ext:RecordField>
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
    </Store>
</ext:ComboBox>

说明

• Ext JS 的 Ext.data.ScriptTagProxy 类，或 Ext.Net 的 Ext.Net.ScriptTagProxy 都是通过 URL 获得数据，从另一个域，而不是源域。也就是说，如果从另一个域的页面获得数据，必须使用 ScriptTagProxy，而不能用 HttpProxy。
• 另外，既然 ScriptTagProxy 是用在另一个域，那自然存在“字段”映射的问题，如下所示的 mapping 属性。如将 topic_id，映射到自己的 topicid。

[{ name: 'title', mapping: 'topic_title' },
              { name: 'topicId', mapping: 'topic_id' },
              { name: 'author', mapping: 'author' },
              { name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp' },
              { name: 'excerpt', mapping: 'post_text'}]

或

<ext:JsonReader Root="topics" TotalProperty="totalCount" IDProperty="post_id">
    <Fields>
        <ext:RecordField Name="title" Mapping="topic_title">
        </ext:RecordField>
        <ext:RecordField Name="topicId" Mapping="topic_id">
        </ext:RecordField>
        <ext:RecordField Name="author" Mapping="author">
        </ext:RecordField>
        <ext:RecordField Name="lastPost" Mapping="post_time" Type="Date" DateFormat="timestamp">
        </ext:RecordField>
        <ext:RecordField Name="excerpt" Mapping="post_text">
        </ext:RecordField>
    </Fields>
</ext:JsonReader>

• 但是以上只是解决获得数据和数据映射问题，若想实现 AutoComplete 功能，必须设置 TypeAhead="true"，这样，当用户每次按下键盘时，或从另一个域检索并获得相应的数据，呈现给用户。
• 补充，若你在浏览器输入 http://extjs.com/forum/topics-remote.php，那么会在浏览器看到如下 JSON 字符串：

注意：该 JSON 字符串的结构，以及 totalCount 和 topics 属性。

• 整个字符串是一个类，{"totalCount ":"6679","topics":[…]}，其中 totalCount 和 topics 是该类的属性。
• 而 topics 是类的数组。即 [{},{},{}…]

 

下载 Demo