Ext JS Archive

Ext.js 2.0 書き方その2: HTML要素の取得

2007-12-07 (金)
Ext JS | JavaScript

最初に今回使うHTMLを用意します。今回はsecond.jsにスクリプトを書いていきます。

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inputlog - Ext test2</title>
<link rel="stylesheet" href="css/ext-all.css" type="text/css" />
<script src="js/jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="js/jquery-plugins.js" type="text/javascript"></script>
<script src="js/ext-jquery-adapter.js" type="text/javascript"></script>
<script src="js/ext-all.js" type="text/javascript"></script>
<script src="js/second.js" type="text/javascript"></script>
</head>
<body>
<div id="mydiv">テスト用div要素1</div>
<div class="section">テスト用div要素2</div>
</body>
</html>

Ext.jsでは他のライブラリと同じように、標準のDOMの代わりに簡単にDOMツリーを操作するための仕組みがあります。いくつか方法がありますが、主に使うのはExt.get()とExt.select()の二つでしょう。

Ext.get()

Ext.get()は要素のid属性から要素を取得するメソッドです。次のように使います。

Ext.onReady(function() {
    var mydiv = Ext.get('mydiv');
    mydiv.setStyle('color', 'red');
});

Ext.get()はdocument.getElementById()のように通常のDOM Element nodeを返すわけではありません。返ってくるのはExt.Elementというオブジェクトです。Ext.Elementには要素の操作を簡単にする多くのメソッドがあります。setStyle()はその中の一つで、CSSのプロパティ名、値の順で文字列として指定することでスタイルを適用することができます。また次のようにオブジェクトで渡せば複数のスタイルもかけられます。

Ext.onReady(function() {
    var mydiv = Ext.get('mydiv');
    mydiv.setStyle({
        color: 'red',
        background: '#eee'
    });
});

Ext.get()は文字列でid名を渡す代わりに、DOM Element Nodeやすでに取得したExt.Elementを渡しても同じように動作します。

Ext.onReady(function() {
    var mydiv = Ext.get(document.getElementById('mydiv'));
    mydiv.setStyle('color', 'red');
});

Ext.onReady(function() {
    var mydiv = Ext.get(Ext.get('mydiv'));
    mydiv.setStyle('color', 'red');
});

上のような書き方はあまり意味がありませんが、変数にいれてあるものがid名の文字列なのか、DOMノードやExt.Elementなのかを気にせずにExt.Elementを取得することができます。

Ext.select()

Ext.get()ではidをベースに取得していますが、idを使わずクラス名や要素名で要素を取得したいことはよくあります。Ext.select()を使うとCSSのセレクタで要素を取得することができ、非常に便利です。

Ext.onReady(function() {
    var mydivs = Ext.select('div');
    mydivs.setStyle('color', 'red');
});

Ext.select()が返すのはExt.Elementではありません。Ext.CompositeElementという複数の要素を扱えるオブジェクトです。別のオブジェクトですが、Ext.Elementで用意されている設定や更新に関する各メソッドをすべて実装しています。例のようにsetStyle()を利用した場合該当するすべての要素に大してスタイルを設定することになります。

ちなみにここまでのものをjQueryで書くと次のようになります。

$(function(){
    var mydivs = $('div');
    mydivs.css('color', 'red');
});

jQueryではセレクタを使った要素取得に手段が絞られているため、非常にわかりやすくなっています。jQueryに慣れているのであれば、こういった要素にスタイルを適用するといったプログラムはこちらを使ってしまってもよいかもしれません。

次回はjQueryではできない、Ext.jsならではの機能であるダイアログを扱う予定です。

Comments: 1
Trackbacks: 0

Ext.js 2.0 書き方その1: DOMツリー構築後に実行

2007-12-07 (金)
Ext JS | JavaScript

Ext.js 2.0 Bata1とjqueryを使ったエントリーを書いてから1か月が過ぎてしまいました。。。Ext.jsは2.0の正式版が発表されました。僕の方はやっとExtを使う仕事に戻ったのでExt.js関連のエントリーを書いていきたいと思います。

さて、まずはバージョンアップしてしまったので各ファイルの構成を作りなおします。今回は次のようにしました。

