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