ExtJs笔记（二）概念

kattiekattie

于 2023-04-18 23:26:22 发布

阅读量521

点赞数

分类专栏： ExtJs 文章标签：笔记 html javascript

本文链接：https://blog.csdn.net/m0_37925276/article/details/130072192

版权

ExtJs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

e.g.

<html>
   <head>
    <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
    <script src="./ext-6.0.0/build/ext-all.js"></script>
      <script type="text/javascript">
         Ext.onReady(function() {
         Ext.create('Ext.Panel', {
            renderTo: 'helloWorldPanel',
            height: 200,
            width: 600,
            title: 'Hello world',
            html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   <body>
      <div id="helloWorldPanel" />
   </body>
</html>

Ext.onReady（）方法将在Ext JS准备好渲染Ext JS元素时调用。
Ext.create（）方法用于在Ext JS中创建对象，这里我们创建一个简单的面板类Ext.Panel的对象。
Ext.Panel是Ext JS中用于创建面板的预定义类
每个Ext JS类都有不同的属性来执行一些基本的功能

Ext.Panel类有以下各种属性：

renderTo 是此面板必须呈现的元素。 'helloWorldPanel’是Index.html文件中的div id
Height 和宽度属性用于提供面板的自定义尺寸
Title 属性是为面板提供标题
Html 属性是要在面板中显示的html内容

一、Class 系统

Ext.define()用于在 Ext JS 中定义类（Ext 提供了 300 多个类）。

Ext.define(class name, class members/properties, callback function);
//1.类名称： appName.folderName.ClassName
//2.类属性/成员： 定义类的行为
//3.回调函数： 可选

e.g.

Ext.define(studentApp.view.StudentDeatilsGrid, {
   extend : 'Ext.grid.GridPanel',
   id : 'studentsDetailsGrid',
   store : 'StudentsDetailsGridStore',
   renderTo : 'studentsDetailsRenderDiv',
   layout : 'fit',
   columns : [{
      text : 'Student Name',
      dataIndex : 'studentName'
   },{
      text : 'ID',
      dataIndex : 'studentId'
   },{
      text : 'Department',
      dataIndex : 'department'
   }]
});

1. 在ext创建对象:

var studentObject = new student();
studentObject.getStudentName();

Ext.define()

Ext.create('Ext.Panel', {
   renderTo : 'helloWorldPanel',
   height : 100,
   width : 100,
   title : 'Hello world',
   html : 	'First Ext JS Hello World Program'		
});

2. 在ext继承：

Ext.extend

Ext.define(studentApp.view.StudentDetailsGrid, {
   extend : 'Ext.grid.GridPanel',
   ...
});

自定义类 StudentDetailsGrid 使用 Ext JS 类 GridPanel 的基本功能

Mixins
Mixins 是在没有扩展的情况下在类 B 中使用类 A 的不同方式

mixins : {
   commons : 'DepartmentApp.utils.DepartmentUtils'
},

Mixins 添加在控制器中，声明所有其他类，如存储，视图等。
（在这种方式，可以调用 DepartmentUtils 类，并在控制器或在这个应用程序中使用其功能。）

二、容器 container

容器是我们可以添加其他容器或子组件的组件。
可以具有多个布局以将部件布置在容器中，可以从容器和其子元素添加或删除组件。

Ext.container.Container是Ext JS中所有容器的基类。

有各种类型的容器Ext.panel.Panel，Ext.form.Panel，
Ext.tab.Panel和Ext.container.Viewport是Ext JS中经常使用的容器。

三、布局

布局是元素在容器中排列的方式。
可以是水平的，垂直的或任何其他，也可以编写自定义布局。

layout	desc
Auto	默认布局，基于元素的数量
Absolute	允许使用容器中的XY坐标定位项目。
Accordion	允许将所有项目以堆栈方式（一个在另一个之上）放在容器内
Anchor	相对于容器大小给出每个元素的大小
Border	各种面板嵌套并由边界分隔
Card(TabPanel)	以制表符方式排列不同的组件。选项卡将显示在容器的顶部。每次只有一个选项卡可见，每个选项卡被视为不同的组件
Card(Wizard)	每次元素来到完整的容器空间。向导中将有一个底部工具栏用于导航
Column	在容器中显示多个列，可以定义列的固定宽度或百分比宽度
Fit	容器用单个面板填充，(当没有特定要求时，使用该布局)
Table	以HTML表格式在容器中排列组件
vBox	元素以垂直方式分布。这是最常用的布局之一。
hBox	元素以水平方式分布

四、组件

ExtJS的UI由一个或多个名为Components.Ext的widget组成
Grid，Form，Message Box，Chart，Tool tip， Window，HTML editor，Progress bar

五、拖放

拖动操作基本上是在某些UI元素上的点击手势，同时按住鼠标按钮并移动鼠标。在拖动操作后释放鼠标按钮时，会发生放置操作。

kattiekattie

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
ExtJs笔记（二）概念

（在这种方式，可以调用 DepartmentUtils 类，并在控制器或在这个应用程序中使用其功能。Ext.container.Container是Ext JS中所有容器的基类。可以具有多个布局以将部件布置在容器中，可以从容器和其子元素添加或删除组件。用于在 Ext JS 中定义类（Ext 提供了 300 多个类）。Mixins 添加在控制器中，声明所有其他类，如存储，视图等。可以是水平的，垂直的或任何其他，也可以编写自定义布局。容器是我们可以添加其他容器或子组件的组件。是Ext JS中经常使用的容器。
复制链接

扫一扫