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

在Ext JS的布局系统中,能控制到的是容器的子组件,而对于渲染到容器中一个DIV的Grid,它并不知道在这容器里添加了一个Grid,当调整大小的时候,也就无法去调整Grid的大小了,而这也就是为什么Grid不会随容器的改变而改变了。

为什么那么多人喜欢使用这种方式来添加子组件呢?我想原因主要有以下两点:

  1. 不知道如何在容器内添加子组件,
  2. 习惯了使用JQuery等其他框架的开发方法,一时无法改变

第一个原因,只要是动态添加Grid,搞到很多初学者束手无策,譬如,我的Grid要从远程返回后才知道怎么创建,我怎么去拿这个脚本和添加到容器呢?笔者在学习Ext JS也犯过这样的错误,可以理解。所以,本文的作用就是来解惑的。

办法有两个:一是,使用Ajax把整个Grid(或其他组件的配置对象)加载到本地,然后使用容器的add方法就可以将组件添加到容器;一是直接使用容器的load功能,直接加载子组件并渲染,返回的数据就是子组件的配置对象。

第二个原因是习惯问题,只能自己去修正了,尽快熟悉Ext JS的开发模式就可以很容易改掉这个习惯。

如果是使用Ext JS 4的MVC做开发,基本不会出现这么尴尬的情况了,因而可以将子组件做成视图,然后在控制器中将视图添加到容器中就可以了。

Ext JS添加子组件的误区的更多相关文章

  1. Ext.js添加子组件

    Ext框架提供了很多api,对于不熟悉的人来说,api的释义有时不够明了.最近碰到了添加子组件的需求,特记录下来. 1. 例如,有一个窗体组件: 现在要为其添加一个字段“学校分类”,变成如下所示: 示 ...

  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. Dynamics CRM 安装CRM程序系统检查界面报未将对象引用设置到对象的实例的解决方法

    今天在安装CRM的时候,在系统检查阶段遇到了如下的错误,咋看之下直接是懵逼的 但不要着急,界面上有两个按钮,一个是详细信息,一个是帮助,详细信息不用看了就那一行字也看不出什么,咱们点下帮助看看,定位到 ...

  2. 给pdf文件添加防伪水印logo(附工程源码下载)

    pdf添加水印logo这种需求场景确实很少,有些时候一些销售单据生成pdf添加一个水印logo,做一个简单的防伪效果,虽然实际上并没有太大作用,但是产品经理说要,巴拉巴拉--省略一万字. 下面将源码分 ...

  3. ISP(Interface Segregation Principle),接口隔离原则

    ISP(Interface Segregation Principle),接口隔离原则 它要求如下: ①  一个类对另一个类的依赖性要建立在最小接口上. ②  使用多个专门的接口比使用单一的总接口要好 ...

  4. webstorm工具使用详解

    webstorm简单介绍 官网地址:http://www.jetbrains.com/webstorm/features/index.html 参考地址:http://www.html5jscss.c ...

  5. 3.2、Android Studio在物理设备中运行APP

    当你构建一个Android应用时,在发布给用户之前,在物理设备上测试一下你的应用是非常必要的. 你可以使用Android设备作为运行.调试和测试应用的环境.包含在SDK中的工具让你在编译完成后在设备中 ...

  6. Dynamics CRM 在Visual Studio中开启XML编辑的智能提示

    对于.net开发人员来说Visual Studio这一开发工具自然是再熟悉不过,它强大的功能给我们的编程带来了极大的方便,代码智能提示就属其中一项. 在Dynamic CRM的开发中在各种工具出来之前 ...

  7. 如何找到java对应的c/c++源码

    很多时候java经常被c鄙视,因为c说我是你的基础,但java竟然有如此强的生命力就必然有其存在的价值.本文不探讨各种开发语言的优劣,仅仅介绍如何找到java对应c/c++实现的源码.当我们追究一个j ...

  8. MacOS的菜单状态栏App添加饼型进度

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/52075418 ...

  9. Java在linux下调用C/C++生成的so文件

    1.CplusUtil.java是java web工程中的一个工具类内容如下:CplusUtil.java package cn.undoner.utils; /** * Created by ${& ...

  10. 【一天一道LeetCode】#349. Intersection of Two Arrays

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given t ...