1

我正在使用 ExtJs4。我的 Web 应用程序中有一个表单，其中有文本框。场景是在文本框中按下任何键时提供类似 AJAX 的搜索（如 Google）。搜索将查看 Web 服务并在 drop 中显示结果（JSON 对象）。类似于 Google 搜索。

这样做有什么想法、链接或教程吗？

谢谢

4

3 回答 3

1

试试这个例子：http ://docs.sencha.com/ext-js/4-0/#!/example/form/forum-search.html

于 2012-04-30T17:55:58.983 回答
1

您可以为此使用ComboBox 。有或没有触发器（看起来像一个TextBox）。

Sencha 提供了很好的例子：http ://docs.sencha.com/ext-js/4-0/#!/example/form/combos.html
http://docs.sencha.com/ext-js/4-0
/#!/example/form/forum-search.html

这是一个简单的例子：

{
        xtype: 'combo',
        id: 'myCombo',
        store: Ext.create('Ext.data.ArrayStore', {
                model: Ext.define('ComboModel', {
                        extend: 'Ext.data.Model',
                        fields: ['id','data1','data2']
                }),
                proxy: {
                        type: 'ajax',
                        url : 'data.json',
                        reader: {
                                type: 'array'
                        }
                }

        }),
        triggerAction: 'query',
        minChars: 2,
        fieldLabel: 'Search',
        displayField: 'data1',
        msgTarget: 'side',
        triggerCls : 'x-form-search-trigger', // Search Icon For Instance
        listConfig: {
                getInnerTpl: function() {
                        return '<div>{data1}</div><div>{data2}</div>';
                }
        }
}

和JSON文件：

[
    ['1','data1-1','data2-1'],
    ['2','data1-2','data2-2'],
    ['3','data1-3','data2-3'],
    ['4','data1-4','data2-4'],
    ['5','data1-5','data2-5']
]
于 2012-04-30T17:56:12.677 回答
1

我认为这个例子http://docs.sencha.com/ext-js/4-1/#!/example/form/forum-search.html对你来说会很有趣。这个实现使用标准的组合框控件。在您的情况下，您需要设置 minChars 属性 = 1，在这种情况下，绑定到 Combobox 的存储将生成带有过滤器参数的标准 READ 查询到服务器。您可以在那里生成结果。

于 2012-04-30T17:59:11.163 回答