extJS4.2.0 tabPanel学习(三)

  1. 了解添加tab的函数

这里设置为自动添加,菜单是从后台获取的数据,前台进行双击的时候,添加tab页


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

Ext.define(‘MVC.controller.MainController‘, {

    extend: ‘Ext.app.Controller‘,

 

 

    stores:[‘MenuStore‘,‘NewsStore‘],

    models:[‘MenuModel‘,‘NewsModel‘],

    views:[‘Viewport‘],

    init: function() {

        console.log(‘测试controller文件是否找到!‘);

        this.control({

            ‘menulist‘:{

                itemdblclick: this.openTab

            }

        });

    },

    openTab:function(view, record, item, index, e){

        console.log(‘测试双击是否执行!‘+record[‘data‘][‘text‘]);

        

    var pnCenter = Ext.getCmp(‘content_panel‘);

    var tabId = "tab-" + record.raw.id;

    var tabTitle = record.raw.text;

    var url = record.raw.url;

    var newTab = Ext.getCmp(tabId); 

    Ext.log("record.raw.url:"+url); 

    if (!newTab) { 

        newTab = pnCenter.add(new Ext.Panel({

                        id: tabId,

                        title: tabTitle,

                        autoScroll: true,

                        iconCls: ‘tabIconCss‘,

                        layout: ‘fit‘, //layout一定要是fit,不然显示grid会有问题。

                        border: false,

                        closable: true,

                        fitToFrame:true,

                        items: [Ext.create(‘MVC.view.‘+url)]

       }));

        pnCenter.setActiveTab(newTab); 

    }else { //如果tab中存在,那么就直接将节点指向这个页面 

        pnCenter.setActiveTab(newTab); 

    

     }

});

注意:

Ext.getCmp(‘content_panel‘);content_panel是id值,代表的是内容页的id号,执行之前表示已经存在;

Ext.create(‘MVC.view.‘+url)中‘MVC.view.‘+url代表的是命名空间,执行之后就说明之前尚未存在;

   Right.js tab要显示的位置


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(‘MVC.view.main.Right‘, {

            extend : ‘Ext.tab.Panel‘,

            initComponent : function() {

                Ext.apply(this, {

                            id : ‘content_panel‘,

                            region : ‘center‘,

                            defaults : {

                                autoScroll : true,

                                bodyPadding : 10

                            },

                            activeTab : 0,

                            border : false,

                            // plain: true,

                            items : [{

                                        id : ‘HomePage‘,

                                        title : ‘首页‘,

                                        iconCls : ‘home‘,

                                        layout : ‘fit‘

                                    }]

                        });

                this.callParent(arguments);

            }

        });

来自为知笔记(Wiz)

时间: 2025-01-18 11:47:35

extJS4.2.0 tabPanel学习(三)的相关文章

HBase-1.0.1学习笔记汇总

欢迎访问:鲁春利的工作笔记,学习是一种信仰,让时间考验坚持的力量. HBase-1.0.1学习笔记(一)集群搭建 http://luchunli.blog.51cto.com/2368057/1682049HBase-1.0.1学习笔记(二)客户端访问 http://luchunli.blog.51cto.com/2368057/1687458 HBase-1.0.1学习笔记(三)启动脚本解析 http://luchunli.blog.51cto.com/2368057/1690619 HBas

20145209 《信息安全系统设计基础》第0周学习总结

20145209 <信息安全系统设计基础>第0周学习总结 教材学习内容总结 一.师生关系: 最好的师生关系是健身学员与健身教练的关系.这种关系的前提就是学员即学生必须以自己学习为前提,在学习的过程中接受老师的指导,才能真正提高和进步.老师安排任务只能更具大多数人的水平,并不能完全的更具 你自己的能力给你最好的学习模式,只有通过自己对自己的了解,探索出自己的学习方式,在此期间向老师提出疑问与不解才能真正的进步. 二.习而学的要点: 找到学习共同体:因为大量知识存在于学习共同体的实践中,不是书本中

Jetty学习三:配置概览-需要配置什么

上一节讲述了怎么配置Jetty,这节将告诉你使用Jetty你需要配置些什么. 配置Server Server实例是Jetty服务端的中心协调对象,它为所有其他Jetty服务端组件提供服务和生命周期管理.在标准Jetty发布中,核心的服务端配置是在etc/jetty.xml文件中,你也能在其中包含其他服务端配置,可以包括: 1)ThreadPool Server实例提供了一个线程池,你可以在etc/jetty.xml中配置最大线程数和最小线程数. 2)Handlers Jetty服务端只能有一个H

