ExtJS使用up和down方法

Question

我想使用up和down来调用，而不是使用Ext.getCmp，但我还不太理解。我有以下代码：

listeners: {
    'change': function(field, selectedValue) {
        // Ext.getCmp('wildAnimal').setValue(selectedValue);
        this.up('form').down('#wildAnimal').setValue(selectedValue);
    }
}

在这段更大的代码中

Ext.define('ryan', {
    constructor: function() {
        Ext.create('Ext.form.Panel', {
            bodyStyle: {"background-color":"green"},
            name: 'mypanel',
            title: 'Animal sanctuary, one animal per location  ',
            width: 300,
            bodyPadding: 10,
            test: 'mycat',
            style: 'background-color: #Fdd;',
            renderTo: Ext.getBody(),
            items: [{
                itemId: 'button1',
                xtype: 'button',
                text: 'click the button',
                handler: function() {
                    alert('(<^_^>)');
                }
            },{
                itemId: 'wildAnimal',
                xtype: 'textfield',
                fieldLabel: 'animal:',
                name: 'myanimal'
            },{
                itemId: 'myCombo',
                xtype: 'combo',
                fieldLabel: 'choose your animal',
                store: animals,
                queryMode: 'local',
                displayField: 'name',
                listeners: {
                    'change': function(field, selectedValue) {
                        // Ext.getCmp('wildAnimal').setValue(selectedValue);
                        this.up('form').down('#wildAnimal').setValue(selectedValue);
                    }
                }
            }]
        });
    }
});

var animals = Ext.create('Ext.data.Store', {
    fields: ['itemId', 'name'],
    data: [{
        "itemId": 'mycat',
        "name": "mycat"
    },{
        "itemId" : 'mydog', 
        "name": "mydog"
    },{
        'itemId' : 'sbBarGirls', 
        "name": "BarGirls-when-drunk"
    }]
});

Ext.onReady(function() {
    var a = Ext.create('ryan');
    var b = Ext.create('ryan');
});

我不明白为什么需要在 wildAnimal 中使用井号才能使其正常工作。当我将 Ext.form.Panel 切换为 widget.window 时，监听器的代码停止工作。我的代码创建了一个窗口，但是我不能像表单面板那样传递下拉框的值。据我所知，up 用于从父类中查找内容。当使用 widget.window 时，我应该调用 this.up(widget) 吗？我无法让它正常工作。此外，我非常新手 Ext JS，可能会有很多东西超出我的理解范围 >__<.

- Ryan Williams

Answer 1

up 和 down 方法用于遍历组件树。

当使用选择器与 up 和 down 一起使用时，默认选择器检查组件的 xtype。因此，up('form') 的意思是“继续向上遍历组件树，直到找到一个表单”。#wildAnimal 选择器的意思是“继续向上遍历组件树，直到找到 id == 'wildAnimal' 的组件”。如果使用没有选择器的 up()，它将返回父容器。

如果您决定使用 Ext.window.Window 替代 Ext.form.Panel，则需要将所有出现的 up('form') 改为 up('window')。否则，如果您知道“myCombo”和“wildAnimal”是兄弟组件，则只需使用 up().down('#wildAnimal') 即可，在更改父容器类型后它仍然有效。

- Eric

---

我是否总是需要使用井号？我看过一些没有井号的例子。 - Ryan Williams

只有当您想要按“id”或“itemId”选择时才需要使用“#”。其他方法（例如“Ext.getCmp”）会假定输入字符串是一个ID，并且不需要井号。 - Eric

Answer 2

up和down方法的语义遵循ComponentQuery类。强烈建议您阅读有关此类的API文档。以下是开始使用ExtJS的内容。

祝好运！

---

我会为您留下这个列表。

这是我为我的同事准备的入门资源列表：

API： http://docs.sencha.com/ext-js/4-1/

示例： http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/

指南： http://docs.sencha.com/ext-js/4-1/#!/guide

资源：

Sencha论坛： http://www.sencha.com/forum/

StackOverflow： https://stackoverflow.com/questions/tagged/extjs

工具：

Firebug插件（开发者的Illuminations）

http://www.illuminations-for-developers.com/

如何入门

1. Scroll through the Examples to get ideas of what you want to build.
2. Read through these Guides :
    ○ Getting Started
    ○ Class System
    ○ MVC
    ○ Layouts
    ○ Components
    ○ Data Package

一旦您熟悉了这些概念，决定使用哪些组件，并深入了解“组件”部分下的具体指南。我还建议阅读“应用程序架构”教程。

- dbrin