0

私はextjsを使用しています

Ext.getCmp('xtypeid').getValue();
Ext.getCmp('xtypeId').setValue('');

値を取得したり値を設定したりするために...私はちょうどそれを見つけました。これはOOPの観点からは悪いプログラミングです...しかし、私の質問は、テキストボックスの値を取得したり値を設定したりする方法です。誰かがこれをやっているサンプルプログラムを見せてくれたら素晴らしいと思います。

4

2 に答える 2

6

値を設定するだけでなく、それ以上のことが起こるため、ここではそれらが必要です。JavaScript はプロトタイプベースのプログラミング言語であるため、Java や C# について読んだ OOP の記事と比較することはできないことに注意してください。

悪いのは、getCmp()可能であればそれを避け、完全に使用ComponentQueryまたはカプセル化する必要があることですrefs。idまた、厳密に必要でない場合は、可能であれば自分で設定することは避けてください。コンポーネント クエリを使用すると、任意のカスタム プロパティまたは共通プロパティをクエリできます。たとえばitemId、さらにExtJSでサポートされており、ボタンにはカスタムプロパティを使用していますaction

フレームワークによって提供されるメソッドについて心配する必要はありません。クラスを拡張または作成するときにそれを行い、そこでパターンに従います。

明確にするために： Ext.getCmp()それは悪いことではありません、それは本当に速いです、悪いことは、ほとんどの人が重複したIDにつながる可能性があるものをid使用できるように自分で設定し、それが問題であるという事実です。getCmp()

アップデート

コメントで述べたように、Ext.ComponentQuery は非常に強力で柔軟です。このビュー行のすべてをカバーするわけではなく、基本的な例を 1 つだけ取り上げます。

簡単な環境を作りましょう。CustomPanel から拡張したというクラスがあります。カスタムには、上部dockedItemsにツールバー、下部にツールバーがありますdockedItems。

Ext.define('Custom', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.custom',

    tbar: {
        itemId: 'top-bar',
        items: [{
            text: 'foo',
            action: 'foo'
        },{
            text: 'bar', 
            action: 'bar'
        }]  
    },
    dockedItems: [{
        xtype: 'toolbar',
        itemId: 'bottom-bar',
        dock: 'bottom',
        items: [{
            text: 'foo-bottom',
            action: 'foo'
        },{
            text: 'bar-bottom', 
            action: 'bar'
        }]  
    }],

    initComponent: function() {
        this.callParent(arguments);
    }
});

ここで、新しいクラスからインスタンスを作成しています。その方法は、画面上に同時に 2 つのインスタンスを表示することです。

Ext.create('Custom', {
    title: 'Panel',
    itemId: 'first',
    height: 100,
    width: 400
});
Ext.create('Custom', {
    title: 'Other Panel',
    itemId: 'second',
    height: 100,
    width: 400
});

ここで、一元化されたクラス内のボタン イベントに自分自身をサブスクライブしたいと考えていますが、そのためには各ボタンを識別する必要があります。(これはExtJSitemIdで実際に認識されており、1 つのコンポーネントに対して 2 つのクエリを使用することもできます。API を参照してください) やaction. これらは私が使用する名前ですが、ここでは任意の名前を使用できます。次に、クエリを実行するための独自のパスを作成します。最初のパネルの下部ツールバーにある「foo」ボタンに対してこれを行います。

まず、パネルを探していることがわかります。customそれが私たちのクラスである理由を探していると言うかもしれません。ComponentQueryしかし、クラスがから拡張されている場合、それは問題ではありませんpanel。しかし、これは最初の結果セットを削減できる最初のポイントであり、拡張クラスの xtype を選択してこれを行いますcustom。

'custom'

クラス Custom またはそれを拡張する任意のクラスのすべてのインスタンスを取得します。多すぎるので、1 つ必要です。そのため、フィルタ プロパティを追加します。

custom[itemId=first]

これで最初のパネルができました。ツールバーとボタンについても同じことをしましょう

custom[itemId=first] > toolbar[itemId=bottom-bar] > button[action=foo]

そして、それはほとんどそれです。

JSFiddleを見る

于 2013-01-26T16:40:26.847 に答える
2

コントローラーで refs を使用できます。

Ext.define('App.controller.Some', {
    extend:'Ext.app.Controller',

    views: [
        ...
    ],

    stores: [
        ...
    ],

    models: [
        ...
    ],


    refs: [{
        ref: 'someCombobox',
        selector: 'combobox[id=you-combo-id]'
    }

    ...

});

そして、いくつかのコントローラー関数で：

this.getSomeCombobox().getValue();
于 2013-01-26T16:09:10.250 に答える