通过store为toolbar添加按钮
目的是实现导航条toolbar可以动态加载按钮。
ExtJS的版本是4.0.
实现方案有两个。方案一：添加render事件监听，在监听事件处理函数中使用Ext.Ajax获取按钮信息，实现动态添加按钮。方案二：定义一个新的类，继承toolbar，为其添加store属性。
方案一比较简单，这里就不详述了。
方案二我们使用ExtJS的MVC做一个演示：
先上演示效果图：
以下是演示文件结构：
index.jsp代码：
1: <%@ page language="java" pageEncoding="utf-8"%>
2: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3: <html>
4: <head>
5: <title>ExtJs MVC 演示</title>
6: <link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css" />
7: <link rel="stylesheet" type="text/css" href="./theme/theme.css" />
8: </head>
9: <body>
10: <script type="text/javascript" src="./extjs/ext-debug.js"></script>
11: <script type="text/javascript" src="./extjs/locale/ext-lang-zh_CN.js"></script>
12: <script type="text/javascript" src="./app/app.js"></script>
13: </body>
14: </html>
app.js代码：
1: Ext.application({
2: name: 'demo',
3: controllers:['StoreBarController'],
4: autoCreateViewport: true
5: });
Viewport.js代码：
1: Ext.define('demo.view.Viewport', {
2: extend: 'Ext.container.Viewport',
3:
4: requires: ['demo.view.StoreBar'],
5:
6: layout: 'fit',
7:
8: items: [{
9: tbar: {xtype: 'storebar'}
10: }]
11: });
StoreBarController.js代码：
1: Ext.define('demo.controller.StoreBarController', {
2: extend: 'Ext.app.Controller',
3:
4: stores: ['BarStore'],
5: model: ['BarModel'],
6: views: ['StoreBar']
7: });
StoreBar.js的代码：
1: Ext.define('demo.view.StoreBar', {
2: extend: 'Ext.toolbar.Toolbar',
3: alias: 'widget.storebar',
4:
5: store: 'BarStore',
6:
7: initComponent: function() {
8: var me = this;
9: me.store = Ext.data.StoreManager.lookup(me.store || 'ext-empty-store');
10: me.on('render', me.addButtons);
11: this.callParent(arguments);
12: },
13:
14: addButtons: function(){
15: var me = this;
16: me.store.each(function(record){
17: me.add({
18: xtype: 'button',
19: scale: 'large',
20: iconAlign: 'top',
21: text: record.data.text,
22: iconCls: record.data.iconCls
23: });
24: });
25: }
26: });
BarStore.js代码：
1: Ext.define("demo.store.BarStore",{
2: extend:'Ext.data.Store',
3:
4: model: 'demo.model.BarModel',
5:
6: data:[{
7: text: '系统管理',
8: iconCls: 'icon-top-sys'
9: },{
10: text: '用户管理',
11: iconCls: 'icon-top-user'
12: }]
13: });
BarModel.js代码：
1: Ext.define('demo.model.BarModel', {
2: extend: 'Ext.data.Model',
3:
4: fields:['text', 'iconCls']
5: });
就是这几个文件了。相应的CSS文件以及图片什么的就不再一一列出了。有心的话可以自己试一下。
目前需要的数据是写在了store中，一般我们更喜欢将数据存储在数据库中。接下来做些调整，我们改为从服务器端获取数据。数据存储在store.json中：
1: {
2: success: true,
3: total: 2,
4: root: [
5: {id: 1, text: '系统管理', iconCls: 'icon-top-sys'},
6: {id: 2, text: '用户管理', iconCls: 'icon-top-user'}
7: ]
8: }
调整BarStore.js：
1: Ext.define('demo.store.BarStore', {
2: extend: 'Ext.data.Store',
3: model: 'demo.model.BarModel',
4:
5: proxy: {
6: type: 'ajax',
7: url: 'store.json',
8: reader: {
9: type: 'json',
10: root: 'root',
11: successProperty: 'success'
12: }
13: }
14: });
调整StoreBar.js的代码：
1: Ext.define('demo.view.StoreBar', {
2: extend: 'Ext.toolbar.Toolbar',
3: alias: 'widget.storebar',
4:
5: store: 'BarStore',
6:
7: initComponent: function() {
8: var me = this;
9: me.store = Ext.getStore('BarStore');
10: me.store.load({
11: scope: this,
12: callback: function(records) {
13: Ext.each(records, function(record){
14: me.add({
15: xtype: 'button',
16: scale: 'large',
17: iconAlign: 'top',
18: text: record.data.text,
19: iconCls: record.data.iconCls
20: });
21: });
22: }
23: });
24:
25: this.callParent(arguments);
26: }
27: });
这里对store进行了主动加载，添加按钮也是写在了store加载的callback函数中，目的是防止store加载出现延迟，按钮不能及时添加的情况。
demo演示资源下载：http://download.csdn.net/detail/tianxiexingyun/7332057
通过store为toolbar添加按钮的更多相关文章
- PyQt(Python+Qt)学习随笔：Qt Designer中怎么给toolBar添加按钮
在Designer中创建了一个MainWindow窗体,当想在其中的toolBar中添加toolButton时发现怎么也放不上去,最终才发现toolBar中的按钮只能通过直接拖拽Action编辑器中的 ...
- 如何往IE工具条添加按钮（转载)
如何往IE工具条添加按钮 问题提出:金山词霸.网络蚂蚁等软件安装后会向IE的工具条添加自己的按钮.按下按钮后还会作出相应的动作,这种功能是如何实现的呢?读完本文,您也可以将自己应用程序的按钮添加到IE ...
- 关于FlexPaper 2.1.2版本 二次开发 Logo 、打印、搜索、缩略图、添加按钮、js交互、右键菜单、书签等相关问题
2015-03-02 更新文章,由于需求修改,更改了flexpaper插件,故增加第9.10.11小节,下载代码时请注意. 先废话几句.最近用到文档在线浏览功能,之前用的是print2flash(一个 ...
- Stimulsoft.Report.web viewer控件添加按钮
当你购买了带源码的时候,你可以对源码进行修改以达到自己想要的效果,比较这里讲到的,向viewer控件工具栏添加按钮. 通过源码目录可以看出我们需要修改的有两部分代码 红色方块圈中的部分,[StiWeb ...
- iOS 封装添加按钮的方法
添加按钮 #pragma mark 添加按钮 - (void)addButtonWithImage:(NSString *)image highImage:(NSString *)highImage ...
- 今天遇到的点击添加按钮button_click代码段无法执行的问题
首先:本人小白一枚,刚入行,如有表述不当的地方,还请多多指教 网页界面如图: 当点击添加按钮后断点测试进入后台代码运行: 代码会先执行Page_Load页面,当加载完后Page_Load代码会跳转到m ...
- java 24 - 3 GUI之添加按钮
需求:把按钮添加到窗体,并对按钮添加一个点击事件. A:创建窗体对象 B:创建按钮对象 C:把按钮添加到窗体 D:窗体显示 注意:这里对按钮添加点击事件,同样使用监听器. 但是,这里的按钮是组件,所以 ...
- iOS开发UI篇—在UIImageView中添加按钮以及Tag的参数说明
ios开发UI篇—在ImageView中添加按钮以及Tag的参数说明 一.tag参数 一个视图通常都只有一个父视图,多个子视图,在开发中可以通过使用子视图的tag来取出对应的子视图.方法为Viewwi ...
- SM30维护视图添加按钮
转自http://blog.csdn.net/tsj19881202/article/details/7517232 遇到某需求,要求维护sm30的视图时,能加上排序按钮. 基本参考: http:// ...
随机推荐
- Andriod基础——Adapter类
Android是完全遵循MVC模式设计的框架,Activity是Controller,layout是View,因为layout五花八门,很多数据都不能直接绑定上去,所以Android引入了Adapte ...
- pb中创建连接webservice对象实例方法
try soapConnection conn // Define SoapConnectionHospitalServiceSoap in_hhzswebser // Declare proxyin ...
- [前端 3]纯Js制作俄罗斯方块游戏
导读:在别人文章里看到了,然后写了一遍.结果出错了,然后调出来了,然后理解了一下,加了点注释,有一些想法.忘了在 哪一篇上面看的了,就贴不出来链接地址.原谅.呃,真没自己的东西,权当练打字了吧.其实, ...
- 织梦dedecms中html和xml格式的网站地图sitemap制作方法
sitemap是网站上各网页的列表.创建并提交sitemap有助于百度(Google)发现并了解您网站上的所有网页,包括百度通过传统抓取方式可能找不到的网页.还可以使用sitemap提供有关你网站的其 ...
- Windows 2008修改密码策略方法
Windows Server 2008默认强制要求定期更改密码,这个功能有时实在是让人烦不胜烦,适当情况下可以考虑关闭. 方法如下: 1.按windows键+R(或者点开始---动行)打开运行窗口,输 ...
- ASP.NET中的Eval与DataBinder.Eval()方法
1.bind是一种双向数据绑定,有数据源时才会有改变. 2..net1.x版本中有DataBinder(Container.DataItem,"数据项") 单向数据绑定 .net ...
- 空间session失效的解决方法
今天访问自己的网站的时候(by thinkphp),突然发现身份验证失效了,Session无法跨页,而且登陆的时候总是提示验证码错误(验证码也是通过Session传递的),才意识到可能是Session ...
- Web前端年后跳槽必看的各种面试题
幸运且光荣的被老大安排了一个任务 - “去整理些前端面试题”.年前确实不是招人的好时候,所以我们前端团队经过了超负荷的运转,终于坚持过了春节.春节以后就开始招人啦,这套题考察的目标就是基础基础再基础, ...
- linu流量监控
iftophttp://www.cnblogs.com/ggjucheng/archive/2013/01/13/2858923.html 默认是监控第一块网卡的流量iftop 监控eth1iftop ...
- 整理一些有意思的php笔试题
慢慢补充 1.下面这段代码的输出是什么: $a = in_array('01', array('1'))==var_dump('01'==1); echo $a; 说明:in_array('01', ...