ExtJS框架学习笔记

阅读更多

2017-6-26
Ext.Message.show()是一个用于提示信息的函数，功能很强大，因为它可以在提示框中加入其它组件，如prompt，button等；
当有复杂的内容时可以用show函数，当内容并不怎么复杂时可以按情况选取相应的提示函数；
Ext.Message.wait()是一个自动的进度加载函数；
TaskManager是一个管理类；
Ext.MessageBox
这是一个用来生成各种消息窗口的类，Ext.Msg也可以同样使用。这是一个异步的消息窗口。异步：指的是js执行到这一步的时候消息的窗口虽然还没关闭，但是程序还会跑下去，不会是阻塞状态。因此，当程序需要获得messageBox这种的信息时就不能这样使用该类产生消息窗口，或者穿件callback函数。
有alert、confirm、prompt、show等
Ext.ProcessBar
进度更新组件，支持两种格式的更新条：自动更新和手动更新。
手动更新时，用户需要为更新设计展示、更新和清除更新条。
自动更新时，用户只需要触发更新条时间，并在等时间过了后，组件会自动停止刷新进程。在使用时，先通过Ext.create 函数来创建一个Ext.ProcessBar对象或new一个Ext.ProcessBar对象,再让该对象调用wait函数就可以实现进度条的展示了。
Ext.toolbar
这是一个生成工具栏的组件。在使用的时候需要向创建一个Ext.toolbar.Toolbar对象，在创建时，使用renderTo来设置该对象将要放置的位置。在生成一个Toolbar对象后，调用该对象的add函数来加入按钮等内容
Ext.menu
这是一个生成菜单的组件。首先，菜单都是加载工具栏中，所以一般会在生成一个工具栏后再将菜单加入到工具栏中。同样的，在使用该组件时，需要创建menu对象，并通过items来设定菜单的内容，当然，菜单的内容也可以是一个菜单，这样就实现了多级菜单。当然，菜单的内容也可以时其它的组件。
Ext.form
表单组件。用于生成表单组件，同时还具有限制输入的内容、对输入的内容进行验证，提交表单的内容，加载数据的功能。
defaults是用来设置表当的默认属性，可以在这个地方设置所有的表单元素相同的属性。
items来生成具体的内容，如文本框，单选框等。
每个item中xtype是设置表单元素的样式：输入框，单选框等。
Ext.QuickTips.init()这个是用来让带有data-qtip属性的HTML标签能够在鼠标移上去的时候显示其内容，而其显示的内容是data-qtip属性的值，当然，quickTips只是一种tips，还有其他很多种tips；

2017-6-27
Ext.panel
Ext.panel.Panel扩展自Ext.container.Container，用于应用的布局，也可以作为各个组件的的容器，即可以将各种组件加到panel里面。标准的panel有5部分组件：
title、tbar、bbar、html、tools、buttons
其中tools是主要是用来设置面板头部的右上角的各类按钮，每个按钮是一个Ext.panel.Tool对象，同样的，panel的使用和form类似，直接创建对象，创建对象的使用用renderTo来制定该组件再页面上显示的位置。
panel组件可以通过autoLoad属性来加载远程页面，用contentEl来加载本地资源。
和form类似，penal组件使用items来引入其他的组件，可以是日期组件，可以是本地资源。
penal组件使用layout属性来设置窗口内容布局，可以是auto，可以是fit（自适应），可以是Accordion（折叠布局：只有一个内部窗口展开），还可以是card（卡片式布局）。
还有一种设置布局的方式是使用ANchor锚点布局，只是该方法不仅需要在layout属性里面设置为anchor，而是还需要在子组件中设置Anchor属性（可以是相对于父面板的大小，偏移量）
另一种布局方式是Absolute，与anchor类似，只不过Absolute在子面板中是设置x，y属性。
column布局是另一种比较有用的布局方式，可以在子组件内设置columnWidth来确定其宽度。
table布局是可以指定子组件的列数（column）、跨行（rowspan）、跨列（colspan）。rowspan和colspan是只能在子组件的属性内设置，而column是在layout中设置。
border布局是将面板分成东（east）西（west）南（south）北（north）中（center）这五个部分，在子组件的region属性中指定该子组件的位置。注意的时子组件不一定需要是面板。也可以时datapicker（时间选择）组件。
Box布局分两种：vbox（垂直）和hbox（水平）可以在layout中设置align来控制子元素的位置和大小，另外在子元素中设置flex可以调整整个组件的大小。（根据该子元素的flex与所有子元素flex值之和相比较来确定子面板的大小）
Ext.container.Viewport
该组件不需要设置renderTo，因为该组件时将document body作为渲染对象，也就是说该组件生成的面板是直接插入到body中的，经测试时放在body所有子元素的最后面。该组件的面板始终充满整个浏览器的界面（浏览器界面变化时，面变也变化）。其布局可参考Ext.panel.Panel的布局。
Ext.tab.Panel
这是一个页签组件，一般情况下有多个tab同事存在，但只有一个是处于活动状态。
Ext工具函数
Ext.get
获取HTML中的Element，DOM中的Element元素。参数是Element的ID，也可以时一个DOM节点，更可以是一个存在的HTML Element。返回值是一个Element对象。
Ext.select
基于CSS来获取应用了该样式表的对象
Ext.getCmp
用来获取组件的函数，只能获取组件，无法获取到body内的HTML元素，如div等。注意，只能用ID来获取组件。
Ext.getDom
通过指定的ID或者DOM节点或Element元素来获取HTMLElement。
Ext.each
该函数是对一个数组或集合进行迭代，分别对集合中的对象调用制定的函数进行处理。参数是一个数据，一个处理函数 和一个可选的指定范围。其中需要注意的时处理函数的形式必须是fn（item，index，allItems）的形式，item是进行每一轮迭代的集合中那个元素，index为每一轮迭代的下标，allItems是进行迭代的集合
ExtJS的事件
ExtJS的事件绑定处理函数可以通多button的attachEvent函数来实现，参数有两个：字符串形式的事件和处理函数。也可以是addListener函数，参数相同。
ExtJS支持自定义事件。如果想为自定义类添加事件支持需要使该类继承工具类Ext.util.Observable。