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.效果图