jquery 1.2.1 - jquery.comより最新版を取得）
jquery-plugin.js - Ext.js adapterフォルダにあるもの
ext-jquery-adapter.js - Ext.js adapterフォルダ
ext-all.js - Ext.js 本体全部いり
first.js - これから記述するスクリプトを書くためのファイル

基本的にはExt.js 2.0正式版のファイルにjqueryだけ最新版に差し替えただけです。（同梱されていたjquery.1.1.1より最新版のほうが動作速度の面で有利なため）これらを読み込ませるため、次のようなHTMLを用意しました。

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inputlog - Ext test1</title>
<meta name="description" content="Ext.jsのテストページ" />
<link rel="stylesheet" href="css/ext-all.css" type="text/css" />
<script src="js/jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="js/jquery-plugins.js" type="text/javascript"></script>
<script src="js/ext-jquery-adapter.js" type="text/javascript"></script>
<script src="js/ext-all.js" type="text/javascript"></script>
<script src="js/first.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

HTMLが用意できたところでfirst.jsを書いていきます。まずはExtがうまく動作しているか次のように書いてみましょう。

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

これでブラウザで表示してみます。アラートボックスでhelloと表示されればExt.jsはうまく動作しています。 Ext.onReadyを使うと引数に書かれたfunctionが、DOMツリーを構築後に実行されます。jqueryでいうところの$(function)と同じです。

$(function(){      // $(document).ready(function(){ としても同じ
    alert('hello');
));

今回はここまで。次回はHTML要素の取得について書きます。

Comments: 0
Trackbacks: 0

Ext.js 2.0 beta1 + jQuery の導入

2007-10-31 (水)
Ext JS | JavaScript | jQuery

jQueryはウェブサイトを作るには素晴らしいライブラリですが、管理画面のようなウェブアプリケーションに近いものの制作にはあまり向いていません。（ちょっと管理画面を制作する必要が出てきたのです）

最近リリースされたjQuery UIも試してみたのですが、情報が少ない、公式サイトからダウンロードしたスクリプトがエラーになる、サンプルで使われているものを強引にダウンロードするとファイルサイズが違うなど、まだ実用レベルに達していないようです。

そこで、以前から注目していたExt.jsを使って制作してみようかと思います。Ext.jsは美しいUIが特徴のAjaxライブラリです（2007年4月1日に1.0がリリースされました）。現在は単体でも動作しますが、もともとほかのライブラリと組み合わせて使うように設計されました。現在もこの設計は残っており、使い慣れたjQueryと組み合わせて使えます。今回は現在公開されているExt.js 2.0 beta1とjQueryの1.2.1をつかって開発します。

まず、Ext.jsのダウンロードページから2.0 beta1のzipをダウンロードします。jQueryも手元になければjQueryの公式サイトから最新版（ブログ記述時点では1.2.1）をダウンロードしておきます。

jQueryは1ファイルなので問題ないですが、ext.jsはzipファイルを解凍すると1500ファイル近くでてきてしまうので必要なファイルだけ取り出します。jQueryと合わせて使う場合はadapter > jqueryフォルダにある以下の2ファイルが必要です。

ext-jquery-adapter.js
jquery-plugins.js

jquery.jsもありますが公式サイトから落としてきた最新版を利用しても問題ありません（僕が使った限りではですが。。）。あとはトップ階層にある以下の２ファイルを取り出せばjsファイルは全部です。

ext-all.js
ext-all-debug.js

あと、resourcesの中の以下も取り出しておきます。

css/ext-all.css
imagesフォルダ

これでファイルはすべてそろいました。ベースとなるhtmlに次のような順番で読み込ませましょう（2007.11.21順序修正、uasiさんコメントでの指摘ありがとうございます！）

jquery.js（jquery本体）
jquery-plugins.js（ext.jsが使う必須プラグイン）
ext-jquery-adapter.js
ext-all.css

jQueryを使わない場合はadapter>extにあるext-base.jsを以下のように読ませてもOKです。（2007.11.21修正）

ext-base.js
ext-all.css

ちょっと長くなってしまったので実際のコードの書き方は別の記事で書きます。

Comments: 5
Trackbacks: 0

Home > JavaScript > Ext JS

Search

Feeds

Meta

Return to page top