extjs4学习笔记(一)-----searchfiled组件使用

本文档介绍了如何在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.效果图
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值