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コンポーネント ツリーをトラバースするために使用されます。

upおよびセレクターを使用する場合down、デフォルトのセレクターはコンポーネントの xtype をチェックします。つまりup('form')、「フォームが見つかるまでコンポーネント ツリーを上っていく」ということです。セレクターは、#wildAnimal「id == 'wildAnimal' のコンポーネントが見つかるまで上に移動し続ける」ことを意味します。up()セレクターなしで使用すると、親コンテナーが返されます。

Ext.window.Windowの代わりに使用する場合は、 withExt.form.Panelのすべての出現箇所を変更する必要があります。それ以外の場合、「myCombo」と「wildAnimal」が兄弟コンポーネントであることがわかっている場合は、そのまま使用でき、親コンテナーのタイプを変更した後に機能します。up('form')up('window')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/

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

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

于 2013-07-11T17:09:04.090 に答える