ExtJs学习笔记基本章节Ext组件的使用第1/2页

介绍Ext中的组件，并给出一些简单的例子。注：文章部分内容摘自我在学习期间看到的资料。Ext2.0对框架进行了很大的重构，其中最重要的是形成了结构化、层次化的组件系统，这些组件组成了Ext控件。Ext Component由组件类定义，每个组件都有一个指定的xtype属性值，通过该属性值可以获得组件类型或定义指定类型的组件。Ext组件系统如下图所示：。

组件大致可以分为三类，即基本组件、工具栏组件和表单元素组件。基本组件是。

这么多组件，都很酷。组件可以通过关键字new直接创建，例如创建一个Window box var win=new Ext。Window()如前一篇文章所述；除了这种创建方法之外，通常还会向构造函数中添加一些配置属性来初始化组件。示例：创建一个面板：html headlink rel='样式表' type=' text/CSS ' href=' ext js/resources/CSS/ext-all . CSS '/script src=' http : ext js/ext-base . js ' type=' text/JavaScript '/script script src=' http : ext js/ext-all . js ' type=' text/JavaScript '/script script src=' http : ext js 'var面板=新Ext。小组(参数)；panel . render(' panel ')；}/script/head body输入类型=' button ' onclick=' panel()' value=' display panel ' HR/div id=' panel '/div/body/html key代码：function panel()。{var params={title :' hello '，width :300，height :200，html : ' h1one panel/h1 ' }；var面板=新Ext。小组(参数)；panel . render(' panel ')；} params是用于设置Panle、title: title、width: width、height: height以及html: panel var panel=new Ext显示的内容的参数。小组(参数)；这段代码创建一个面板，并在构造函数中设置面板属性。panel . render(' panel ')；表示页面上div元素的id。代码可以缩写为：复制代码如下： varpanel=new ext . panel({ render to : ' panel '，title :' hello '，width :300，height 3360200，html : ' h1one panel/h1 ' })；

对于组件中的子元素组件，支持以延迟加载的方式创建控件。此时，可以通过将数组直接传递给父容器的项来实现。函数panel(){ var params={ title : ' hello '，width :300，height :200，html 3360' h1one panel/h1 '，items : [new ext。面板({title :' panel1 '，height:100})，新Ext。面板({title:'Panel2 '，height :100 })]}；var面板=新Ext。小组(参数)；panel . render(' panel ')；}

如果我们需要使组件显示不同的效果，我们需要在构造函数中设置参数。因为所有组件都继承自Ext。组件，所有组件可能都有公共属性，如下图所示。

阅读下一页的全文。