ZigBee学习三 UART通信

ZigBee学习三 UART通信 本实验只对coordinator.c文件进行改动就可以实现串口的收发. 修改coordinator.c文件 byte GenericApp_TransID; // This is the unique message ID (counter) afAddrType_t GenericApp_DstAddr; unsigned char uartbuf[128];/**************************************************

20145317《信息安全系统设计基础》第0周学习总结

20145317彭垚<信息安全系统设计基础>第0周学习总结 感想: 学生和老师的关系:健身教练和健身学员.学员想要健身塑造好的身材却不知道路径和方法,所以找到教练,教练需要做的是引导教会学生正确的锻炼姿势和锻炼方法,之后的事情就全看学员自己了. 对于新学期新课程,我希望自己能比上次学的认真,比上学期效率高,然后积极配合老师的教学工作,同时也不断提高自己. 问题: 第一章 计算机系统漫游 计算机操作系统中处理器.缓存器.以及内存等在运行中是如何配合运行的. 第二章 信息的表示和处理 计算机算数运

20145311 《信息安全系统设计基础》第0周学习总结

20145311 <信息安全系统设计基础>第0周学习总结 本周对这学期将要学习的信息安全系统设计这门课程做了一个大概的了解,感觉这门课的学习方式应该和上学期的Java程序设计基础那门课差不多,主要还是要靠自己自学, 其实我感觉自学是一种挺有效的学习方法,但是我自己认为还没能利用好这种方式,比如上学期的java课就没怎么学好, 所以这学期应该需要有所改观,至少我主观上是这样认为的.但是我返现这本书<深入理解计算机系统v2>真的很厚,一周两章的进度不知道是否能够跟得上, 上学期一周两章

Spark学习三:Spark Schedule以及idea的安装和导入源码

Spark学习三:Spark Schedule以及idea的安装和导入源码 标签(空格分隔): Spark Spark学习三Spark Schedule以及idea的安装和导入源码 一RDD操作过程中的数据位置 二Spark Schedule 三Idea导入spark源码 一,RDD操作过程中的数据位置 [hadoop001@xingyunfei001 spark-1.3.0-bin-2.5.0]$ bin/spark-shell --master local[2] val rdd = sc.t

c++ boost库学习三:实用工具

noncopyable 大家都知道定义一个空类的时候,它实际包含了构造函数,拷贝构造函数,赋值操作符和析构函数等. 这样就很容易产生一个问题,就是当用户调用A a(“^_^") 或者A c="^_^" 时会发生一些意想不到的行为,所以很多时候我们需要禁用这样的用法. 一种方法就是把拷贝构造函数和赋值操作符显式的定义为private,但是这样需要很多代码. 于是boost库为大家提供了一个简单的方法:只需要将类继承于noncopyable就可以了. #include "

scala学习三---文件里读取文本行

学习了scala的基本知识后,发现了scala是集函数式和指令式结合为一体的一种语言,代码更加简洁,但是对于用习惯了java的人来说,还真的不是一件易事~~ 今天学习scala脚本读取文本文件 列子如下: import scala.io.Source if(args.length>0){ for(line <- Source.fromFile(args(0)).getLines) print(line.length+" "+line) }else{ Console.err.