ExtJS DOM 要素の操作エクスペリエンス Sharing_extjs

Webページ上のDOM要素の操作に初めて触れたのは卒業制作の時で、JQueryを使って操作したと記憶しています。卒業後はCプログラミングに従事していましたが、2年後に再びWebプログラミングに取り組みましたが、今回はJQueryではなくExtJSを使用しました。私の経験から言えば、プログラマーは継続的な学習が必要な業界です（だから私の周りには白髪の同僚がたくさんいます）。

今日の記事のテーマは、ExtJS を使用して DOM 要素を操作した私の経験を共有することです。
要素クリック処理関数の設定方法

コードをコピー コードは以下の通りです。

var elem = Ext.get('start');

elem.on('click', function(e, t) {
alert(t.id);
} );

複数の要素の操作をクエリ

コードをコピー コードは次のとおりです:

var body = Ext.query('body')[0];
body.className = "myStyle";

必要なため要素の種類の情報プロンプトのスタイルを変更するには、CSS に基づいて検索すると、消える操作が必要な場合に、CSS に基づいてすべての要素を検索し続けることができません。このとき、同僚が次のような新しい方法を教えてくれました。

コードをコピー コードは次のとおりです。

// グループに属する複数の要素も次の方法で取得できます:
var elemMessageArray = Ext.select("span [ group='message_group']");

var newCssObj = {};

if (isInfo) {
newCssObj["class"] = "情報";
} else {
newCssObj["class"] = "error";
}

// 次に、各要素の CSS スタイルをリセットするだけです
elemMessageArray.each( function(el) {
el.set(newCssObj);
el.update(text);


要素非表示

以前によく使っていた方法

コードをコピーします コードは次のとおりです:

Uncompleted = Ext.get('uncompleted');

elemUncompleted.setDisplayed(true);


このメソッドでは、要素が消える必要があります : 要素は消えますが、依然として要素のスペースを占有しているため、レイアウトが不便になります。その後、同僚は、このメソッドが使用できることを発見しました。アニメーション効果はありませんが、要素の位置は占有されません。

コードをコピー コードは次のとおりです: el.show("display");

el.hide("display");

この要素を非表示にする - 表示モードを使用して、「表示」または「可視性」を使用するかどうかを決定します。

プログラマはドキュメントを注意深く読む必要があります。することを学ばなければなりません！