extjs4学习笔记（一）-----searchfiled组件使用

最新推荐文章于 2021-02-01 03:25:35 发布

原创最新推荐文章于 2021-02-01 03:25:35 发布 · 868 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs

extjs 专栏收录该内容

6 篇文章

订阅专栏

本文档介绍了如何在ExtJS4中使用searchfield组件来实现搜索功能。首先，需将searchfield组件引入到EXT目录下，接着通过编写JS代码配置并应用组件，最后展示实现搜索功能后的实际效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

extjs 使用searchfiled组件实现搜索功能

1.首先将 searchfiled组件放入到ext目录中。
这里写图片描述

2.js代码

Ext.onReady(function () {
    var store = Ext.create('Ext.data.Store', {
        id: 'storeId',
        fields: ['data', 'validity', 'title', 'content', 'add', 'publisher'],
        data: [{
            'data': '2011/04/22',
            'validity': '2011/04/22',
            'title': '任务1',
            'content': '内容1',
            'add': '1',
            'publisher': '张三'
        },
            {
                'data': '2011/04/22',
                'validity': '2011/04/22',
                'title': '任务1',
                'content': '内容1',
                'add': '1',
                'publisher': '李四'
            },
            {
                'data': '2011/04/22',
                'validity': '2011/04/22',
                'title': '任务1',
                'content': '内容1',
                'add': '1',
                'publisher': '王五'
            }],
        autoLoad: true
    });
    Ext.create("Ext.container.Viewport", {
        padding: "10 10 5 10",
        renderTo: Ext.getBody(),
        overflowY: "auto",

        items: [{
            xtype: 'panel',
            border: 0,
            items: [{
                xtype: 'panel',
                height: 30,
                items: [{
                    text: '221',
                    xtype: 'textfield',
                }]
            }],
            items: [{
                xtype: 'grid',
                id: 'gridd',
                tbar: [{
                    xtype: 'searchfield',//searchfield是extjs的扩展组件
                    labelWidth: 100,
                    store: store
                } , {
                        xtype: "button",
                        text: "编辑",
                        iconCls: "Applicationformedit",
                    }],
                store: store,
                columns: [
                    {header: '标题', align: 'center', dataIndex: 'title', menuDisabled: true},
                    {header: '内容', align: 'center', dataIndex: 'content', menuDisabled: true, flex: 1},
                    {header: '发布人', align: 'center', dataIndex: 'publisher', menuDisabled: true},
                    {
                        header: '发布日期',
                        align: 'center',
                        dataIndex: 'data',
                        xtype: 'datecolumn',
                        format: 'Y-m-d',
                        menuDisabled: true
                    },
                    {
                        header: '有效日期',
                        align: 'center',
                        dataIndex: 'validity',
                        xtype: 'datecolumn',
                        format: 'Y-m-d',
                        menuDisabled: true
                    },
                    {
                        header: '附件', align: 'center', dataIndex: 'add', menuDisabled: true,
                        renderer: function () {
                            var html = "<center><a href=# style='text-decoration:none;background-color:#eff10a;" +
                                "cursor:pointer' onclick='sign(this)'>附件</a></center>";
                            return html;
                        }
                    }
                ]
            }]
        }]
    })
});

3.效果图
这里写图片描述