2017-07-25 8 views
0

私はSenchaのExtJSフレームワークを使用するプロジェクトを、ハンドオーバーやドキュメントなしで提供しています。私はそれを理解しようとしていますが、次の構文で私を助けて、このフレームワークの新人のためのコードを調べるだけでなく、これを説明するかもしれない特定のサイトに私を指摘する可能性があります。ExtJSフレームワークの構文の理解

私はつまり、それはやっている正確にどのようなコードを経由し、不確かされています:ExtJSのに比較するために使用することができるよう

if(val==1) { 
     Ext.getCmp('status').setText('AWAITING APPROV'); 
    } 
    switch(flag) { 
     case 1: if(val==0) { 
        Ext.getCmp('complex_first').el.replaceCls('x-form-complex', 'x-form-simplex'); 
       } else { 
        Ext.getCmp('complex_first').el.replaceCls('x-form-simplex', 'x-form-complex'); 
       } 
       break; 
     case 2: if(val==0) { 
        Ext.getCmp('complex_second').el.replaceCls('x-form-complex', 'x-form-simplex'); 
       } else { 
        Ext.getCmp('complex_second').el.replaceCls('x-form-simplex', 'x-form-complex'); 
       } 
       break; 
    default: break; 
    } 

は今、私は非常によくjQueryのを知っているが、何が正確に以下のやっています:

  1. Ext.getCmp( 'ステータス')
  2. Ext.getCmp( 'complex_first')el.replaceCls( 'X-フォーム複合' 'X-フォームシンプレックス')。
  3. Ext.getCmp( 'complex_first')。el.replaceCls( 'x-form-simplex'、 'x-form-complex');

これらのクラス/ div IDは、コードやCSSファイルの中で何か詳細情報を提供しますか?

助けがあれば助かります。

+0

あなたのアプリが書かれているExtのバージョンを投稿してください。それは重要なことかもしれません。アプリコンソールで 'Ext.versions'を使って確認できます。 – pagep

+0

https://stackoverflow.com/documentation/extjsここにあるものが役立つかどうかわかりません... – JGFMK

答えて

2

Ext JSアプリケーションでは、Ext.Component(グリッド、パネル、フォームアイテムなど)の子であるページのすべてが静的Ext.ComponentManagerに登録されます。

潜在的に複雑なDOMクエリを実行することなく、これらのコンポーネントへの参照をプログラムで取得し、それらのコンポーネントに対してアクションを実行する簡単な方法が提供されます。

Ext.getCmpは()Ext.ComponentManager.get()の別名であるので、あなたの例では、Ext.getCmp(「ステータスが」)ID 状態で作成されたコンポーネントを取得します。コードベースでそのリファレンスを見つけることができます。

コンポーネントのレンダリング後にのみ、Ext.dom.Elementオブジェクトが得られ、DOM要素とやりとりすることができます。 .getEl()または直接.elプロパティを使用してアクセスできます。要素オブジェクトは、DOMと対話を交換またはDOMにクラスを追加します(jQueryの要素に広く相当)等のクロスブラウザーのコンプライアンス、

replaceCls()を提供する追加の方法を提供します。

潜在的に複雑なコードベースを解読しようとする前に、Ext JSのコア概念を理解するためのサンプルアプリケーションの作成をお勧めします。

1

docsが良好です。あなたのプロジェクトに合ったバージョンとツールキットを探してください。ドキュメントに加えて、ページの上部にある「ソースの表示」をクリックするか、プロパティ/メソッドレベルでクラスまたはメンバーのソースコードを表示することができます。右側の列には、クラス階層、すべてのサブクラス、ミックスインなどがリストされています。

Ext.getCmpは、idでExt.Componentを検索します。これにより、コンポーネントインスタンス(Extオブジェクト)が返されます。コードがこのメソッドに渡す文字列( 'status'、 'complex_first'、 'complex_second')は、JSコードのコンポーネントに指定されたidと一致する必要があります。また、レンダリングされるとき、それは基礎となるDOM要素に与えられたidになります。

コンポーネントの現在のバージョンのドキュメントには、elのプロパティは表示されませんが、version 3.4に戻った場合は、その情報が表示されます。 Ext.dom.Elementのインスタンスを返します。これは、コンポーネントを表す最上位のDOM要素のラッパーです。それを得るために現在サポートされている方法はgetElに電話することです。しかし、現在のバージョンのsourceを見ると、それは.elプロパティを返すことがわかります。そのプロパティはまだ舞台裏にあります。

replaceClsは、Ext.dom.Elementというメソッドで、この要素の1つ以上のCSSクラスを他のクラスに置き換えます。