Ext.js中组件简要说明

JavaScript020

Ext.js中组件简要说明,第1张

1、使用Ext.container.Container--创建容器

2、使用Ext.panel.Panel--创建面板

3、使用Ext.toolbar.ToolBar--创建工具条

4、使用Ext.tab.Panel--创建Tab面板

5、使用Ext.container.Viewport--整体布局

6、使用Ext.window.Window--创建窗口

7、使用Ext.window.MessageBox--创建对话框

8、使用Ext.menu.CheckItem、Ext.menu.ColorPicker、Ext.menu.DatePicker实现特殊菜单项

9、使用Ext.Ation--创建按钮

10、使用Ext.ProgressBar--创建进度条

11、使用Ext.slider.Single--创建滑动条

12、使用Ext.Img--创建图片

13、使用Ext.Editor--创建编辑器

14、使用Ext.tip.ToolTip--创建提示

15、使用Ext.QuickTipManager和Ext.tip.QuickTip--创建提示

16、使用Ext.ux.GMapPanel实现Google地图

17、使用Ext.form.field.ComboBox--创建复合框

18、使用Ext.data.Store与Ext.data.Model管理数据

19、使用Ext.data.Proxy.Proxy和Ext.data.reader.Reader读取数据

20、使用Ext.grid.Panel--生成表格

21、使用Ext.grid.column.Column-定义列

22、使用Ext.grid.Panel显示远程数据

23、使用Ext.tree.Panel生成数

xtype Class 描述

button Ext.Button 按钮

splitbutton Ext.SplitButton 带下拉菜单的按钮

cycle Ext.CycleButton 带下拉选项菜单的按钮

buttongroup Ext.ButtonGroup 编组按钮(Since 3.0)

slider Ext.Slider 滑动条

progressExt.ProgressBar 进度条

statusbar Ext.StatusBar 状态条,2.2加进来,3.0 又去了

colorpaletteExt.ColorPalette调色板

datepicker Ext.DatePicker 日期选择面板

xtype Class 描述

window Ext.Window 窗口

viewportExt.ViewPort视口,即浏览器的视口,能随之伸缩

box Ext.BoxComponent盒子组件,相当于一个 <div>

component Ext.Component 组件

container Ext.Container 容器

panel Ext.Panel 面板

tabpanelExt.TabPanel选项面板

treepanel Ext.tree.TreePanel 树型面板

flash Ext.FlashComponent 显示 Flash 的组件(Since 3.0)

gridExt.grid.GridPanel 表格

editorgrid Ext.grid.EditorGridPanel可编辑的表格

propertygridExt.grid.PropertyGrid 属性表格

editor Ext.Editor 编辑器

dataviewExt.DataView数据显示视图

listviewExt.ListView列表视图

xtype Class 描述

paging Ext.PagingToolbar 分页工具条

toolbar Ext.Toolbar 工具栏

tbbuttonExt.Toolbar.Button 工具栏按钮

tbfill Ext.Toolbar.Fill工具栏填充区

tbitem Ext.Toolbar.Item工具条项目

tbseparator Ext.Toolbar.Separator 工具栏分隔符

tbspacerExt.Toolbar.Spacer 工具栏空白

tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮

tbtext Ext.Toolbar.TextItem工具栏文本项

xtype Class 描述

menuExt.menu.Menu 菜单

colormenu Ext.menu.ColorMenu 颜色选择菜单

datemenuExt.menu.DateMenu 日期选择菜单

menubaseitemBaseItem

menucheckitem Ext.menu.CheckItem 选项菜单项

menuitemExt.menu.Item

menuseparator Ext.menu.Separator 菜单分隔线

menutextitemExt.menu.TextItem 文本菜单项

xtype Class 描述

formExt.FormPanel/Ext.form.FormPanel表单面板

checkboxExt.form.Checkbox 多选框

combo Ext.form.ComboBox 下拉框

