【www.bbyears.com--extjs】
.在工具栏上添加菜单、按钮、搜索功能
我们这里借用上一篇所讲到的listview控件作为数据展示,把listview放入一个面板控件中,然后把工具栏添加到面板顶部,并且在工具栏中实现数据集的服务端搜索的功能。
首先我们定义一个数据模型和Store:
代码如下[Js]
Ext.define("Datas", {
extend: "Ext.data.Model",
fields: [
{ name: "IntData", type: "int" },
{ name: "StringData", type: "string" },
{ name: "TimeData", type: "date" }
],
proxy: {
type: "ajax",
url: "Toolbar1Json",
reader: {
type: "json",
root: "rows"
}
}
});
var store = new Ext.data.Store({
model: "Datas",
sortInfo: { field: "IntData", direction: "DESC" },
autoLoad: true
});
store.load();
服务端的json输出代码:
代码如下[C# Mvc]
public JsonResult Toolbar1Json(string keyword)
{
var rows = BasicData.Table.Take(10).Select(x => new
{
IntData = x.IntData,
StringData = x.StringData,
TimeData = x.TimeData.ToShortDateString()
});
if (!string.IsNullOrEmpty(keyword))
{
rows = rows.Where(x => x.IntData.ToString() == keyword || x.StringData.Contains(keyword) || x.TimeData.Contains(keyword));
}
var json = new
{
results = BasicData.Table.Count,
rows = rows
};
return Json(json, JsonRequestBehavior.AllowGet);
}
接着定义一个listView,来自上篇
现在我们要定义一个toolbar,在工具栏里面添加了工具按钮、普通文字、分割线、和菜单,还实现了搜索的功能:
代码如下[Js]
var filed1 = new Ext.form.Field();
var tbar = Ext.create("Ext.Toolbar", {
items: ["文字", "-", {
xtype: "splitbutton",
text: "按钮"
}, {
text: "菜单",
menu:
{
items: [
{
text: "选项1"
}, {
text: "选项2"
}, {
text: "选项3",
handler: function () {
Ext.Msg.alert("提示", "来自菜单的消息");
}
}
]
}
}, "->", "关键字:", filed1, {
text: "搜索",
handler: function () {
store.load({ params: { keyword: filed1.getValue()} });
}
}
]
});
注意这里,我们通过load store,把keyword关键字传给了c#的action参数:
[Js]
{
text: "搜索",
handler: function () {
store.load({ params: { keyword: filed1.getValue()} });
}
}
最后我们定义一个Panel,把listView和toolbar都添加到Panel上,注意,tbar表示了这个工具栏在上方。
[Js]
var panel = new Ext.Panel({
renderTo: "div1",
width: 600,
height: 250,
collapsible: true,
layout: "fit",
title: "演示工具栏",
items: listView,
tbar: tbar
});
大功告成,我们来看看效果:
我们输入关键字“6”后查看过滤效果: