03_容器
来源:互联网 发布:安徽建筑大学网络教育 编辑:程序博客网 时间:2024/06/05 05:29
在这一章节,我们将把panel组件换成tabpanel组件,并讨论容器的相关功能!容器也是组件,它是被设计用来盛放和管理它的子组件的。
Ext.Viewport.add({ xtype: 'tabpanel', items: [{ title: 'Employee Directory', iconCls: 'x-fa fa-users' },{ title: 'About Sencha', iconCls: 'x-fa fa-info-circle' }]});
你或许还记得我们上一个例子中的两个配置项,xtype和html。在上面的代码中,我们做了如下改变:
1、通过将xtype的值修改为tabpanel而将组件类型由panel变为tabpanel。
2、将内容为”helloworld!”的html配置项替换为一组叫做items的对象数组。
通过使用items配置项数组,我们可以很容易地将很多子组件(items)添加到容器里。你可以将items看成是你要添加的子组件。在此例中,items数组中包含两个对象。此配置将会创建我们的tabs组件。
提示:通常,你可以为每个子组件设置一个xtype值,但是很多容器(包括tabpanel)都有默认的子组件类型。对于tabpanel来说,默认的子组件类型(xtype)是’panel’。
除了在pabpanel中添加了选项卡组件,我们还为每个子组件添加了一个title和iconCls配置项,每个配置项都影响选项卡的生成,如下所示:
title
显示在tab上面的文字。
iconCls
用这个配置,很可很方便的在tab上设置一个基于字体类的图标。此例中,我们使用Font Awesome图标库来配置,此图标库被打包到主题中了。
提示:查看一下tab类的说明文档(http://docs.sencha.com/extjs/6.2.0/modern/Ext.tab.Tab.html)来浏览所有可以自定义tab组件的配置项。你可能注意到这个类被标记为private。那并不意味着你不能使用类中的成员,而只是说明你不能创建tab。
下一步
空的tab面板没有什么用处,因此让我们添加一个表格用来展示数据吧!
深入探究
更多关于容器的信息,请查看我们的组件概览章节(http://docs.sencha.com/extjs/6.2.1/guides/core_concepts/components.html)。
- 03_容器
- Java基础_容器
- 泛型(1)_容器
- 学习笔记_容器
- 黑马程序员_容器
- 100_容器_List_ArrayList_LinkedList_Vector用法_详解
- 111_容器_自定义实现HashSet
- 126_容器_自定义数据排序
- 142_容器_重点总结
- 127_容器_排序容器_TreeSet与TreeMap
- java基础知识_容器类
- java容器之一_概述
- [C++][基础]8_容器
- STL容器_优先队列
- java基础13_容器_集合_比较器
- set容器_插入_遍历_基本数据类型比较
- 122-123_容器_排序_冒泡排序
- STL 容器和迭代器连载3_顺序容器初始化
- 欢迎使用CSDN-markdown编辑器
- TCP连接的建立与终止
- 等差数列
- 卡号中间数字用*代替
- 设计模式:建造者模式
- 03_容器
- 算法导论 思考题 9-1
- JavaScript 中的 .toString() 和 String()
- 康拓展开式
- Storm常用命令
- Servlet学习笔记六——会话跟踪
- java中方法的定义
- c++ 文件存取
- JS把字符串转换成Date类型