datefield Ext.form.DateField 日期选择项

timefield Ext.form.TimeField 时间录入项

field Ext.form.Field 表单字段

fieldsetExt.form.FieldSet 表单字段组

hidden Ext.form.Hidden 表单隐藏域

htmleditor Ext.form.HtmlEditor HTML 编辑器

label Ext.form.Label 标签

numberfield Ext.form.NumberField数字编辑器

radio Ext.form.Radio 单选按钮

textareaExt.form.TextArea 多行文本框

textfield Ext.form.TextField 表单文本框

trigger Ext.form.TriggerField 触发录入项

checkboxgroup Ext.form.CheckboxGroup 编组的多选框(Since 2.2)

displayfieldExt.form.DisplayField 仅显示,不校验/不被提交的文本框

radiogroup Ext.form.RadioGroup 编组的单选按钮(Since 2.2)

xtype Class 描述

chart Ext.chart.Chart 图表组件

barchartExt.chart.BarChart 柱状图

cartsianchart Ext.chart.CartesianChart

columnchart Ext.chart.ColumnChart

linechart Ext.chart.LineChart 连线图

piechartExt.chart.PieChart 扇形图

xtype Class 描述

arraystore Ext.data.ArrayStore

directstore Ext.data.DirectStore

groupingstore Ext.data.GroupingStore

jsonstore Ext.data.JsonStore

simplestore Ext.data.SimpleStore

store Ext.data.Store

xmlstoreExt.data.XmlStore

ext 不需要安装,它就是普通的js和css,你把它放在你的项目目录里面就可以了。比如,下面这样的目录结果。其中,ext是你的ext-1.1.1解压后的目录,jsp是你自己的jsp文件放的目录,js是你自己的.js文件放的目录,img是你的图片存放的目录。

但是你使用的时候,需要在js或jsp文件里面引入ext的文件。比如:

我的登陆页面使用了ext,那么在登陆页面里面

login.jsp:

    <head>

        <meta http-equiv="Content-Type" content="text/html charset=UTF-8">

        <link rel="stylesheet" type="text/css" href="<c:url value="/view/ext/resources/css/ext-all.css"/>" />

        <script type="text/javascript" src="<c:url value="/view/ext/adapter/ext/ext-base.js"/>"></script>

        <script type="text/javascript" src="<c:url value="/view/ext/ext-all.js"/>"></script>

        <script type="text/javascript" src="<c:url value="/view/js/common/consts.js"/>"></script>

        <script type="text/javascript" src="<c:url value="/view/js/authen/login.js"/>"></script>

        <title>登陆界面</title>

    </head>

其实ext就是普通的js,css和img的集合,不过是由别人编写的罢了,在使用上,和你自己写的js没有什么区别

1、首先,需要先创建一个基本可用的 ExtJS 模板, 这个很简单, 如下所示:

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel="stylesheet" type="text/css" href="http://localhost/ext-4/resources/css/ext-all.css" />

<script type="text/javascript" src="http://localhost/ext-4/ext-debug.js"></script>

</head>

<body>

</body>

</html>

2、需要引用的脚本是 ExtJS 根目录下的 ext-debug.js , 不是 ext-all-debug.js, 这个文件非常小, 只有几百K , 当让这个只是最基本的 ExtJS 组件, 不包括任何的界面功能。

3、配置 Ext.Loader 启用动态加载;

4、ExtJS 中的动态加载是由 Ext.Loader 来完成的, 默认不启用动态加载, 所以接下来需要做的事配置 Ext.Loader 启用动态加载, 在上面模板的 body 标签内添加如下代码:

<script type="text/javascript">

Ext.onReady(function() {

Ext.Loader.setConfig({

enabled: true,

disableCaching: false,

paths: {

Ext : '/ext-4/src'

}

})

})

</script>

注意:上面的代码启用了动态加载, 禁用了浏览器缓存, 以及指定了 ExtJS 的所部署的路径。