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

Question

我一直在使用extjs

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

得到一个值或设置一个值...我刚刚发现了.就OOP而言,这是一个糟糕的编程...但我的问题是你如何获得价值或设置一堆文本框的价值.如果有人可以向我展示一个样本程序就可以了.

Answer 1

它们在这里是必需的,因为它不仅仅是设置值.请记住,JavaScript是一种基于Prototype的编程语言,因此您无法将其与您可能已阅读过Java或C#的OOP文章进行比较.

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

您不应该关心框架提供的方法,在扩展或创建类时执行它并遵循那里的模式.

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

更新

正如评论中提到的,Ext.ComponentQuery非常强大和灵活.我不会在这个视图行中覆盖所有内容,只是一个基本示例.

让我们创造一个简单的环境.我们有一个叫做CustomPanel 的课程.自定义顶部有一个工具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