Ext.js添加子组件
Ext框架提供了很多api,对于不熟悉的人来说,api的释义有时不够明了。最近碰到了添加子组件的需求,特记录下来。
1. 例如,有一个窗体组件:
现在要为其添加一个字段“学校分类”,变成如下所示:
示例代码如下:
var items = window.down('fieldset[title=名单信息]'); //查找到fieldset组件
var object = {
xtype: 'combo',
fieldLabel: '学校分类',
name: 'type',
value: '',
store: Ext.create('Ext.data.Store', {
fields: ['type', 'value'],
data: [
{
'type': '0-1',
'value': '第0类1'
},
{
'type': '0-2',
'value': '第0类2'
},
{
'type': 'special',
'value': '第8类'
}
]
}),
emptyText: '请选择',
queryMode: 'local',
displayField: 'value',
valueField: 'type'
};
items.add(object); //或者用插入法:items.insert(6, object); 6是插入的索引位置
items.doLayout();
用 add 为组件添加新成员,再用 doLayout 方法更新视图。
2. 为grid表格添加一列
var cols = tab.down('grid').columns; //查找到 grid 组件中的列 columns
var object = {
text : '学校分类',
dataIndex : 'type',
width : 80,
editor : {
xtype : 'textfield'
},
renderer : function(val, cellmeta, record, rowIndex, columnIndex, store) { //将接收到的数据变化后再输出
if (val == '0-1') {
return '第0类1';
} else if (val == '0-2') {
return '第0类2';
} else if (val == 'special') {
return '第8类';
}
return val;
}
}; cols.splice(4, 0, object);
var nameStore = Ext.create('my.store.NameListStore'); //数据层
tab.down('grid').reconfigure(nameStore, cols);
Ext.js添加子组件的更多相关文章
- Ext JS添加子组件的误区
经常会有人问我,为什么我的Grid不能岁窗口的变得而自动调整.了解后,发现很多人都习惯在渲染子组件的时候将Gird渲染到容器内的一个div里,而这正是问题的所在. 在Ext JS的布局系统中,能控制到 ...
- 《Ext JS模板与组件基本知识框架图----模板》
最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...
- React 克隆组件 -- React.cloneElement(可以用来修改子组件属性值,复制子组件,添加子组件)
项目要求实现按钮级权限,简单来说就是需要通过后台数据绑定来控制前端页面哪些操作按钮需要渲染,哪些操作按钮不需要渲染, 大体的方案是: 在原有的按钮标签外再套一层按钮权限控制标签,然后每个具体的按钮对照 ...
- jquery与js添加子元素
例如在select中添加option JQuery做法: <select id="myselect" name="myselect"> </s ...
- 《Ext JS模板与组件基本框架图----组件》
本节主要从七个方面讲解组件,组件时什么,它的作用,它的构架,以及怎么创建和周期还有常见的配置项,属性方法和事件以及其层级是什么都进行整理,希望对大家有帮助. 组件的基础知识.png 2 Abstrac ...
- 【翻译】探究Ext JS 5和Sencha Touch的布局系统
原文:Exploring the Layout System in Ext JS 5 and Sencha Touch 布局系统是Sencha框架中最强大和最有特色的一个部分. 布局要处理应用程序中每 ...
- Ext JS学习第六天 Ext_window组件(三)
此文用来记录学习笔记: 今天再来一个例子巩固一下学习的window: –例2: 在window中添加子组件,并讲解常用查找组件的方式: •重点分析:该实例主要针对于组件的查找进行详细的讲解,在以后的应 ...
- Ext JS 6学习文档-第5章-表格组件(grid)
Ext JS 6学习文档-第5章-表格组件(grid) 使用 Grid 本章将探索 Ext JS 的高级组件 grid .还将使用它帮助读者建立一个功能齐全的公司目录.本章介绍下列几点主题: 基本的 ...
- Vue.js 子组件的异步加载及其生命周期控制
前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...
随机推荐
- CodeViz代码可视化
安装可以参见,http://blogimg.chinaunix.net/blog/upfile2/091119203927.pdf 结合pdf教程,这里说下注意事项: 1 ) 必须先安装GRAPHVI ...
- Quartz Job基本示例
项目中用到job的主要是各种公告,比如活动开始公告这种,以此为例: public class Domain { public Domain() { AnnounceManager.getIns().s ...
- LINK1123:failure during conversion to COFF:file invalid or corrupt
参考 http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=20726500&id=4528320 试了微软官方说明:http ...
- 创建新用户,连接Oracle数据库
1.sys用户是最高管理员用户,那我们就用这个sys用户登录oracle:
- python--基础学习(五)参数位置传递、关键字传递、包裹传递及解包裹
python系列均基于python3.4环境 1.位置传递和关键字传递 代码示例 #位置传递 def fun(a,b,c): print("a: {0}, b: {1}, c: {2}&qu ...
- UML大战需求分析——阅读笔记02
类图是理解面向对象思想的强有力工具,也是业务概念模型分析中最常用的一种UML图.对开发人员来说,并不是对每一个业务流程都很熟练,在客户那里传达过来的需求资料中,有很多术语会把思绪搞晕,他们之间错综复杂 ...
- 滚动div至底部
document.getElementById("chat").scrollTop=document.getElementById("chat").scroll ...
- php 冒泡 快速 选择 插入算法 四种基本算法
php四种基础算法:冒泡,选择,插入和快速排序法 来源:PHP100中文网 | 时间:2013-10-29 15:24:57 | 阅读数:120854 [导读] 许多人都说 算法是程序的核心,一个程序 ...
- php实现数据库数据读取生成缓存文件
有些时候我们希望减少对数据库的 查询来提高程序的性能,因为这些数据不是经常变更的,而是会在很长一段时间内都不会变化,因此,我们每连接一次数据库,都会把相应的结果用文件的形式保存 起来.比如对于一个商城 ...
- SQLite 创建自增长标识列
SQLite Autoincrement(自动递增) SQLite 的 AUTOINCREMENT 是一个关键字,用于表中的字段值自动递增.我们可以在创建表时在特定的列名称上使用 AUTOINCREM ...