通过store为toolbar添加按钮

时间：2022-09-23 16:17:18

目的是实现导航条toolbar可以动态加载按钮。

ExtJS的版本是4.0.

实现方案有两个。方案一：添加render事件监听，在监听事件处理函数中使用Ext.Ajax获取按钮信息，实现动态添加按钮。方案二：定义一个新的类，继承toolbar，为其添加store属性。

方案一比较简单，这里就不详述了。

方案二我们使用ExtJS的MVC做一个演示：

先上演示效果图：

通过store为toolbar添加按钮

以下是演示文件结构：

通过store为toolbar添加按钮

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添加按钮的更多相关文章

  1. PyQt&lpar;Python&plus;Qt&rpar;学习随笔：Qt Designer中怎么给toolBar添加按钮

    在Designer中创建了一个MainWindow窗体,当想在其中的toolBar中添加toolButton时发现怎么也放不上去,最终才发现toolBar中的按钮只能通过直接拖拽Action编辑器中的 ...

  2. 如何往IE工具条添加按钮（转载&rpar;

    如何往IE工具条添加按钮 问题提出:金山词霸.网络蚂蚁等软件安装后会向IE的工具条添加自己的按钮.按下按钮后还会作出相应的动作,这种功能是如何实现的呢?读完本文,您也可以将自己应用程序的按钮添加到IE ...

  3. 关于FlexPaper 2&period;1&period;2版本 二次开发 Logo 、打印、搜索、缩略图、添加按钮、js交互、右键菜单、书签等相关问题

    2015-03-02 更新文章,由于需求修改,更改了flexpaper插件,故增加第9.10.11小节,下载代码时请注意. 先废话几句.最近用到文档在线浏览功能,之前用的是print2flash(一个 ...

  4. Stimulsoft&period;Report&period;web viewer控件添加按钮

    当你购买了带源码的时候,你可以对源码进行修改以达到自己想要的效果,比较这里讲到的,向viewer控件工具栏添加按钮. 通过源码目录可以看出我们需要修改的有两部分代码 红色方块圈中的部分,[StiWeb ...

  5. iOS 封装添加按钮的方法

    添加按钮 #pragma mark 添加按钮 - (void)addButtonWithImage:(NSString *)image highImage:(NSString *)highImage ...

  6. 今天遇到的点击添加按钮button&lowbar;click代码段无法执行的问题

    首先:本人小白一枚,刚入行,如有表述不当的地方,还请多多指教 网页界面如图: 当点击添加按钮后断点测试进入后台代码运行: 代码会先执行Page_Load页面,当加载完后Page_Load代码会跳转到m ...

  7. java 24 - 3 GUI之添加按钮

    需求:把按钮添加到窗体,并对按钮添加一个点击事件. A:创建窗体对象 B:创建按钮对象 C:把按钮添加到窗体 D:窗体显示 注意:这里对按钮添加点击事件,同样使用监听器. 但是,这里的按钮是组件,所以 ...

  8. iOS开发UI篇—在UIImageView中添加按钮以及Tag的参数说明

    ios开发UI篇—在ImageView中添加按钮以及Tag的参数说明 一.tag参数 一个视图通常都只有一个父视图,多个子视图,在开发中可以通过使用子视图的tag来取出对应的子视图.方法为Viewwi ...

  9. SM30维护视图添加按钮

    转自http://blog.csdn.net/tsj19881202/article/details/7517232 遇到某需求,要求维护sm30的视图时,能加上排序按钮. 基本参考: http:// ...

随机推荐

  1. 深度学习入门教程UFLDL学习实验笔记三：主成分分析PCA与白化whitening

    主成分分析与白化是在做深度学习训练时最常见的两种预处理的方法,主成分分析是一种我们用的很多的降维的一种手段,通过PCA降维,我们能够有效的降低数据的维度,加快运算速度.而白化就是为了使得每个特征能有同 ...

  2. 牛客网程序员面试金典：1&period;1确定字符互异&lpar;java实现&rpar;

    问题描述: 请实现一个算法,确定一个字符串的所有字符是否全都不同.这里我们要求不允许使用额外的存储结构. 给定一个string iniString,请返回一个bool值,True代表所有字符全都不同, ...

  3. JavaScript--Date函数

    1. Date函数 var now = new Date(); 获取当前日期对象 now对象->Date.prototype->Object.prototype 将一个字符串转换为Date ...

  4. vue-router 二级路由

    /** * Created by 我 on 2017/12/4. */ import Vue from 'vue' //import导入 Vue(自己起的名) from 从 vue import Vu ...

  5. 高效遍历匹配Json数据与双层for循环遍历Json数据

    工作中往往遇到这种情况,保留用户操作痕迹,比如用户选择过得东西,用户进入其它页面再返回来用户选择的的数据还在. 比如:1.购物车列表中勾选某些,点击任意一项,前往详情页,再返回购物车依旧需要呈现勾选状 ...

  6. J-Link GDB Server Command

    J-Link GDB Server - SEGGER Hilden, Germany – September 15th, 2011 – SEGGER Microcontroller today ann ...

  7. 虚函数后面的const&equals;0

    const 和 =0要分开理解. 成员函数后面用 const 修饰,const表示this是一个指向常量的指针,即对象成为一个常量,即它的成员不能够变化.(默认情况下,this的类型是指向类类型非常量 ...

  8. CentOS 使用 yum 更新软件包与系统

    1.CentOS 更新源配置文件说明 CentOS 6.5 更新源配置文件 /etc/yum.repos.d/CentOS-Base.repo 片段 [base] name=CentOS-$relea ...

  9. Scala从零開始：使用Intellij IDEA写hello world

    引言 在之前的文章中,我们介绍了怎样使用Scala IDE也就是eclipse中集成的Scala开发插件来进行Scala语言程序的开发,在使用了一段时间之后,发现eclipse对Scala的支持并非非 ...

  10. Android——继续深造——从安装Android Studio 2&period;0开始（详）

    一.下载JDK,JRE,SDK http://jingyan.baidu.com/article/eb9f7b6d884ea7869364e8eb.html 二.配置环境变量: 我的电脑->属性 ...

相关文章