web-dev-qa-db-ja.com

upおよびdownメソッドを使用したextjs

_Ext.getCmp_ではなくupとdownを使用して呼び出したいのですが、よくわかりません。私はこのコードを持っています

_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は非常に新しいので、多くのことが頭に浮かぶかもしれません> __ <。

extjsextjs4
12
Ryan Williams

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')を使用するだけで、親コンテナのタイプを変更した後に機能します。

27
Eric

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

これらの概念を理解したら、使用するコンポーネントを決定し、[コンポーネント]セクションにある特定のガイドを詳しく見ていきます。アプリアーキテクチャのチュートリアルを読むこともお勧めします。

5
dbrin

私はExt.getCmp("id")の使用に問題があったため、最良の解決策はExt.up/down()のようであり、このトピックで非常によく説明されています。

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

それがそれを理解していないように思われる人のために役立つことを願っています。

0
Egzonr