Objext Oriented Programming Extjs - 获取/设置值

本文关键字：设置 获取 Oriented Programming Extjs Objext | 更新日期: 2023-09-27 17:56:20

我一直在使用extjs的 

Ext.getCmp('xtypeid').getValue();
Ext.getCmp('xtypeId').setValue('');

要获取值或设置值...我刚刚发现。就OOP而言，这是一个糟糕的编程...但我的问题是你如何获取值或设置一堆文本框的值。如果有人能给我看一个这样做的示例程序，那就太好了。

Objext Oriented Programming Extjs - 获取/设置值

这里需要它们，因为它发生的不仅仅是设置值。请记住，JavaScript 是一种基于原型的编程语言，因此您无法将其与您可能已经阅读过的 Java 或 C# 的 OOP 文章进行比较。

不好的是使用getCmp()如果可能的话，你应该避免这样做，并完全使用ComponentQuery或封装refs。如果可能的话，如果不是严格要求，请避免自己设置id。使用组件查询，可以查询任何自定义属性或公共属性。例如，ExtJS 还支持该itemId，对于按钮，我使用名为 action 的自定义属性

您不应该关心框架提供的方法，在扩展或创建类时执行此操作并遵循那里的模式。

澄清一下：Ext.getCmp()不是坏事，它真的很快，坏的是大多数人自己设置id，以便他们可以使用可能导致重复 id 的getCmp()，这是一个问题。

更新

正如评论中提到的，Ext.ComponentQuery非常强大和灵活。我不会在这个观点中涵盖所有内容，只是一个基本的例子。

让我们做一个简单的环境。我们有一个名为 Custom 的类，它是从 Panel 扩展而来的。自定义在顶部dockedItems中有一个工具栏，在底部dockedItems中有一个工具栏。

Ext.define('Custom', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.custom',
    tbar: {
        itemId: 'top-bar',
        items: [{
            text: 'foo',
            action: 'foo'
        },{
            text: 'bar', 
            action: 'bar'
        }]  
    },
    dockedItems: [{
        xtype: 'toolbar',
        itemId: 'bottom-bar',
        dock: 'bottom',
        items: [{
            text: 'foo-bottom',
            action: 'foo'
        },{
            text: 'bar-bottom', 
            action: 'bar'
        }]  
    }],
    initComponent: function() {
        this.callParent(arguments);
    }
});

现在我们正在从我们的新类创建实例，它是如何产生的，我们同时在屏幕上有两个实例。

Ext.create('Custom', {
    title: 'Panel',
    itemId: 'first',
    height: 100,
    width: 400
});
Ext.create('Custom', {
    title: 'Other Panel',
    itemId: 'second',
    height: 100,
    width: 400
});

现在，您希望订阅集中式类中的按钮事件，但您需要为此标识每个按钮。您可能已经看到我定义了一些属性，例如 itemId（ExtJS 确实知道这一点，也可以在一个组件上使用两个查询。请参阅 API） 和 action 。这些是我使用的名称，但您可以在此处使用任何名称。现在，我们构建了用于查询的唯一路径。我们将对第一个面板底部工具栏中的"foo"按钮执行此操作：

首先，我们知道我们正在寻找一个面板。你可能会说，嘿，我们正在寻找custom因为这是我们的班级。但这并不重要，因为如果类从panel扩展，则ComponentQuery看起来。但这是我们可以减少第一个结果集的第一点，我们将选择扩展类custom的 xtype 来做到这一点。

'custom'

我们现在获取类 Custom 的所有实例或任何扩展它的类。现在太多了，我们需要一个。所以我们添加一个过滤器属性。

custom[itemId=first]

现在我们有了第一个小组。让我们对工具栏和按钮做同样的事情

custom[itemId=first] > toolbar[itemId=bottom-bar] > button[action=foo]

差不多就是这样。

请参阅 JSFiddle

您可以在控制器上使用 refs：

Ext.define('App.controller.Some', {
    extend:'Ext.app.Controller',
    views: [
        ...
    ],
    stores: [
        ...
    ],
    models: [
        ...
    ],

    refs: [{
        ref: 'someCombobox',
        selector: 'combobox[id=you-combo-id]'
    }
    ...
});

在某些控制器功能中：

this.getSomeCombobox().getValue();
相关文章：