Ext.js中组件简要说明

Posted 2023-03-18

参考技术A 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 滑动条
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 扇形图

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

如何从 DOM 元素中获取 Ext JS 组件

【中文标题】如何从 DOM 元素中获取 Ext JS 组件

【英文标题】：How to get Ext JS component from DOM element

【发布时间】：2012-08-26 19:53:06

【问题描述】：

尝试创建内联编辑表单。 我有一个看起来像这样的表格：

var editPic = "<img src='https://s3.amazonaws.com/bzimages/pencil.png' alt='edit' height='24' width='24' style='margin-left: 10px;'/>";
var submitPic = "<img id='submitPic' src='https://s3.amazonaws.com/bzimages/submitPic.png' alt='edit' height='24' width='24'/>";

Ext.define('BM.view.test.Edit', 
extend: 'Ext.form.Panel',
alias: 'widget.test-edit',

layout: 'anchor',
title: 'Edit Test',
defaultType: 'displayfield',

items: [
    name: 'id', hidden: true,

    
        name: 'name',
        fieldLabel: 'Name',
        afterSubTpl: editPic,
        cls: 'editable'
    ,
    
        name: 'nameEdit',
        fieldLabel: 'Name',
        xtype: 'textfield',
        hidden: true,
        cls: 'editMode',
        allowBlank: false,
        afterSubTpl: submitPic
    
]
);

控制器看起来像这样（很多事件）：

init: function() 
    this.control(
        'test-edit > displayfield': 
            afterrender: this.showEditable
        ,
        'test-edit': 
            afterrender: this.formRendered
        ,
        'test-edit > field[cls=editMode]': 
            specialkey: this.editField,
            blur: this.outOfFocus
        
    );
,

outOfFocus: function(field, event) 
    console.log('Lost focus');
    this.revertToDisplayField(field);
,

revertToDisplayField: function(field) 
    field.previousNode().show();
    field.hide();
,

formRendered: function(form) 
    Ext.get('submitPic').on('click', function (event, object) 
        var field = Ext.get(object).parent().parent().parent().parent();
        var cmp = Ext.ComponentQuery.query('test-edit > field[cls=editMode]');
    );
,

editField: function(field, e) 
    var value = field.value;
    if (e.getKey() === e.ENTER) 
        if (!field.allowBlank && Ext.isEmpty(value))
            console.log('Not permitted!');
         else 
            var record = Ext.ComponentQuery.query('test-edit')[0].getForm().getRecord();
            Ext.Ajax.request(
                url: '../webapp/tests/update',
                method:'Post',
                params: 
                    id: record.getId(),
                    fieldName: field.name,
                    fieldValue: field.value
                ,
                store: record.store,
                success: function(response, t)
                    field.previousNode().setValue(value);
                    t.store.reload();
                    var text = response.responseText;
                    // process server response here
                    console.log('Update successful!');
                
            );

        
        this.revertToDisplayField(field);

     else if (e.getKey() === e.ESC) 
        console.log('gave up');
        this.revertToDisplayField(field);
    
,

showEditable: function(df) 
    df.getEl().on("click", handleClick, this, df);

    function handleClick(e, t, df)
        e.preventDefault();
        var editable = df.nextNode();
        editable.setValue(df.getValue());
        editable.show();
        editable.focus();
        df.hide();
    
,

我正在使用“afterSubTpl”配置来添加编辑图标和接受图标。 我设置了监听器来监听与它们有关的点击事件，但是在它们被点击后，我只有 Ext.get('submitPic') 创建的元素。现在我想访问 Ext 字段和围绕它的表单。父方法只带回其他 DOM 元素。我如何在它们之间建立联系？您可以在 formRendered 中看到我尝试过的内容。

我希望有人可以为我澄清这一点。

【问题讨论】：

我很确定对于您正在尝试做的事情有更好的解决方案。但无论如何，您是否尝试过为on 方法提供第三个参数，即您的字段或表单？类似Ext.get('submitPic').on('click', function( ... ) ... , form);

它有什么好处？我无法从点击功能中访问它。我错过了什么吗？您建议的更好的解决方案是什么，我很想听听他们的意见？还是 10 倍。

如果表单作为范围参数给出，您将可以使用 'this' 访问它。

无论如何，我是否正确，您只想在文本字段旁边添加一个外部图标并点击图标？

是的。你是对的。我用按钮字段尝试了这个，但看起来不太好。

【参考方案1】：

你可以通过 id 获取组件，但前提是你的组件和它的 dom 元素具有相同的 id（它们通常这样做）：

Ext.getCmp(yourelement.id)

但这并不是一个好的做法——最好设置您的侦听器，以便处理程序方法已经具有对组件的引用。例如，在您的“submitPic”组件中，您可以像这样定义点击监听器：

var me = this;
me.on(
    click: function(arguments)
         var cmp = me;
         ...

);

【讨论】：

这种方法的问题是大多数ExtJS组件不会监听所有事件。因此，监听点击事件，组件未注册将什么也不做。这就是我询问 DOM 元素的原因。

当你在 .on() 方法的配置对象中添加一个元素时，它们会这样做：'el'

【参考方案2】：

遍历 DOM 树，直到找到元素 id 的组件：

 getCmpFromEl = function(el) 
    var body = Ext.getBody();
    var cmp;
    do 
        cmp = Ext.getCmp(el.id);
        el = el.parentNode;
     while (!cmp && el !== body);
    return cmp;

Ext.Component.from(el) 从 ExtJS 6.5.0 开始就是这样做的，正如我刚刚了解到的那样。 Doc Source