ExtJS_extjs の使用を開始する

開始...
ExtJS で最も一般的に使用されるメソッドはおそらく Ext.onReady メソッドであり、ExtJS を学習するときに最初に触れるメソッドでもあります。このメソッドは現在の DOM の読み込みを完了します。ページ内のすべての要素がスクリプトで参照できるようにするために、後で自動的に呼び出されます。

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

Ext.onReady(function() {
alert('hello world!');
});

上記のコードは、ページがロードされた後にダイアログ ボックスを表示し、「hello world!」という単語を出力します。

要素を取得します
もう 1 つよく使用されるメソッドは、ページ上の要素を取得することです。ExtJS には、ID に基づいてページ上の要素を取得できる get メソッドが用意されています。var myDiv = Ext.get('myDiv) ');
は、ID 'myDiv' の要素のページを取得します。Element.dom メソッドを使用すると、基になる DOM ノードを直接操作でき、Ext.get は Element オブジェクトを返します。このメソッドを使用して複数の DOM ノードを取得することはできません。または、一貫性はなくても同じ特性を持ついくつかの ID を取得したい場合は、たとえば、すべての
タグを取得したい場合は、セレクターを介してそれらを取得できます。
var ps = Ext.select('p');
このようにして、select() メソッドは Ext.select('p') を返します。 CompositeElement オブジェクトを作成し、 each() メソッドを使用してノードをトラバースします:

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

ps.each(function(el) {

el.highlight();
});


もちろん、取得したすべての要素に対して同じ操作を行う場合は、次のように CompositeElement オブジェクトに適用できます。

ps.highlight();
Ext.select('p').highlight() ;
もちろん、select パラメーターは、W3C Css3Dom 選択コンバーター、基本的な XPath、HTML 属性などを含む、より複雑な場合もあります。詳細については、DomQuery API のドキュメントを参照してください。

イベント レスポンス

要素が取得されると、一部の要素に対してイベントが発生する可能性があります。ボタンの取得などの処理を実行するには、そのクリック イベント レスポンスを追加します:

コードをコピー コードは次のとおりです: Ext.onReady(function() {

Ext.get ('myButton').on('click', function() {

alert('ボタンをクリックしました!' );
})
}); >もちろん、select() メソッドで取得した要素にイベント応答を追加することもできます:

コードをコピー

コードは次のとおりです。次のように: Ext.select('p').on('click', function() { alert('段落をクリックしました!'); }) ;

ウィジェット
ExtJS は、誰でも使用できる豊富な UI ライブラリも提供します。

メッセージ ウィンドウ

以前のalert() メソッドをソリューションに置き換えます。 ExtJS によって提供されます:



コードをコピーします

コードは次のとおりです: Ext.onReady(function) () { Ext.get('myButton').on('click', function() { alert(' ボタンをクリックしました!'); }); ;