8

ExtJS を使って数か月が経ちましたが、舞台裏で何が起こっているのか完全に明確な地図はまだありません。フレームワークの構成要素とその最も基本的な機能について話しているだけです。

  • 外部コンポーネント
  • Ext.Element
  • DOM.Element
  • DOM.ノード (?)
  • 複合要素 (?)
  • ことなど （？）

上記のそれぞれについて、私が知りたいのは：

  1. 選択方法: ID、クラス、親経由、検索 (OR 子 OR クエリ OR 選択? WTF)、兄弟、ComponentQuery、DOM-query、CSS-query など。

  2. ツリーでの操作方法: 作成、追加、前置、この兄弟の後に挿入、その親に移動、削除、破棄など..

  3. 画面の操作方法: 表示、非表示、フェード、スライド、上下移動、サイズ変更など.

  4. 相互に関連する識別方法: Ext.Component を知っている DOM.Element を見つける、DOM.Element を知っている Ext.Component を見つける、など。

  5. それらの間の依存関係は何ですか: Ext.Component が非表示/破棄/変更/移動された場合に DOM.Element に何が起こるか、その Ext.Element が非表示/破棄/変更/移動された場合に Ext.Component に何が起こるかなど.

それぞれがどのように使用され、どのように動作することが期待されるかについて、系統的かつ論理的に明確なレイアウトを探しています。また、説明した機能を対応するカテゴリにグループ化できることも期待しています。たとえば、ページをアルファベット順に並べるのではなく、補完的なトラバース メソッド.up()を並べて表示するとよいでしょう。.down()もちろん、リンクと例 (公式ドキュメントにはひどく不足しています) も歓迎します!

4

3 に答える 3

2

選択方法: ID、クラス、親経由、検索 (OR 子 OR クエリ OR 選択? WTF)、兄弟、ComponentQuery、DOM-query、CSS-query など。

Ext.ComponentQuery.query("*")                   // get all
Ext.ComponentQuery.query("button")              // all buttons
Ext.ComponentQuery.query("#myid")               // all controls / components myid
Ext.ComponentQuery.query("#myid", rootelement)  // all controls / components myid with rootelement
Ext.ComponentQuery.query("#myid,button")        // all buttons or controls / components myid

ツリーでの操作方法: 作成、追加、前置、この兄弟の後に挿入、その親に移動、削除、破棄など.

ビューにボタンを追加する:

Ext.ComponentQuery.query("#viewId")[0].add(new Ext.Button({ text: 'test'}));

またinsert、remove照会しているコントロールに応じて、などもあります。

画面の操作方法: 表示、非表示、フェード、スライド、上下移動、サイズ変更など.

Ext.ComponentQuery.query("button").forEach(function(button){ button.hide(); })      // hide all buttons

またshow、照会しているコントロールに応じて、、などdisableもあります。enable

相互に関連するものを特定する方法: Ext.Component を知っている DOM.Element を見つける、DOM.Element を知っている Ext.Component を見つける、など。

DOM要素から ID を取得して を使用するだけExt.Componentです。ID からオブジェクトを取得するためのものもあります。Dom.ElementExt.ComponentQuery.query("#id")Ext.select('#id')

element プロパティを使用すると、DOM を取得できます。

var dom = Ext.ComponentQuery.query("button")[0].element.dom // Getting the DOM from the first button
var dom2 = component.element.dom                            // does also work as long as component is a valid sencha touch component

それらの間の依存関係は何ですか: Ext.Component が非表示/破棄/変更/移動された場合に DOM.Element に何が起こるか、その Ext.Element が非表示/破棄/変更/移動された場合に Ext.Component に何が起こるかなど.

.hideたとえば、 を呼び出すと、DOM に適用される CSS がいくつかあると思いますdisplay: none。内部的には、そのようなフレームワークjQueryや古い学校のバージョンdocument.getElementById('id').cssなどを使用できます。を呼び出すと、または以前の型に.show変更される場合があります (これは Sencha Touch クラスに保存できます)。display: block

DOM 要素が破棄されるとどうなるかわかりません。おそらく要素もそうであり、ガベージコレクターにはやるべきことがいくつかあります。

さらに質問がある場合、または不明な点や不十分な点がある場合は、遠慮なく質問してください。

于 2013-09-16T12:34:03.147 に答える