程序博客网 > 传智播客2016java视频

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

来源：互联网 发布：传智播客2016java视频 编辑：程序博客网 时间：2024/04/28 08:40


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

一、Ext.toolbar.Toolbar

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

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

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

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

[Js]
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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'
        }
    }
});
 
varstore = newExt.data.Store({
    model:'Datas',
    sortInfo: { field:'IntData', direction:'DESC' },
    autoLoad:true
});
store.load();

服务端的json输出代码：

[C# Mvc]
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
publicJsonResult Toolbar1Json(stringkeyword)
{
 
    varrows = 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));
    }
    varjson = new
    {
        results = BasicData.Table.Count,
        rows = rows
    };
    returnJson(json, JsonRequestBehavior.AllowGet);
}

接着定义一个listView，来自上篇

现在我们要定义一个toolbar，在工具栏里面添加了工具按钮、普通文字、分割线、和菜单，还实现了搜索的功能：

[Js]
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
varfiled1 = newExt.form.Field();
 
vartbar = 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]
?
1
2
3
4
5
6
{
            text:"搜索",
            handler:function () {
                store.load({ params: { keyword: filed1.getValue()} });
            }
        }

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

[Js]
?
1
2
3
4
5
6
7
8
9
10
varpanel = newExt.Panel({
    renderTo:"div1",
    width: 600,
    height: 250,
    collapsible:true,
    layout:'fit',
    title:'演示工具栏',
    items: listView,
    tbar: tbar
});

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

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

2.溢出测试

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

[Js]
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
varbbar = Ext.create('Ext.toolbar.Toolbar', {
    layout: {
        overflowHandler:'Menu'
    },
    items: ["溢出测试","溢出测试","溢出测试","溢出测试","溢出测试","溢出测试","溢出测试",
    "溢出测试","溢出测试",
    {
        xtype:"button",
        text:"溢出按钮",
        handler:function () {
            Ext.Msg.alert("提示","工具栏按钮被点击");
        }
    }, { text:"溢出按钮", xtype:"splitbutton"}]
});

预览下效果：

3.在右侧的工具栏

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

[Js]
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
varpanel = newExt.Panel({
    renderTo:"div1",
    width: 600,
    height: 250,
    collapsible:true,
    layout:'fit',
    title:'演示工具栏',
    items: listView,
    tbar: tbar,
    bbar: bbar,
    rbar: [{
        iconCls:'add16',
        tooltip:'按钮1'
    },
        '-',
        {
            iconCls:'add16',
            tooltip: {
                text:'按钮2',
                anchor:'left'
            }
        }, {
            iconCls:'add16'
        }, {
            iconCls:'add16'
        },
        '-',
        {
            iconCls:'add16'
        }
    ]
});

预览下效果：

最后奉上完整的代码：

[Js]

二、Ext.toolbar.Paging

1.基本的分页工具栏控件

Ext.toolbar.Paging就是一个特殊的工具栏，它提供了数据集翻页的功能，下面我们看看store的实现：

[Js]
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
varstore = Ext.create('Ext.data.Store', {
    fields: ['IntData','StringData','TimeData'],
    pageSize: 15,
    proxy: {
        type:'ajax',
        url:'PagingToolbar1Json',
        reader: {
            type:'json',
            root:'rows',
            totalProperty:'results'
        }
    },
    autoLoad:true
});

对应的服务端mvc的代码如下：

[C# Mvc]
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
public JsonResult PagingToolbar1Json(int start, int limit)
{
    varjson = new
    {
        results = BasicData.Table.Count,
        rows = BasicData.Table.Skip(start).Take(limit).Select(x =>new
        {
            IntData = x.IntData,
            StringData = x.StringData,
            TimeData = x.TimeData.ToShortDateString()
        })
    };
    returnJson(json, JsonRequestBehavior.AllowGet);
}

现在我们借用上篇的Ext.view.View控件，把它放置到一个面板中，面板的代码如下：

[Js]
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
varpanel = Ext.create('Ext.Panel', {
    renderTo:"div1",
    frame:true,
    width: 535,
    autoHeight:true,
    collapsible:true,
    layout:'fit',
    title:'分页控件用在View',
    items: Ext.create('Ext.view.View', {
        store: store,
        tpl: tpl,
        autoHeight:true,
        multiSelect:true,
        id:'view1',
        overItemCls:'hover',
        itemSelector:'tr.data',
        emptyText:'没有数据',
        plugins: [
            Ext.create('Ext.ux.DataView.DragSelector', {}),
            Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'IntData' })
        ]
    }),
    bbar: Ext.create('Ext.toolbar.Paging', {
        store: store,
        displayInfo:true,
        items: [
            '-', {
                text:'第10页',
                handler:function () {
                    store.loadPage(10);
                }
            }]
    })
});

注意上述代码，我们在分页工具栏控件中加入了一个按钮，当单击这个按钮时，数据集自动翻到第十页。

最后我们看看展示效果：

2.扩展后的翻页控件

我们可以通过ux扩展支持定义不同风格的分页控件，这效果就像三国杀扩展包一样，我们可以通过滚轴控件和进度条控件去展示当前处于分页项的哪个位置。我们在分页控件的配置部分添加如下代码:

