ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
2014-03-17 12:27
357 查看
本篇讲解三个工具栏控件。其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单,Ext.toolbar.Paging专门用来控制数据集的分页展示,Ext.ux.statusbar.StatusBar用来展示当前的状态信息。
首先我们定义一个数据模型和Store:
[Js]
?
服务端的json输出代码:
[C# Mvc]
?
接着定义一个listView,来自上篇
现在我们要定义一个toolbar,在工具栏里面添加了工具按钮、普通文字、分割线、和菜单,还实现了搜索的功能:
[Js]
?
注意这里,我们通过load store,把keyword关键字传给了c#的action参数:
[Js]
?
最后我们定义一个Panel,把listView和toolbar都添加到Panel上,注意,tbar表示了这个工具栏在上方。
[Js]
?
大功告成,我们来看看效果:
我们输入关键字“6”后查看过滤效果:
[Js]
?
预览下效果:
[Js]
?
预览下效果:
最后奉上完整的代码:
[Js]
+ View Code?
[Js]
?
对应的服务端mvc的代码如下:
[C# Mvc]
?
现在我们借用上篇的Ext.view.View控件,把它放置到一个面板中,面板的代码如下:
[Js]
?
注意上述代码,我们在分页工具栏控件中加入了一个按钮,当单击这个按钮时,数据集自动翻到第十页。
最后我们看看展示效果:
[Js]
?
展示效果:
?
展示效果:
完整的代码:
[Js]
+ View Code?
首先定义一个函数,它在前2秒将状态栏设置为繁忙状态,2秒后恢复:
[Js]
?
接着我们将要几个按钮到状态栏,第一个设置状态为错误:
[Js]
?
第二个设置状态为加载中:
[Js]
?
第三个为清除状态:
[Js]
?
展示效果,分别是加载、错误、和清除状态:
完整的代码:
+ View Code?
[Js]
作者:李盼(Lipan)
出处:[Lipan] (http://www.cnblogs.com/lipan/)
一、Ext.toolbar.Toolbar
工具栏控件可以被附加在面板、窗口等容器类控件中,可以在四个方位添加多个工具栏控件。我们演示多个Ext.toolbar.Toolbar控件,然后附加到面板的不同位置。1.在工具栏上添加菜单、按钮、搜索功能
我们这里借用上一篇所讲到的listview控件作为数据展示,把listview放入一个面板控件中,然后把工具栏添加到面板顶部,并且在工具栏中实现数据集的服务端搜索的功能。首先我们定义一个数据模型和Store:
[Js]
?
[C# Mvc]
?
现在我们要定义一个toolbar,在工具栏里面添加了工具按钮、普通文字、分割线、和菜单,还实现了搜索的功能:
[Js]
?
[Js]
?
[Js]
?
我们输入关键字“6”后查看过滤效果:
2.溢出测试
如果工具栏上的item项目过多,而面板的长度不够那会怎么样?我们需要设置 overflowHandler: 'Menu',代码如下:[Js]
?
3.在右侧的工具栏
现在我们要实现放置在右侧的工具栏,这次我们直接在面板的代码里面写,代码如下:[Js]
?
最后奉上完整的代码:
[Js]
+ View Code?
二、Ext.toolbar.Paging
1.基本的分页工具栏控件
Ext.toolbar.Paging就是一个特殊的工具栏,它提供了数据集翻页的功能,下面我们看看store的实现:[Js]
?
[C# Mvc]
?
[Js]
?
最后我们看看展示效果:
2.扩展后的翻页控件
我们可以通过ux扩展支持定义不同风格的分页控件,这效果就像三国杀扩展包一样,我们可以通过滚轴控件和进度条控件去展示当前处于分页项的哪个位置。我们在分页控件的配置部分添加如下代码:[Js]
?
?
完整的代码:
[Js]
+ View Code?
三、Ext.ux.statusbar.StatusBar
这个状态栏控件也是ext的一个扩展支持,不过它就好像军争包一样,这次不是小小改进,而是一个全新的控件。首先定义一个函数,它在前2秒将状态栏设置为繁忙状态,2秒后恢复:
[Js]
?
[Js]
?
[Js]
?
[Js]
?
完整的代码:
+ View Code?
作者:李盼(Lipan)
出处:[Lipan] (http://www.cnblogs.com/lipan/)
相关文章推荐
- ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
- [转载]ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
- ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
- ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
- ExtJs4 笔记 Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
- Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
- Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
- 解决Extjs分页工具条Ext.PagingToolbar无法换页问题
- 解决Extjs分页工具条Ext.PagingToolbar无法换页问题
- 利用ExtJs中的Ext.PagingToolbar做表格分页的例子
- Ext 2.0使用:对分页Ext.PagingToolbar的扩展
- ExtJS中grid的JsonStore、Ext.PagingToolbar带条件查询问题
- 修改菜单Menu、工具栏ToolBar、状态栏StatusBar的背景色
- ext.PagingToolbar 分页问题
- ExtJs 4.x 学习小记:更新数据集Ext.PagingToolbar的start参数重置的处理
- ExtJS中grid的JsonStore、Ext.PagingToolbar带条件查询问题
- ExtJS中grid的JsonStore、Ext.PagingToolbar带条件查询问题
- Ext 2.0使用:对分页Ext.PagingToolbar的扩展
- Ext.ux.PagingToolbar 刷新按钮入参
- Extjs5 Ext.PagingToolbar 查询分页