`
liss
  • 浏览: 844636 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

ExtJs 中 xtype 与组件类的对应表

阅读更多
核心提示:我们在使用 ExtJs 创建组件时最容易理解的当然是用 new Ext.form.TextField({fieldLabel:'姓名', id:'name',width:120});我们还可以直接用 xtype(比如 TextField 对应的 xtype 是 textfield) 的对象形式来创建组件,比如在面板的 items 属性中,尤其是多个
我们在使用 ExtJs 创建组件时最容易理解的当然是用
 
new Ext.form.TextField({fieldLabel:'姓名', id:'name',width:120});

我们还可以直接用 xtype(比如 TextField 对应的 xtype 是 textfield) 的对象形式来创建组件,比如在面板的 items 属性中,尤其是多个组件或需要写许多的 ExtJs 相关代码时就更值得推荐。我们来对照如下形式就知道了:

  1. items[    
  2.   
  3. new Ext.form.TextField({fieldLabel:'姓名', id:'name', width:120}),    
  4.       
  5. new Ext.form.TextField({fieldLabel:'密码', id:'passwd', inputType:'password', width:120}),    
  6.       
  7. new Ext.form.DateField({fieldLabel:'生日', id:'birth', format:'Y年m月d日', width:120})    
  8. ]    
  9. //替换成用 xtype 写法就如下(似乎只是免去了很多的 new ...)    
  10. items[    
  11.        
  12. {xtype:'textfield', fieldLabel:'姓名', id:'name', width:120},    
  13.      
  14. {xtype:'textfield', fieldLabel:'密码', id:'passwd', inputType:'password', width:120},    
  15.       
  16. {xtype:'datefield', fieldLabel:'生日', id:'birth', format:'Y年m月d日', width:120}    
  17. ]  

写 ExtJs  相关代码多了就会用 xtype 的体会,下面是 ExtJs 中各组件的 xtype 与组件类的对应表。不包括 Ext.ux 命名空间中扩展的组件。其实在 Ext API 文档中有此列表,在 API 帮助中查找 Component 打该页面就能看到,即:http://www.extjs.com/deploy/dev/docs/output/Ext.Component.html

基本组件:
xtype Class 描述
button Ext.Button 按钮
splitbutton Ext.SplitButton 带下拉菜单的按钮
cycle Ext.CycleButton 带下拉选项菜单的按钮
buttongroup Ext.ButtonGroup 编组按钮(Since 3.0)
slider Ext.Slider 滑动条
progress Ext.ProgressBar 进度条
statusbar Ext.StatusBar 状态条,2.2加进来,3.0 又去了
colorpalette Ext.ColorPalette 调色板
datepicker Ext.DatePicker 日期选择面板
 
容器及数据类组件
xtype Class 描述
window Ext.Window 窗口
viewport Ext.ViewPort 视口,即浏览器的视口,能随之伸缩
box Ext.BoxComponent 盒子组件,相当于一个 <div>
component Ext.Component 组件
container Ext.Container 容器
panel Ext.Panel 面板
tabpanel Ext.TabPanel 选项面板
treepanel Ext.tree.TreePanel 树型面板
flash Ext.FlashComponent 显示 Flash 的组件(Since 3.0)
grid Ext.grid.GridPanel 表格
editorgrid Ext.grid.EditorGridPanel 可编辑的表格
propertygrid Ext.grid.PropertyGrid 属性表格
editor Ext.Editor 编辑器
dataview Ext.DataView 数据显示视图
listview Ext.ListView 列表视图
 
工具栏组件:
xtype Class 描述
paging Ext.PagingToolbar 分页工具条
toolbar Ext.Toolbar 工具栏
tbbutton Ext.Toolbar.Button 工具栏按钮
tbfill Ext.Toolbar.Fill 工具栏填充区
tbitem Ext.Toolbar.Item 工具条项目
tbseparator Ext.Toolbar.Separator 工具栏分隔符
tbspacer Ext.Toolbar.Spacer 工具栏空白
tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮
tbtext Ext.Toolbar.TextItem 工具栏文本项
 
菜单组件:
xtype Class 描述
menu Ext.menu.Menu 菜单
colormenu Ext.menu.ColorMenu 颜色选择菜单
datemenu Ext.menu.DateMenu 日期选择菜单
menubaseitem BaseItem  
menucheckitem Ext.menu.CheckItem 选项菜单项
menuitem Ext.menu.Item  
menuseparator Ext.menu.Separator 菜单分隔线
menutextitem Ext.menu.TextItem 文本菜单项
 
表单及表单域组件:
xtype Class 描述
form Ext.FormPanel/Ext.form.FormPanel 表单面板
checkbox Ext.form.Checkbox 多选框
combo Ext.form.ComboBox 下拉框
datefield Ext.form.DateField 日期选择项
timefield Ext.form.TimeField 时间录入项
field Ext.form.Field 表单字段
fieldset Ext.form.FieldSet 表单字段组
hidden Ext.form.Hidden 表单隐藏域
htmleditor Ext.form.HtmlEditor HTML 编辑器
label Ext.form.Label 标签
numberfield Ext.form.NumberField 数字编辑器
radio Ext.form.Radio 单选按钮
textarea Ext.form.TextArea 多行文本框
textfield Ext.form.TextField 表单文本框
trigger Ext.form.TriggerField 触发录入项
checkboxgroup Ext.form.CheckboxGroup 编组的多选框(Since 2.2)
displayfield Ext.form.DisplayField 仅显示,不校验/不被提交的文本框
radiogroup Ext.form.RadioGroup 编组的单选按钮(Since 2.2)
 
图表组件:
xtype Class 描述
chart Ext.chart.Chart 图表组件
barchart Ext.chart.BarChart 柱状图
cartsianchart Ext.chart.CartesianChart  
columnchart Ext.chart.ColumnChart  
linechart Ext.chart.LineChart 连线图
piechart Ext.chart.PieChart 扇形图
 
数据集 Store:
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  
xmlstore Ext.data.XmlStore  

另外:关于 ExtJs 如何依据 xtype 创建对应组件这里只简单的说一句,ExtJs 的组件是通过 Ext.ComponentMgr 来管理的,组件类会以 xtype 为 key 注册到 ComponentMgr 中,用 xtype 形式时就通过 ComponentMgr 来创建 xtype 对应的组件。ComponentMgr 如何对组件进行管理下面会进一步深入探究。

假如想要获得 xtype 与组件最完整的列表,有两种办法:

1. ExtJs 运行后,遍历 ComponentMgr 的 types{} 哈稀属性,这个属性是私有的,需改源代使之为公有,存储结构为{button:Ext.Button, cycle:Ext.CycleButton}

2. 用 grep 从 ExtJs 源代码中搜寻出来。在组件的 JS 代码(如 Button.js) 中会用 Ext.reg('button', Ext.Button) 形式注册,所以下面我用移植到 Windows 上的 GNU grep 程序从源代码中扒出所有的 xtype 及对应的组件类来。

核心代码中的 xtype 组件

E:\Study ExtJS>grep -do Ext.reg\(' extjs3.0\src\*.js
extjs3.0\src\widgets\BoxComponent.js:Ext.reg('box', Ext.BoxComponent);
extjs3.0\src\widgets\BoxComponent.js  Ext.reg('spacer', Ext.Spacer);
extjs3.0\src\widgets\Button.js:Ext.reg('button', Ext.Button);
extjs3.0\src\widgets\ButtonGroup.js:Ext.reg('buttongroup', Ext.ButtonGroup);
extjs3.0\src\widgets\ColorPalette.js:Ext.reg('colorpalette', Ext.ColorPalette);
extjs3.0\src\widgets\Component.js:Ext.reg('component', Ext.Component);
extjs3.0\src\widgets\Container.js:Ext.reg('container', Ext.Container);
extjs3.0\src\widgets\CycleButton.js:Ext.reg('cycle', Ext.CycleButton);
extjs3.0\src\widgets\DataView.js:Ext.reg('dataview', Ext.DataView);
extjs3.0\src\widgets\DatePicker.js:Ext.reg('datepicker', Ext.DatePicker);
extjs3.0\src\widgets\Editor.js:Ext.reg('editor', Ext.Editor);
extjs3.0\src\widgets\PagingToolbar.js:Ext.reg('paging', Ext.PagingToolbar);
extjs3.0\src\widgets\Panel.js:Ext.reg('panel', Ext.Panel);
extjs3.0\src\widgets\ProgressBar.js:Ext.reg('progress', Ext.ProgressBar);
extjs3.0\src\widgets\Slider.js:Ext.reg('slider', Ext.Slider);
extjs3.0\src\widgets\SplitButton.js:Ext.reg('splitbutton', Ext.SplitButton);
extjs3.0\src\widgets\TabPanel.js:Ext.reg('tabpanel', Ext.TabPanel);
extjs3.0\src\widgets\Toolbar.js:Ext.reg('toolbar', Ext.Toolbar);
extjs3.0\src\widgets\Toolbar.js  Ext.reg('tbitem', T.Item);
extjs3.0\src\widgets\Toolbar.js  Ext.reg('tbseparator', T.Separator);
extjs3.0\src\widgets\Toolbar.js  Ext.reg('tbspacer', T.Spacer);
extjs3.0\src\widgets\Toolbar.js  Ext.reg('tbfill', T.Fill);
extjs3.0\src\widgets\Toolbar.js  Ext.reg('tbtext', T.TextItem);
extjs3.0\src\widgets\Toolbar.js  Ext.reg('tbbutton', T.Button);
extjs3.0\src\widgets\Toolbar.js  Ext.reg('tbsplit', T.SplitButton);
extjs3.0\src\widgets\Viewport.js:Ext.reg('viewport', Ext.Viewport);
extjs3.0\src\widgets\Window.js:Ext.reg('window', Ext.Window);
extjs3.0\src\widgets\tree\TreePanel.js:Ext.reg('treepanel', Ext.tree.TreePanel);
extjs3.0\src\widgets\menu\BaseItem.js:Ext.reg('menubaseitem', Ext.menu.BaseItem);
extjs3.0\src\widgets\menu\CheckItem.js:Ext.reg('menucheckitem', Ext.menu.CheckItem);
extjs3.0\src\widgets\menu\ColorMenu.js:Ext.reg('colormenu', Ext.menu.ColorMenu);
extjs3.0\src\widgets\menu\DateMenu.js: Ext.reg('datemenu', Ext.menu.DateMenu);
extjs3.0\src\widgets\menu\Item.js:Ext.reg('menuitem', Ext.menu.Item);
extjs3.0\src\widgets\menu\Menu.js:Ext.reg('menu', Ext.menu.Menu);
extjs3.0\src\widgets\menu\Separator.js:Ext.reg('menuseparator', Ext.menu.Separator);
extjs3.0\src\widgets\menu\TextItem.js:Ext.reg('menutextitem', Ext.menu.TextItem);
extjs3.0\src\widgets\list\ListView.js:Ext.reg('listview', Ext.ListView);
extjs3.0\src\widgets\grid\EditorGrid.js:Ext.reg('editorgrid', Ext.grid.EditorGridPanel);
extjs3.0\src\widgets\grid\GridPanel.js:Ext.reg('grid', Ext.grid.GridPanel);
extjs3.0\src\widgets\form\Checkbox.js:Ext.reg('checkbox', Ext.form.Checkbox);
extjs3.0\src\widgets\form\CheckboxGroup.js:Ext.reg('checkboxgroup', Ext.form.CheckboxGroup);
extjs3.0\src\widgets\form\Combo.js:Ext.reg('combo', Ext.form.ComboBox);
extjs3.0\src\widgets\form\DateField.js:Ext.reg('datefield', Ext.form.DateField);
extjs3.0\src\widgets\form\DisplayField.js:Ext.reg('displayfield', Ext.form.DisplayField);
extjs3.0\src\widgets\form\Field.js:Ext.reg('field', Ext.form.Field);
extjs3.0\src\widgets\form\FieldSet.js:Ext.reg('fieldset', Ext.form.FieldSet);
extjs3.0\src\widgets\form\Form.js:Ext.reg('form', Ext.FormPanel);
extjs3.0\src\widgets\form\Hidden.js:Ext.reg('hidden', Ext.form.Hidden);
extjs3.0\src\widgets\form\HtmlEditor.js:Ext.reg('htmleditor', Ext.form.HtmlEditor);
extjs3.0\src\widgets\form\Label.js:Ext.reg('label', Ext.form.Label);
extjs3.0\src\widgets\form\NumberField.js:Ext.reg('numberfield', Ext.form.NumberField);
extjs3.0\src\widgets\form\Radio.js:Ext.reg('radio', Ext.form.Radio);
extjs3.0\src\widgets\form\RadioGroup.js:Ext.reg('radiogroup', Ext.form.RadioGroup);
extjs3.0\src\widgets\form\TextArea.js:Ext.reg('textarea', Ext.form.TextArea);
extjs3.0\src\widgets\form\TextField.js:Ext.reg('textfield', Ext.form.TextField);
extjs3.0\src\widgets\form\TimeField.js:Ext.reg('timefield', Ext.form.TimeField);
extjs3.0\src\widgets\form\TriggerField.js:Ext.reg('trigger', Ext.form.TriggerField);
extjs3.0\src\widgets\chart\Chart.js:Ext.reg('chart', Ext.chart.Chart);
extjs3.0\src\widgets\chart\Chart.js  Ext.reg('piechart', Ext.chart.PieChart);
extjs3.0\src\widgets\chart\Chart.js  Ext.reg('cartesianchart', Ext.chart.CartesianChart);
extjs3.0\src\widgets\chart\Chart.js  Ext.reg('linechart', Ext.chart.LineChart);
extjs3.0\src\widgets\chart\Chart.js  Ext.reg('columnchart', Ext.chart.ColumnChart);
extjs3.0\src\widgets\chart\Chart.js  Ext.reg('stackedcolumnchart', Ext.chart.StackedColumnChart);
extjs3.0\src\widgets\chart\Chart.js  Ext.reg('barchart', Ext.chart.BarChart);
extjs3.0\src\widgets\chart\Chart.js  Ext.reg('stackedbarchart', Ext.chart.StackedBarChart);
extjs3.0\src\widgets\chart\FlashComponent.js:Ext.reg('flash', Ext.FlashComponent);
extjs3.0\src\data\ArrayStore.js:Ext.reg('arraystore', Ext.data.ArrayStore);
extjs3.0\src\data\ArrayStore.js  Ext.reg('simplestore', Ext.data.SimpleStore);
extjs3.0\src\data\DirectStore.js:Ext.reg('directstore', Ext.data.DirectStore);
extjs3.0\src\data\GroupingStore.js:Ext.reg('groupingstore', Ext.data.GroupingStore);
extjs3.0\src\data\JsonStore.js:Ext.reg('jsonstore', Ext.data.JsonStore);
extjs3.0\src\data\Store.js:Ext.reg('store', Ext.data.Store);
extjs3.0\src\data\XmlStore.js:Ext.reg('xmlstore', Ext.data.XmlStore);



example 中有如  Ext.ux 样的 xtype 组件

E:\Study ExtJS>grep -do Ext.reg\(' extjs3.0\examples\*.js
extjs3.0\examples\init.js:Ext.reg('samplespanel', Ext.samples.SamplePanel);
extjs3.0\examples\ux\ColumnNodeUI.js:Ext.reg('columntree', Ext.ux.tree.ColumnTree);
extjs3.0\examples\ux\FileUploadField.js:Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);
extjs3.0\examples\ux\GMapPanel.js:Ext.reg('gmappanel', Ext.ux.GMapPanel);
extjs3.0\examples\ux\GroupTab.js:Ext.reg('grouptab', Ext.ux.GroupTab);
extjs3.0\examples\ux\GroupTabPanel.js:Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);
extjs3.0\examples\ux\ItemSelector.js:Ext.reg('itemselector', Ext.ux.form.ItemSelector);
extjs3.0\examples\ux\MultiSelect.js:Ext.reg('multiselect', Ext.ux.form.MultiSelect);
extjs3.0\examples\ux\Portal.js:Ext.reg('portal', Ext.ux.Portal);
extjs3.0\examples\ux\PortalColumn.js:Ext.reg('portalcolumn', Ext.ux.PortalColumn);
extjs3.0\examples\ux\Portlet.js:Ext.reg('portlet', Ext.ux.Portlet);
extjs3.0\examples\ux\SelectBox.js:Ext.reg('selectbox', Ext.ux.form.SelectBox);
extjs3.0\examples\ux\SpinnerField.js:Ext.reg('spinnerfield', Ext.ux.form.SpinnerField);
extjs3.0\examples\ux\StatusBar.js:Ext.reg('statusbar', Ext.ux.StatusBar);
extjs3.0\examples\ux\ux-all-debug.js:Ext.reg('columntree', Ext.ux.tree.ColumnTree);
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('gmappanel', Ext.ux.GMapPanel); Ext.ns('Ext.ux.grid');
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('grouptab', Ext.ux.GroupTab);
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);/*
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('itemselector', Ext.ux.form.ItemSelector);
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('multiselect', Ext.ux.form.MultiSelect);
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('portal', Ext.ux.Portal);
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('portalcolumn', Ext.ux.PortalColumn);
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('portlet', Ext.ux.Portlet);
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('selectbox', Ext.ux.form.SelectBox);
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('spinnerfield', Ext.ux.form.SpinnerField);
extjs3.0\examples\ux\ux-all.js: grep: input lines truncated - result questionable
extjs3.0\examples\key-feed-viewer\FeedGrid.js:Ext.reg('appfeedgrid', FeedGrid);
extjs3.0\examples\key-feed-viewer\FeedPanel.js:Ext.reg('appfeedpanel', FeedPanel);
extjs3.0\examples\key-feed-viewer\MainPanel.js:Ext.reg('appmainpanel', MainPanel);
extjs3.0\examples\image-organizer\imgorg\AlbumsPanel.js:Ext.reg('img-albumspanel', Imgorg.AlbumsPanel);
extjs3.0\examples\image-organizer\imgorg\AlbumsPanel.js  Ext.reg('img-album', Imgorg.Album);
extjs3.0\examples\image-organizer\imgorg\AlbumTree.js:Ext.reg('img-albumtree', Imgorg.AlbumTree);
extjs3.0\examples\image-organizer\imgorg\DirectCombo.js:Ext.reg('img-tagcombo', Imgorg.TagCombo);
extjs3.0\examples\image-organizer\imgorg\DirectCombo.js  Ext.reg('img-tagmulticombo', Imgorg.TagMultiCombo);
extjs3.0\examples\image-organizer\imgorg\DirectCombo.js  Ext.reg('img-albumcombo', Imgorg.AlbumCombo);
extjs3.0\examples\image-organizer\imgorg\ImageDv.js:Ext.reg('img-dv', Imgorg.ImageDv);
extjs3.0\examples\image-organizer\imgorg\ImagePanel.js:Ext.reg('img-panel',Imgorg.ImagePanel);
extjs3.0\examples\image-organizer\imgorg\ImageThumbPanel.js:Ext.reg('img-thumbpanel', Imgorg.ImageThumbPanel);
extjs3.0\examples\image-organizer\imgorg\MultiCombo.js:Ext.reg('multicombo', Ext.ux.MultiCombo);
extjs3.0\examples\image-organizer\imgorg\UploadQueue.js:Ext.reg('img-uploadqueue', Imgorg.UploadQueue);
extjs3.0\examples\grid\binding-with-classes.js:Ext.reg('bookgrid', App.BookGrid);
extjs3.0\examples\grid\binding-with-classes.js  Ext.reg('bookdetail', App.BookDetail);
extjs3.0\examples\grid\binding-with-classes.js  Ext.reg('bookmasterdetail', App.BookMasterDetail);
extjs3.0\examples\feed-viewer\FeedGrid.js:Ext.reg('appfeedgrid', FeedGrid);
extjs3.0\examples\feed-viewer\FeedPanel.js:Ext.reg('appfeedpanel', FeedPanel);
extjs3.0\examples\feed-viewer\MainPanel.js:Ext.reg('appmainpanel', MainPanel);
分享到:
评论

相关推荐

    extjs的xtype class对照表

    `xtype` 与对应的`class` 关联,`class` 是组件的实际JavaScript类,包含组件的完整功能和行为。 以下是一些主要的ExtJS `xtype` 和其对应的`class`: 1. **面板(Panel)** - `xtype: 'panel'` 对应的类是 `Ext....

    extjs xtype

    `xtype`是EXTJS中组件的简写形式,可以理解为组件的标识符,用于创建组件实例时引用已定义的组件类。通过使用`xtype`,开发者可以简化代码,减少重复,并提高代码的可读性和维护性。 例如,当你想要创建一个按钮,...

    extJs xtype 类型

    ### ExtJS xtype 类型概述 在ExtJS框架中,`xtype`是一种用于标识特定组件类型的简短...以上是ExtJS中主要的`xtype`类型及其对应类的概述。通过对这些组件的理解和掌握,开发者可以更高效地构建复杂的Web应用程序。

    ExtJs xtype一览

    在ExtJs框架中,`xtype`是用于定义组件类型的扩展类型。这是一种简化的组件标识方式,使得开发者可以更方便地在配置文件或代码中指定组件类型,而无需完整地写出对应的类名。下面,我们将根据提供的内容对ExtJs中的...

    ExtJs_xtype一览

    在ExtJs框架中,`xtype`是一种用于标识组件类型的字符串,它定义了组件的类。这个特性使得在创建UI时能够简洁地指定组件的类型,而无需直接实例化具体的类。以下是一些主要的`xtype`及其对应的组件类和功能的详细...

    ExtJS的xtype列表

    以上就是ExtJS中一些主要的`xtype`及其对应组件的介绍。通过灵活组合这些组件,开发者可以创建出各种复杂的用户界面,满足不同业务需求。在实际开发中,可以根据具体应用场景选择合适的`xtype`,并根据需要配置其...

    EXTjs组件.pdf

    EXTJS中的浮动组件(Floating Components)是一类特殊的组件,它们使用CSS绝对定位,脱离文档流,不参与容器布局。例如,Window组件默认就是浮动的,而任何组件都可以通过设置floating属性变为浮动组件。浮动组件常...

    EXTJS学习文档 适合初学者

    所有组件都继承自`Component`类,并拥有一个特定的`xtype`属性,用于标识组件的类型。例如,`xtype`为`'panel'`表示这是一个面板组件。 常见的组件及其对应的`xtype`包括: - `box`:具有边框属性的组件 - `button...

    ExtJs.doc 扩展介绍 英文

    例如,当用户点击按钮创建一个新的组件时,ExtJS 会识别到 `xtype` 并知道应该实例化对应的类,如 `Ext.ux.MyGrid`,而不会在初始加载时就创建所有可能用到的组件实例。 **Ext.extend() 与组件扩展** `Ext.extend...

    ExtJS icons(5000个extjs小图标).zip

    此外,这些图标还可以与ExtJS的皮肤系统结合,使得在整个应用中保持一致的视觉风格。 总之,"ExtJS icons(5000个extjs小图标).zip"为ExtJS开发者提供了一个丰富的图标库,能够满足各种Web应用设计需求。通过合理...

    EXTJS修改颜色实例源码

    在提供的实例源码中,我们看到的是如何在 EXTJS 中修改颜色的示例,具体涉及到 EXTJS 的 FormPanel 和 ComboBox 组件,以及自定义事件处理。 1. **FormPanel**: - `Ext.form.FormPanel` 是 EXTJS 中用于创建表单...

    如何提交Extjs 中的表单

    首先,我们需要了解ExtJS中的表单组件(`Ext.form.Panel`)。表单面板是承载输入字段和其他表单元素的容器。创建一个基本的表单,你可以这样写: ```javascript var formPanel = Ext.create('Ext.form.Panel', { ...

    很不错的ExtJs PPT

    EXTJS组件通过xtype属性定义,这个属性值对应于组件的类型,使得开发者可以通过配置轻松创建和管理组件。EXTJS的组件化设计使得UI布局和功能模块化,便于维护和扩展。 总之,EXTJS以其强大的功能和良好的用户体验,...

    extjs图标大全

    在ExtJS中,图标通常与按钮、菜单项和其他UI元素关联,用于表示特定的功能或操作。这些图标可以通过CSS类名引用,每个类名对应一个预定义的SVG图像或者PNG图片。ExtJS提供了多种方式来设置图标的样式,包括`icon`, `...

    ExtJS3总结内容

    以下是ExtJS3中常见组件的`xtype`及其对应的类名: - `box`: `Ext.BoxComponent` - `button`: `Ext.Button` - `buttongroup`: `Ext.ButtonGroup` - `colorpalette`: `Ext.ColorPalette` - `component`: `Ext....

    5000个extjs小图标.zip

    在实际项目中,为了保持代码整洁,图标通常会存储在一个专门的目录下,然后在CSS文件中定义对应的类名,将图标与类名关联。这样,当需要改变图标或更新图标集时,只需要修改CSS,而无需改动JavaScript代码。 为了更...

    EXTJS 选下拉框,并取得下拉框的值

    在EXTJS中,下拉框(ComboBox)是一种常见的UI组件,常用于用户选择一个或多个预定义的选项。本篇文章将详细讲解如何在EXTJS中操作下拉框,以及如何获取用户选定的值。 首先,创建一个基本的EXTJS下拉框需要定义`...

    5000个extjs小图标

    在这个"5000个extjs小图标"的压缩包中,我们看到的是与ExtJS相关的图标资源,这些图标可能是用于定制ExtJS组件外观的重要元素。 1. **图标在UI设计中的作用**:图标是用户界面设计中的关键组成部分,它们以视觉方式...

    Extjs 性能优化 High Performance ExtJs

    在前端开发中,Extjs 是一款非常强大的 UI 框架,它提供了丰富的组件和便捷的开发方式,深受开发者们的喜爱。然而随着应用程序复杂度的提升,如何提高 Extjs 的性能成为了一个重要的课题。本文旨在针对具有一定 ...

Global site tag (gtag.js) - Google Analytics