1

タブがアクティブ化されたときに呼び出されるリスナーがあります。

, listeners: {
     activate: function(tab){
         var first = tab.down('input'),                 // will be null
             firstEl = tab.getEl().down('input');       // will contain first input element

tab と tab.getEl() の関係を理解するのにあまり運がありません。これが jquery の場合、$(tab) は jquery 要素を提供し、オプションのセットを大幅に拡張します。extjs は、この点でほとんど逆行しているか、少なくともより複雑なようです。

いつ、なぜ必要なのかを理解しようとしているgetEl()ので、何が機能し、何が機能しないかについての開発のがらくたを減らすことができます。他の場所では、次のようなことをしています。

showFieldHelpOnBlur = function(ctrl) {
    ctrl.up('form').down('#helptext').update("");
}

getEl() なしで。この場合、 formはinput (上記) と同様の要素タグですが、使用する前に getEl() は必要ありません。一般に、同じ名前を共有しているが同じようには機能しない 2 つの機能セットはイライラさせられます。また、ドキュメントは、異なることを行う同じ名前の複数のメソッドがある理由についての手がかりを与えていないようです。似たようなことを別の方法で行う。

でいくつかの同様の問題が見つかりましfocus()たが、本質的にDOM要素が追加機能でラップされているものに対して、一見並列に見えるメソッドのセットが2つある理由を理解すれば、それらはより理にかなっているかもしれません。

4

1 に答える 1

3

あなたの混乱の核心は、ExtJS と JQuery を使用して開発にアプローチする方法だと思います。

JQuery は、DOM 操作と低レベル API に関するものです。ExtJS のアプローチは大きく異なります。ページ構造を、適切な HTML のレンダリングを担当する ExtJS コンポーネントの階層と考える必要があります。したがって、ExtJS は本質的に次のように言っています。

あなたは「おっとネリー! html について心配する必要がないというのはどういう意味ですか? 私はコントロールしたい!」と言うでしょう。そして ExtJS は OK を返します - 私たちはElement( http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.dom.Element )と呼ばれるラッパー オブジェクトを持っています。あなたはJQueryに慣れています..しかし、注意してください。独自の HTML を管理する場合、フレームワークによって管理されていないレイアウトやコンポーネントに何が起こるかについて、私たちは責任を負うことができないためです。

私のアドバイスはこれです-ローマにいるときはローマ人がするようにします:)

ExtJS を使用してアプリを構築する場合は、ExtJS が動作するように設計された方法を採用してください。さまざまなレイアウトの仕組みと、すぐに利用できる多数のコンポーネント タイプについて学びます。MVC 開発パターンを使用して、コードを美しく整理します。例を活用してください。アーキテクチャとコンポーネントのガイドを調べてください。これらは非常に役に立ちます。ComponentQuery クラスを理解することは必須です (すべてのアップ/ダウン メソッドとクエリ)。

最後に、ExtJS コンポーネントとその開発スタイルを快適に使用できるようになると、UI 構成を非常に効率的に構築できるようになり、以前よりもはるかに複雑なアプリケーションを構築できるようになります。

幸運を！

プロのヒント: Firebug 用の Illuminations for Developers プラグインを入手してください。これにより、HTML 要素ではなくコンポーネント構造を使用して物事を見ることができるようになります。

于 2013-05-20T20:55:16.310 に答える