Ext中所有的组件都继承自Ext.component,这种单根继承的模型保证所有组件都拥有相同的通用方法与生命周期,这样在后续对这些组件进行维护管理时将更加便捷,同时也保证了在进行布局时的便利。

组件最常见的几项功能包含initComponent()、render()、show()和hide(),无论是哪一种组件都是通过初始化、渲染、显示、隐藏来实现其整个生命周期的。

作为基类Ext.Component本身不包含任何格式,我们需要在使用时为它指定渲染的HTML内容,通过HTML参数传入。

Ext.Panel例子:

Ext.onReady(function(){
    var box = new Ext.Panel({
        el: 'springok',  //对应html中定义的<div id="springok"></div> id值
        title:'springok标题',   //panel标题
        floating:true,  //是否飘逸
        draggable:true,  //是否拖拽
        html:'springok内容', //显示的内容
        pageX:100,  //x值
        pageY:50,    //y值
        width:200,   //宽度
        height:150   //高度
    });
    box.render();  //调用渲染方法
});

测试:

Ext.Component例子

 var box1 = new Ext.Component({
        el: 'springok1',
        style:'background-color:red;position:absolute',
        pageX:300,
        pageY:50,
        width:200,
        height:150
    });
    box1.render();
测试:

二者的区别:

——Ext.Panle是Ext中经常用到的一个组件,它直接继承自Ext.Container。一般继承Panle可以扩展自己的业务显示数据。与Component不同的是,Ext.panel无须继承其他类就可以直接使用。

ExtJS学习(二)Ext组件模型的更多相关文章

  1. ExtJS4.2学习(二)Ext统一组件模型——Panel

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-06/171.html --------------- ...

  2. ExtJS学习(一)Ext自定义类实现

    工作中项目需要extjs,所以学习一下,做个笔记防止遗忘了.以后回忆起来也方便. 首先下载extjs官网地址:http://extjs.org.cn/ 下载以后的目录结构: 先写一个入门的程序吧自定义 ...

  3. Extjs 学习总结-Ext.define自定义类

    本教程整理了extjs的一些基本概念及其使用,包括自定义类(Ext.define).数据模型.代理等.本节介绍使用Ext.define自定义类 使用Ext.define自定义类 1. 首先看看js中自 ...

  4. extjs学习之Ext.selection.CheckboxModel

    Ext.onReady( function() { var store=Ext.create('Ext.data.Store', { storeId:'simpsonsStore', fields:[ ...

  5. Extjs学习笔记--Ext.tree.Panel

    Ext.create('Ext.tree.Panel', { title: 'Simple Tree', width: 200, height: 150, store: store, rootVisi ...

  6. 20. Extjs学习笔记——Ext.data.JsonStore使用说明

    Ext.data.JsonStore继承于Ext.data.Store,使得从远程JSON数据创建stores更为方便的简单辅助类.JsonStore合成了Ext.data.HttpProxy与Ext ...

  7. Extjs学习笔记——Ext.data.JsonStore使用说明

    Ext.data.JsonStore继承于Ext.data.Store.使得从远程JSON数据创建stores更为方便的简单辅助类. JsonStore合成了Ext.data.HttpProxy与Ex ...

  8. extjs 学习笔记(二)

    EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...

  9. DjangoRestFramework学习二之序列化组件、视图组件 serializer modelserializer

      DjangoRestFramework学习二之序列化组件.视图组件   本节目录 一 序列化组件 二 视图组件 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 序列化组 ...

随机推荐

  1. [BZOJ]1050 旅行comf(HAOI2006)

    图论一直是小C的弱项,相比其它题型,图论的花样通常会更多一点,套路也更难捉摸. Description 给你一个无向图,N(N<=500)个顶点, M(M<=5000)条边,每条边有一个权 ...

  2. VM11 CentOS6.7 i386 安装 oracle 11g r2

    CentOS 6.7 i386:最小桌面版本--中文1.网络配置 ifup eht0 vim /etc/sysconfig/network-scripts/ifcfg-eth0 修改:NBOOT=ye ...

  3. C++变量和基本类型——2.3.1引用

    引用:为对象起了另外一个名字,通常将申明符写成&d的形式来定义引用类型,其中d是申明的变量名: int ival =1024; int &refVal=ival 一般在初始化变量时,初 ...

  4. Chinese-Text-Classification:Tensorflow CNN 模型实现的中文文本分类器[不分词版]

    从现在的结果来看,分词的版本准确率稍微高一点. 训练过程: 模型评估: 实验三,准备换一下数据集,用这里的数据集来跑这个模型:https://zhuanlan.zhihu.com/p/30736422 ...

  5. SecureCRT永久设置保护眼睛配色方案

    配色后效果如下: 下面开始配色 1.选项(Options)==>会话选项(Sessions options)==>终端(Terminal)==>仿真(Emulation) 按图中标注 ...

  6. koa2+webSocket 聊天室

    做了一个简单的的聊天室,用来看看 koa和 websocket的使用还是挺好的,已经放到gitHub. https://github.com/zhaowanhua/koa2WebSocket

  7. BeanFactory not initialized or already closed - call 'refresh' before accessing beans via the ApplicationContext

    这个坑爹的玩意 有几个出现错误的原因 服务器 1.服务器重复启动同一个部署 这个时候要停止然后启动 电脑差的 重启电脑 重启服务器就好了 代码 2.bean工厂不知道哪里关闭 3.bean工厂没有找到 ...

  8. Lintcode392 Is Subsequence solution 题解

    [题目描述] Given a string s and a string t, check if s is subsequence of t. You may assume that there is ...

  9. web缓存之--http缓存机制

    一.web缓存可以分为数据库缓存.代理服务器缓存.浏览器缓存. 其中浏览器缓存又包含很多内容:http缓存.indexDb.cookie.localStorage等.本片只讨论http缓存相关内容. ...

  10. python笔记十五(面向对象及其特性)

    一.面向对象: class(类):一类拥有共同属性对象的抽象:定义了这些对象的属性和方法object(对象):是一个类实例化后的实例,类必须经过实例化才可以在程序中调用: 由于之前学习过java,对类 ...