ExtJs4 笔记（12） Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.St

?

本篇讲解三个工具栏控件。其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单，Ext.toolbar.Paging专门用来控制数据集的分页展示，Ext.ux.statusbar.StatusBar用来展示当前的状态信息。

一、Ext.toolbar.Toolbar

工具栏控件可以被附加在面板、窗口等容器类控件中，可以在四个方位添加多个工具栏控件。我们演示多个Ext.toolbar.Toolbar控件，然后附加到面板的不同位置。

1.在工具栏上添加菜单、按钮、搜索功能

我们这里借用上一篇所讲到的listview控件作为数据展示，把listview放入一个面板控件中，然后把工具栏添加到面板顶部，并且在工具栏中实现数据集的服务端搜索的功能。

首先我们定义一个数据模型和Store：

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输出代码：

?

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，在工具栏里面添加了工具按钮、普通文字、分割线、和菜单，还实现了搜索的功能：

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参数：

?

?

{
            text: "搜索",
            handler: function () {
                store.load({ params: { keyword: filed1.getValue()} });
            }
}

?最后我们定义一个Panel，把listView和toolbar都添加到Panel上，注意，tbar表示了这个工具栏在上方

var panel = new Ext.Panel({
    renderTo: "div1",
    width: 600,
    height: 250,
    collapsible: true,
    layout: 'fit',
    title: '演示工具栏',
    items: listView,
    tbar: tbar
});

?

大功告成，我们来看看效果：

我们输入关键字“6”后查看过滤效果：

?

2.溢出测试

如果工具栏上的item项目过多，而面板的长度不够那会怎么样？我们需要设置 overflowHandler: 'Menu'，代码如下：

?

var bbar = Ext.create('Ext.toolbar.Toolbar', {
    layout: {
        overflowHandler: 'Menu'
    },
    items: ["溢出测试", "溢出测试", "溢出测试", "溢出测试", "溢出测试", "溢出测试", "溢出测试",
    "溢出测试", "溢出测试",
    {
        xtype: "button",
        text: "溢出按钮",
        handler: function () {
            Ext.Msg.alert("提示", "工具栏按钮被点击");
        }
    }, { text: "溢出按钮", xtype: "splitbutton"}]
});

?

预览下效果：

3.在右侧的工具栏

现在我们要实现放置在右侧的工具栏，这次我们直接在面板的代码里面写,代码如下：

var panel = new Ext.Panel({
    renderTo: "div1",
    width: 600,
    h