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很新，所以很多事情可能会超出我的想法＆gt; __＆lt;。

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')，它将在更改父容器的类型后起作用。

Answer 2

up和down方法的语义遵循ComponentQuery类。强烈建议您阅读有关此文档的API文档。另请参阅下面的ExtJS入门。

祝你好运！

我只是想把这个留给你。

这是我为同事们整理的资源入门列表：显然链接是ExtJS4.1，但可以随意获取最新版本。

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插件（开发人员的照明）

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

熟悉这些概念后，请确定要使用的组件，并深入了解“组件”部分下的特定指南。我还建议阅读App Architecture教程。

Answer 3

我在使用Ext.getCmp("id")时遇到了问题，因此最佳解决方案似乎是Ext.up/down()，并且在这个主题中得到了很好的解释：

https://www.sencha.com/forum/showthread.php?258048-Clarify-getCmp-vs-Up-down，

希望对那些似乎不理解它的人有所帮助。

使用up和down方法的extjs

3 个答案: