- 2007-12-07 (金) 20:10
- 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ならではの機能であるダイアログを扱う予定です。
- Newer: マウスの買い替え
- Older: Ext.js 2.0 書き方その1: DOMツリー構築後に実行
Comments:1
- ゲスト 08-05-11 (日) 22:42
-
Add Your Comment
Trackbacks:0
- Trackback URL for this entry
- http://blog.kyosuke.jp/2007/12/07/46/trackback
- Listed below are links to weblogs that reference
- Ext.js 2.0 書き方その2: HTML要素の取得 from inputlog