Ext框架提供了很多api,对于不熟悉的人来说,api的释义有时不够明了。最近碰到了添加子组件的需求,特记录下来。

1. 例如,有一个窗体组件:

现在要为其添加一个字段“学校分类”,变成如下所示:

示例代码如下:

  1. var items = window.down('fieldset[title=名单信息]'); //查找到fieldset组件
  2. var object = {
  3. xtype: 'combo',
  4. fieldLabel: '学校分类',
  5. name: 'type',
  6. value: '',
  7. store: Ext.create('Ext.data.Store', {
  8. fields: ['type', 'value'],
  9. data: [
  10. {
  11. 'type': '0-1',
  12. 'value': '第0类1'
  13. },
  14. {
  15. 'type': '0-2',
  16. 'value': '第0类2'
  17. },
  18. {
  19. 'type': 'special',
  20. 'value': '第8类'
  21. }
  22. ]
  23. }),
  24. emptyText: '请选择',
  25. queryMode: 'local',
  26. displayField: 'value',
  27. valueField: 'type'
  28. };
  29. items.add(object); //或者用插入法:items.insert(6, object); 6是插入的索引位置
  30. items.doLayout();

用 add 为组件添加新成员,再用 doLayout 方法更新视图。

2. 为grid表格添加一列

  1. var cols = tab.down('grid').columns; //查找到 grid 组件中的列 columns
  2. var object = {
  3. text : '学校分类',
  4. dataIndex : 'type',
  5. width : 80,
  6. editor : {
  7. xtype : 'textfield'
  8. },
  9. renderer : function(val, cellmeta, record, rowIndex, columnIndex, store) { //将接收到的数据变化后再输出
  10. if (val == '0-1') {
  11. return '第0类1';
  12. } else if (val == '0-2') {
  13. return '第0类2';
  14. } else if (val == 'special') {
  15. return '第8类';
  16. }
  17. return val;
  18. }
  19. };
  20.  
  21. cols.splice(4, 0, object);
  22. var nameStore = Ext.create('my.store.NameListStore'); //数据层
  23. tab.down('grid').reconfigure(nameStore, cols);

Ext.js添加子组件的更多相关文章

  1. Ext JS添加子组件的误区

    经常会有人问我,为什么我的Grid不能岁窗口的变得而自动调整.了解后,发现很多人都习惯在渲染子组件的时候将Gird渲染到容器内的一个div里,而这正是问题的所在. 在Ext JS的布局系统中,能控制到 ...

  2. 《Ext JS模板与组件基本知识框架图----模板》

    最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...

  3. React 克隆组件 -- React.cloneElement(可以用来修改子组件属性值,复制子组件,添加子组件)

    项目要求实现按钮级权限,简单来说就是需要通过后台数据绑定来控制前端页面哪些操作按钮需要渲染,哪些操作按钮不需要渲染, 大体的方案是: 在原有的按钮标签外再套一层按钮权限控制标签,然后每个具体的按钮对照 ...

  4. jquery与js添加子元素

    例如在select中添加option JQuery做法: <select id="myselect" name="myselect"> </s ...

  5. 《Ext JS模板与组件基本框架图----组件》

    本节主要从七个方面讲解组件,组件时什么,它的作用,它的构架,以及怎么创建和周期还有常见的配置项,属性方法和事件以及其层级是什么都进行整理,希望对大家有帮助. 组件的基础知识.png 2 Abstrac ...

  6. 【翻译】探究Ext JS 5和Sencha Touch的布局系统

    原文:Exploring the Layout System in Ext JS 5 and Sencha Touch 布局系统是Sencha框架中最强大和最有特色的一个部分. 布局要处理应用程序中每 ...

  7. Ext JS学习第六天 Ext_window组件(三)

    此文用来记录学习笔记: 今天再来一个例子巩固一下学习的window: –例2: 在window中添加子组件,并讲解常用查找组件的方式: •重点分析:该实例主要针对于组件的查找进行详细的讲解,在以后的应 ...

  8. Ext JS 6学习文档-第5章-表格组件(grid)

    Ext JS 6学习文档-第5章-表格组件(grid) 使用 Grid 本章将探索 Ext JS 的高级组件 grid .还将使用它帮助读者建立一个功能齐全的公司目录.本章介绍下列几点主题: 基本的 ...

  9. Vue.js 子组件的异步加载及其生命周期控制

    前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...

随机推荐

  1. Emmet,让你爱上敲代码

    原文链接:http://m.blog.csdn.net/article/details?id=53484535 不错 —— 由 都不要欺负我 分享 Emmet 是一个可用在许多流行文本编辑器上的极大简 ...

  2. .Net中使用无闪刷新控件时提示框不显示

    今天做提示框的时候一直不显示,让我郁闷好久,晚上吃饭的时候问了同事一下,他给了一个思路, 他说可能是因为由于页面中的无闪刷新导致的结果:百度了一下真找到了解决方法 在页面中存在无闪刷新控件的时候提示框 ...

  3. ASP.NET知识总结(5.文件上传 文件下载)

    5.文件上传 ->说明:使用http协议只适合传输小文件,如果想传递大文件,则需要使用插件或者客户  端程序(使用ftp协议) ->客户端操作 <1>为表单添加属性:encty ...

  4. Mac下Boost环境搭建

    Boost,一个功能强大.跨平台.开源而且免费的C++程序库,可以在其官网了解更多:http://www.boost.org,C++标准经过不断的升级完善,现在已经功能越来越吸引人了,Boost开发过 ...

  5. for变量作用域(vc6与vs)

    for变量:写在for循环初始语句中的变量.如:for (int i=1,j=2; i<100; i++) vc6的for变量 int i 的作用域: void func(bool condit ...

  6. Java Arrays类进行数组排序

    排序算法,基本的高级语言都有一些提供.C语言有qsort()函数,C++有sort()函数,java语言有Arrays类(不是Array).用这些排序时,都可以写自己的排序规则. Java API对A ...

  7. eclipse运行速度优化(解决狂读盘、发布慢、CPU100%等问题)

    转自:http://blog.csdn.net/wyp_810618/article/details/8953921 我的ECLIPSE运行时速度奇慢,具体表现为: 1.只要ECLIPSE启动后,硬盘 ...

  8. zookeeper原理及作用

    ZooKeeper是Hadoop Ecosystem中非常重要的组件,它的主要功能是为分布式系统提供一致性协调(Coordination)服务,与之对应的Google的类似服务叫Chubby.今天这篇 ...

  9. block fomating context

    http://www.w3help.org/zh-cn/kb/010/ 它与普通的块框类似,不同之处在于: 1可以包含浮动元素 2可以阻止外边距折叠 3可以防止元素被浮动元素覆盖 placeholde ...

  10. web项目绝对路径与相对路径的问题

    1.绝对路径:就是一个文件url的全部或者磁盘完整的物理地址;例如 http://localhost:8080/navigation/a.jsp就是a.jsp的绝对路径,再例如 D:\TC\a.jsp ...