ExtJS 3.2 学习笔记（1）

最新推荐文章于 2021-01-14 01:09:12 发布

weixin_33923762

最新推荐文章于 2021-01-14 01:09:12 发布

阅读量127

点赞数

CC 4.0 BY-SA版权

文章标签： python ui

原文链接：https://my.oschina.net/u/937697/blog/135301

本文详细介绍了ExtJS中几个核心组件的功能与使用方法，包括Ext.Component、Ext.BoxComponent、Ext.Container、Ext.Panel 和 Ext.TabPanel等，适合初学者快速入门。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

嗨，开源中国的各位网友大家好，我是开源中国的菜鸟，因为做软件工作这么久一直没注册开源中国账号，很OUT的吧。。。各位见笑了。。

工作也两年多了，做了好几个基于EXTJS的项目，所以对ExtJS有蛮深刻的印象，从今天开始在这里一起和大家学习和分享ExtJS，以后的日志里有错误的还请各位网友多多指教，毕竟我是菜鸟嘛呵呵~~ 由于工作比较忙，又得陪女朋友，所以争取一周写两篇学习笔记，本人文笔比较差，一些定义性的语句不得不摘抄自一些参考书上，各位大虾就不要吐槽我这个菜鸟哈~~~

好啦不废话了。。。

ExtJS 最重要的就是其核心组件，最难掌握的也是这些核心组件的使用，以及配置等等。

今天就主要概括下Extjs 组件，首先看来看一张官网doc截图：

上图是ext组件的继承树。下面我们挑几个枝干来讲：

上面左右组件可笼统分为三类：

1，基本组件 2，工具条组件 3，表单组件

一，Ext.Component

这个类是Ext所有组件的基类，它的所有子类都自动享有标准EXT组件的生命周期，包括创建，渲染，销毁，隐藏，显示，启用，禁用等。

二，Ext.BoxComponent

Ext.BoxComponent是一个比较重要的基础类，它直接继承自Component，并且实现了定位和控制自身大小的功能。其实，顾名思义，从Box这个单词就能看出来这个类的作用。看一个代码：

var box=new Ext.BoxComponent({
      el:'test',
      style:'.....样式代码....',
      pageX:100,
      pageY:100,
      width:500,
      height:100
});
 box.render();

从代码可以看出，pageX，pageY分别设置了面板在平面坐标轴上的位置，当然也包括宽度和高度的设置。说明了 BoxComponent 这个类里头实现了设置面板大小和位置的功能，如果要制作一个具有可控制大小和位置的组件，可以直接从Ext.BoxComponent继承。（备注：代码中的el 表示要渲染的位置，其实也可以用renderTo，但是使用el需要手动渲染，例如代码中的box.render()；而使用renderTo则会在加载代码后自动渲染到指定位置。

三，Ext.Container

Ext.Container是继承自Ext.BoxComponent，除了拥有可以设置自身大小和面板位置之外，它提供了layout和items 两个参数。 layout参数配置指定当前所用哪一种布局；items参数包含的是当前组件中的所有子组件。

正是由于Ext.Container提供了layout参数，所以Ext.Container是一个可以布局组件的超类，关于布局我打算放在下一节学习。今天继续学习其他组件。。

四，Ext.panel

Ext.panel是我们项目中最常用的一个组件，从继承图中可以看出它直接继承自Ext.Container。既然是最常用的，那也就是说这个组件可以直接使用而不需要继承，也就是说我们可以直接用这个类的对象来渲染出一个真实的看得见的UI，我们来看个代码：

var panel=new Ext.Panel({
     title:'测试面板',
     el:'test1',
     shadow:true,
     draggable:true,
     collapsilble:true,
     pageX:100,
     pageY:100,
     width:100,
     height:100,
     html:'测试内容',
     floating:true
});
   panel.render()

代码中：shadow为true时候表示用来在panel后面显示一个阴影，draggable可拖拉配置，collapsilble可伸展配置，floating 为true表示为浮动面板，当为false时候在渲染的地方以内嵌的方式显示panel，也就是没有阴影的，这个也是默认值。html 填充panel内容，顾名思义html也可以包含html标签，ext也会渲染所包含的标签。

五，Ext.TabPanel

官网称这个为选项卡面板，我更喜欢叫做可切换面板，直接看代码:

var tabs=new Ext.TabPanel({
    renderTo:'test2',
    height:100
});
   tabs.add({
    title:'测试1',
    html:'内容1'
});
  tabs.add({
      title:'测试1',
     autoLoad:{url:'xxx.html',scripts:true},
      closable:true
});
  tabs.activate(0);

首先定义一个可切换面板，然后为面板添加两个子面板（当未指定xtype时候，默认为xtype为panel ），

然后使用activate()函数显示第一个面板。代码中renderTo指定面板要渲染的位置，并且无需手动渲染。第二个子面板的closable为true表示可以关闭该面板。

第二个面板的autoLoad表示自动从xxx.html 加载页面内容,scripts为ture表示执行xxx.html中js代码(如果有的话)。

当然以后我们还可以往tabpanel中添加各种复杂的组件，在实际项目中tabpanel更多时候都充当一个容器用来承载要显示。

今天先到这里，下一篇我们学习ExtJS的布局。

转载于:https://my.oschina.net/u/937697/blog/135301