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。

你可能感兴趣的:(ExtJS,笔记)