面向对象编程 Extjs - 获取/设置值

Question

我一直在用extjs的

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

获取值或设置值...我刚刚发现。就 OOP 而言，这是一个糟糕的编程......但我的问题是你如何获取值或设置值一堆文本框。如果有人可以向我展示一个执行此操作的示例程序，那就太好了。

Answer 1

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

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

你不应该关心框架提供的方法，当你扩展或创建类并遵循那里的模式时这样做。

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

更新

正如评论中提到的，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 确实知道，也可以在一个组件上使用两个查询。See the API）和action。这些是我使用的名称，但您可以在此处使用任何名称。现在我们构建了我们独特的查询路径。我们将为第一个面板底部工具栏中的“foo”按钮执行此操作：

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

'custom'

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

custom[itemId=first]

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

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

差不多就是这样。

见JSFiddle

Answer 2

您可以在控制器上使用 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();