[Js]
?
1
plugins: Ext.create('Ext.ux.SlidingPager', {})

展示效果：

?
1
plugins: Ext.create('Ext.ux.ProgressBarPager', {})

展示效果：

完整的代码：

[Js]

三、Ext.ux.statusbar.StatusBar

这个状态栏控件也是ext的一个扩展支持，不过它就好像军争包一样，这次不是小小改进，而是一个全新的控件。

首先定义一个函数，它在前2秒将状态栏设置为繁忙状态，2秒后恢复：

[Js]
?
1
2
3
4
5
6
7
8
9
10
11
12
varloadFn = function(btn, statusBar) {
    btn = Ext.getCmp(btn);
    statusBar = Ext.getCmp(statusBar);
 
    btn.disable();
    statusBar.showBusy();
 
    Ext.defer(function() {
        statusBar.clearStatus({ useDefaults:true });
        btn.enable();
    }, 2000);
};

接着我们将要几个按钮到状态栏，第一个设置状态为错误：

[Js]
?
1
2
3
4
5
6
7
8
handler:function () {
    varsb = Ext.getCmp('statusbar1');
    sb.setStatus({
        text:'错误!',
        iconCls:'x-status-error',
        clear:true // 自动清除状态
    });
}

第二个设置状态为加载中：

[Js]
?
1
2
3
4
handler:function () {
    varsb = Ext.getCmp('statusbar1');
    sb.showBusy();
}

第三个为清除状态：

[Js]
?
1
2
3
4
handler:function () {
    varsb = Ext.getCmp('statusbar1');
    sb.clearStatus();
}

展示效果，分别是加载、错误、和清除状态：

完整的代码：

+ View Code?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
Ext.Loader.setConfig({ enabled:true });
Ext.Loader.setPath('Ext.ux','/ExtJs/ux');
 
Ext.onReady(function() {
    varloadFn = function(btn, statusBar) {
        btn = Ext.getCmp(btn);
        statusBar = Ext.getCmp(statusBar);
 
        btn.disable();
        statusBar.showBusy();
 
        Ext.defer(function() {
            statusBar.clearStatus({ useDefaults:true });
            btn.enable();
        }, 2000);
    };
 
 
    varpanel = newExt.Panel({
        renderTo:"div1",
        width: 600,
        height: 250,
        collapsible:true,
        //layout: 'fit',
        title:'演示状态栏',
        items: [{ xtype:"button", text:"测试", id:"button1", handler:function (btn, statusBar) {
            loadFn("button1","statusbar1");
        }
        }],
        bbar: Ext.create('Ext.ux.statusbar.StatusBar', {
            id:'statusbar1',
            defaultText:'就绪',
            text:'没有任务',
            iconCls:'x-status-valid',
            items: [
                {
                    xtype:'button',
                    text:'设置状态',
                    handler:function () {
                        varsb = Ext.getCmp('statusbar1');
                        sb.setStatus({
                            text:'错误!',
                            iconCls:'x-status-error',
                            clear:true // 自动清除状态
                        });
                    }
                },
                {
                    xtype:'button',
                    text:'设置为加载状态',
                    handler:function () {
                        varsb = Ext.getCmp('statusbar1');
                        sb.showBusy();
                    }
                },
                {
                    xtype:'button',
                    text:'清除状态',
                    handler:function () {
                        varsb = Ext.getCmp('statusbar1');
                        sb.clearStatus();
                    }
                }
            ]
        })
 
    });
});
0 0
传智播客2016java视频 传智播客2016java视频
原创粉丝点击
热门IT博客
一朝成名天下知的上句一朝成名天下知的上句
轩辕网络轩辕网络
nvh 软件
学党史知国情心得体会
2016淘宝客注册流程
看视频软件
淘宝官方模特
js 字符串数组排序
手机访问电脑软件
hm在淘宝没有旗舰店吗
淘宝无盒化妆品怎么样
数据库表设计原则
淘宝改后台会不会死号
手机怎么删除淘宝好评
印尼海关数据免费查询
夏门软件职业技术学院
经济学 比例数据 悖论
逆战移动网络延迟
固定资产统计软件
淘宝客地推海报
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 编导就业前景 编导文化分400能上什么大学 编导专业文化分数线 编导故事范文 广播电视编导专业 编导故事范文十篇 影视编导与制作专业 学编导要多少钱 编导专业高三学晚吗 影视编导培训班 广播电视编导学什么 学编导有前途吗 广播电视编导 艺考 影视编导专业就业前景 编导专业分数线2016 编导专业学什么 编导专业学费 编导艺考考什么 编导考试内容 编导自我介绍 编导专业大学排名及分数 编导就业方向 影视编导培训 广播电视编导艺考 编导专业大学排名二本 广播电视编导专业大学排名 影视编导专业分数线 电视编导专业大学排名 高考编导专业 编导艺考培训班 艺考编导培训班 编导培训班学费 编导专业培训费用 编导专业艺考 广播电视编导专业培训 编导艺考都考什么 传媒编导专业 编导专业都学什么 广播电视编导专业课程 艺考编导考什么 编导艺考自我介绍范文

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里