Help us understand the problem. What is going on with this article?

ExtJSをつかったDOMの操作方法(入門編)

More than 5 years have passed since last update.

この記事は Sencha Advent Calendar 2013 19日目の記事です。

今回は、ExtJSをつかったDOMの操作方法の出だしの部分について書きます。

はじめに

本記事の内容はこちらで試すことができます。

DOMとは・・・

DOMは、Document Object Model のことで、HTMLの要素(aタグや、divタグなど)に対して
操作するための仕組み(API)のことです。

DOMを使うことで、javascriptからリンクURLを書き換えたり、スタイルの変更をしたり、
構造をまるっと入れ替えることすらできます。

さて、ExtJSでDOM操作をすることができるクラスメソッドにはどんな物があるでしょうか。

簡単に紹介していきます。

素のjavascriptの場合

素のjavascriptではdocument.getElementByIdメソッドを呼ぶことで、element オブジェクト
を取得できます。
長いですね・・・。

Ext.getメソッド

このメソッドの引数にidを指定して呼び出すことで、エレメントを取得することができます。

Ext.getメソッドは、スタティックメソッドなのでそのまま呼ぶことができます。

id=piyo01のエレメントに、hogehogeクラスを付加する使用例を以下に示します。

hoge.js
var hoge = Ext.get('piyo01');
hoge.addCls('hogehoge');

Ext.flyメソッド

このメソッドもidを指定して呼び出すことで、エレメントを取得することができます。

Ext.flyメソッドも、Ext.get同様に、スタティックメソッドなのでそのまま呼ぶことができます。

id=piyo01のエレメントに、hogehogeクラスを付加する使用例を以下に示します。

fuga.js
var hoge = Ext.fly('piyo01');
hoge.addCls('hogehoge');

ここまで見た限りではこの二つのメソッドに、違いが無いように見えます。

しかしそんなことはありません。

では、その違いは何なのか・・・。

ということで、以下の例をご覧ください。

例1.js
var hoge = Ext.get('piyo01');
hoge.addCls('hogehoge');
var fuga= Ext.get('piyo02');
hoge.addCls('hogehoge');

hoge.hide();
fuga.hide();

hoge.show()
fuga.show()
例2.js
var hoge = Ext.fly('piyo01');
hoge.addCls('hogehoge');
var fuga= Ext.fly('piyo02');
hoge.addCls('hogehoge');

hoge.hide();
fuga.hide();

hoge.show();
fuga.show();

さて、例1では、piyo01,piyo02の表示非表示が切り替わりますが、
例2ではpiyo01の表示非表示が切り替わらないはずです。

なぜこうなってしまうかというと、
Ext.getはExt.Elementオブジェクトが返すのに対して、
Ext.flyではExt.dom.Element.Flyオブジェクトが返されるためです。

Ext.dom.Element.Flyオブジェクトは、flyweight であるため、
領域が再利用されるのです。

使い分けとしては、ワンライナーなど、その場限りのDOM操作にはfly、
後で取得したオブジェクトを再利用したい場合にはgetを使います。

特に、メモリ使用量を節約したいモバイルではメモリ使用量が抑えられるflyを多用することになるでしょう。

最後に

今日紹介したメソッドはほんの入り口に過ぎません。
Ext JSにはほかにも数多くのDom操作エレメントがありますので、是非使いこなしてみてください。

リンク

document.getElementById
Ext.dom.Element
Ext.get
Ext.fly


つぎは、yasutomogさんです。

ksato
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした