Ext.js中组件简要说明

JavaScript010

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

调整方法如下:

1.打开浏览器的,使用浏览器的开发者工具,使用选择工具,选中该元素。

2.因为是选中后才会有的,所以如果在调试器定位到对应的元素,新增类跟伪元素都会消失。

3.点击开发者工具窗体右上角的...,选择“Searchallfiles”。

4.在查询文本框中输入x-grid-item-focus

5.单击查找到的文件,定位到scss(此处为含有伪类的)文件

我不是资深的,但是我也用了EXT几个月了,已经做了一个相关项目,我认为学习EXT基础是JavaScript,ajax也去了解一下,另外最好有一个完整的例子+较好的书(推荐EXT深入详解+EXT源码解析..)+百度/GOOGLE