13

我正在尝试使用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 很陌生，所以很多事情可能会让我头疼>__<。

4

2 回答 2

32

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

当使用upanddown选择器时，默认选择器会检查组件的 xtype。所以up('form')意思是“继续向上组件树，直到找到一个表单”。选择器的#wildAnimal意思是“继续上升，直到找到 id == 'wildAnimal' 的组件”。如果不使用up()选择器，则返回父容器。

如果您决定使用Ext.window.Window而不是，则Ext.form.Panel需要更改所有出现的up('form')with up('window')。否则，如果您知道“myCombo”和“wildAnimal”是兄弟组件，您就可以使用up().down('#wildAnimal')它，并且在更改父容器的类型后它会起作用。

于 2013-07-11T16:44:21.973 回答
5

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

资源：

煎茶论坛： http ://www.sencha.com/forum/

堆栈溢出： 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 教程。

于 2013-07-11T17:09:04.090 回答