0

我一直在使用extjs

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

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

4

2 回答 2

6

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

不好的是getCmp()你应该尽可能避免使用它并完全使用ComponentQuery或封装refs。如果可能id的话，如果不是严格要求的话，请避免自己设置。使用组件查询，您可以查询任何自定义或公共属性。例如itemId，ExtJS 还支持，对于按钮，我使用一个名为的自定义属性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 确实知道这些属性，也可以在一个组件上使用两个查询。请参阅 API）和action. 这些是我使用的名称，但您可以在此处使用任何名称。现在我们构建了我们独特的查询路径。我们将为第一个面板底部工具栏中的“foo”按钮执行此操作：

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

'custom'

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

custom[itemId=first]

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

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

差不多就是这样。

请参阅JSFiddle

于 2013-01-26T16:40:26.847 回答
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();
于 2013-01-26T16:09:10.250 回答