Ext
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
* [[Ext]]
javascriptでprototype.jsはとってもいいんだけど、いつもUI...
#contents
** 環境
http://extjs.com/のhttp://extjs.com/products/extjs/downlo...
** サンプル
JSONで読み込んだデータを表示する。またボタンで、違うデー...
Aero風にする場合は、
<link rel="stylesheet" type="text/css" href="../../resou...
を付加します。~
サンプルはGridを中心に
-JSONのデータを読み込んで、Gridに表示~
-別のJSONのデータをボタンで読み込み直して、Gridに表示
-Gridのデータを書き換える。
-Gridにデータを追加する。
といったものです。
~
test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<title>test</title>
<link rel="stylesheet" type="text/css" href="../../resou...
<script type="text/javascript" src="../../adapter/protot...
<script type="text/javascript" src="../../adapter/protot...
<script type="text/javascript" src="../../adapter/protot...
<script type="text/javascript" src="../../adapter/protot...
<script type="text/javascript" src="../../ext-all.js"></...
<script type="text/javascript" src="xml-grid.js"></script>
</head>
<body>
<div id="example-grid" style="width:520px;height:300px;"...
<div id="msg" style="visibility: hidden"></div>
名前：<input type="text" id="name" /><br />
<input type="button" id="okButton" value="OK" />
<div id="test1"></div>
<input type="button" id="betuButton" value="別のデータを...
<input type="button" id="outButton" value="データを取得...
<div id="outdata"></div>
<div id="outdata2"></div>
</body>
</html>
<meta http-equiv="Content-Type" content="text/html; char...
これ重要。
test.js
var GridShow={
dataurl : 'test.json',
gridobj : '',
init : function(){
// create the Data Store
var RecordDef = Ext.data.Record.create([
{name: 'id'},
{name: 'name'},
{name: 'occupation'},
]);
var ds = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: this.dataurl}),
// the return will be JSON so lets set up a reader
reader: new Ext.data.JsonReader({
totalProperty: "results",
root: "rows",
id: "id"
}, RecordDef)
});
var cm = new Ext.grid.ColumnModel([
{header: "Id", width: 180, dataIndex: 'id'},
{header: "Name", width: 200, dataIndex: 'name'},
{header: "Occupation", width: 140, dataIndex: 'occupati...
]);
cm.defaultSortable = true;
// create the grid
this.gridobj = new Ext.grid.Grid('example-grid', {
ds: ds,
cm: cm
});
this.gridobj.render();
ds.load();
}
}
//処理の開始
Ext.onReady(GridShow.init,GridShow,true);
//単純にメッセージを出すだけ
var MessageShow={
//初期化
init : function(){
//初期値
Ext.get('test1').dom.innerHTML = "なし";
//OKボタンを押した時の処理
Ext.get('okButton').on('click', function(){
Ext.get('test1').dom.innerHTML = Ext.get('name').dom.val...
});
}
}
Ext.onReady(MessageShow.init,MessageShow,true);
var AnotherShow={
//初期化
init : function(){
//OKボタンを押した時の処理
Ext.get('betuButton').on('click', function(){
GridShow.dataurl = 'test3.json';
Ext.onReady(GridShow.init,GridShow,true);
});
}
}
Ext.onReady(AnotherShow.init,AnotherShow,true);
var OutShow={
//初期化
init : function(){
//OKボタンを押した時の処理
Ext.get('outButton').on('click', function(){
//件数表示
Ext.get('outdata').dom.innerHTML = '<br />' + GridS...
//データの中身を書き換える
for (i=0;i<GridShow.gridobj.getDataSource().getCoun...
Ext.get('outdata').dom.innerHTML = Ext.get('outdat...
GridShow.gridobj.getDataSource().getAt(i).set("nam...
//コミットしないと、グリッドに修正マークが表示され...
GridShow.gridobj.getDataSource().getAt(i).commit();
}
//レコード追加
var addRecord = new Ext.data.Record({id:10,name:'...
GridShow.gridobj.getDataSource().add(addRecord);
});
}
}
Ext.onReady(OutShow.init,OutShow,true);
test.json これについては、javaなり、phpで編集された結果、...
{ 'results': 2,
'rows': [
{ 'id': 1, 'name': 'hoge1', occupation: 'hoge1' },
{ 'id': 2, 'name': 'ほげ', occupation: 'hoge1' }
]
}
test3.json
{ 'results': 6,
'rows': [
{ 'id': 1, 'name': 'ほげ１', occupation: 'ホゲ１' },
{ 'id': 2, 'name': 'ほげ２', occupation: 'ホゲ１' },
{ 'id': 3, 'name': 'ほげ３', occupation: 'ホゲ１' },
{ 'id': 4, 'name': 'ほげ４', occupation: 'ホゲ１' },
{ 'id': 5, 'name': 'ほげ５', occupation: 'ホゲ１' },
{ 'id': 6, 'name': 'ほげ６', occupation: 'ホゲ１' }
]
}
** TIPS
*** API
-Ext.onRead~
DOMが完全に読みこまれた後に呼び出されます。その為全てのDO...
*** FireFoxで動くが、IEで動かない。
JSONで
{ 'results': 2,
'rows': [
{ 'id': 1, 'name': 'ほげ１', occupation: 'ホゲ１' },
{ 'id': 2, 'name': 'ほげ２', occupation: 'ホゲ２' },
]
}
とかにして返していたのですが、この最後の
{ 'id': 2, 'name': 'ほげ２', occupation: 'ホゲ２' ...
にカンマがあるとIEでは動いてくれませんでした... そりゃそ...
*** クロスドメイン
上のサンプルでデータ取得するところは、Ext.data.HttpProxy...
// load using script tags for cross domain, if the data ...
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
url: 'http://www.yui-ext.com/forum2/topics-remote.php'
}),
とありますので、同一ドメインはExt.data.HttpProxyで、他の...
ソースをみてないですが、JSONPあたりでしょうか。
***BLANK_IMAGE_URL
始めに
Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gi...
を指定しておきます。でないとhttp://extjs.com/s.gifを見に...
***MessageBoxは止まらない？
Ext.MessageBox.alert("タイトル", "ああああ");
Ext.MessageBox.alert("タイトル", "いいいい");
とした場合、1行目が表示されOKを押した後、2行目が表示され...
***IEでエラー
ext 2.1の時にIE7だと
<script type="text/javascript" src="javascripts/ext/adap...
<script type="text/javascript" src="javascripts/ext/adap...
<script type="text/javascript" src="javascripts/ext/ext-...
<script type="text/javascript" src="javascripts/ext/sour...
でext-lang-ja.jsでエラーがでる。ゆるせん!IE
**TODO
***DataView 検索
[[http://extjs.com/deploy/dev/examples/form/custom.html]]
** リンク
[[Tutorial: Introduction to Ext>http://extjs.com/tutorial...
チュートリアルです。~
[[Extメモ>http://www.saturn.dti.ne.jp/~npaka/ajax/ext/ind...
http://www.vedovelli.com.br/?m=200704~
[[Apolloのサンプルで使われた、美しきJavaScriptフレームワ...
[[WEB制作者が一度は触ってみておくべきオープンソース『Ext...
[[Ext.js入門: Grid編>http://labs.unoh.net/2007/10/extjs_g...
[[ysearch-extjs(Ext サンプル)>http://code.google.com/p/ys...
2008/03のSoftwareDesignで紹介されていました。Extの記事が...
[[Ext.js入門: Grid編 >http://labs.unoh.net/2007/10/extjs_...
[[IDEs, plugins and tools for Ext JS 2.0>http://extjs.com...
Eclipseでextの開発をするときに。
[[ExtJSについて>http://www123.ddo.jp/extwiki/]]~
[[ExtJapan>http://www.ext-japan.org/]]~
[[API ドキュメント>http://www.ext-japan.org/docs/]]が日本...
[[Tutorial:Introduction to Ext 2.0 (Japanese)>http://extj...
日本語のチュートリアルです。~
[[Ext 2.0 Tutorials>http://extjs.com/learn/Tutorials]]~
役に立つチュートリアルがいっぱいあります。ただgridのサン...
[[2.0/2.1を使ってみる>http://www123.ddo.jp/extwiki/]]~
Gridのサンプル参考にさせていただきました。ありがとうござ...
** 参考書籍
** コメント
-#comment
終了行:
* [[Ext]]
javascriptでprototype.jsはとってもいいんだけど、いつもUI...
#contents
** 環境
http://extjs.com/のhttp://extjs.com/products/extjs/downlo...
** サンプル
JSONで読み込んだデータを表示する。またボタンで、違うデー...
Aero風にする場合は、
<link rel="stylesheet" type="text/css" href="../../resou...
を付加します。~
サンプルはGridを中心に
-JSONのデータを読み込んで、Gridに表示~
-別のJSONのデータをボタンで読み込み直して、Gridに表示
-Gridのデータを書き換える。
-Gridにデータを追加する。
といったものです。
~
test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<title>test</title>
<link rel="stylesheet" type="text/css" href="../../resou...
<script type="text/javascript" src="../../adapter/protot...
<script type="text/javascript" src="../../adapter/protot...
<script type="text/javascript" src="../../adapter/protot...
<script type="text/javascript" src="../../adapter/protot...
<script type="text/javascript" src="../../ext-all.js"></...
<script type="text/javascript" src="xml-grid.js"></script>
</head>
<body>
<div id="example-grid" style="width:520px;height:300px;"...
<div id="msg" style="visibility: hidden"></div>
名前：<input type="text" id="name" /><br />
<input type="button" id="okButton" value="OK" />
<div id="test1"></div>
<input type="button" id="betuButton" value="別のデータを...
<input type="button" id="outButton" value="データを取得...
<div id="outdata"></div>
<div id="outdata2"></div>
</body>
</html>
<meta http-equiv="Content-Type" content="text/html; char...
これ重要。
test.js
var GridShow={
dataurl : 'test.json',
gridobj : '',
init : function(){
// create the Data Store
var RecordDef = Ext.data.Record.create([
{name: 'id'},
{name: 'name'},
{name: 'occupation'},
]);
var ds = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: this.dataurl}),
// the return will be JSON so lets set up a reader
reader: new Ext.data.JsonReader({
totalProperty: "results",
root: "rows",
id: "id"
}, RecordDef)
});
var cm = new Ext.grid.ColumnModel([
{header: "Id", width: 180, dataIndex: 'id'},
{header: "Name", width: 200, dataIndex: 'name'},
{header: "Occupation", width: 140, dataIndex: 'occupati...
]);
cm.defaultSortable = true;
// create the grid
this.gridobj = new Ext.grid.Grid('example-grid', {
ds: ds,
cm: cm
});
this.gridobj.render();
ds.load();
}
}
//処理の開始
Ext.onReady(GridShow.init,GridShow,true);
//単純にメッセージを出すだけ
var MessageShow={
//初期化
init : function(){
//初期値
Ext.get('test1').dom.innerHTML = "なし";
//OKボタンを押した時の処理
Ext.get('okButton').on('click', function(){
Ext.get('test1').dom.innerHTML = Ext.get('name').dom.val...
});
}
}
Ext.onReady(MessageShow.init,MessageShow,true);
var AnotherShow={
//初期化
init : function(){
//OKボタンを押した時の処理
Ext.get('betuButton').on('click', function(){
GridShow.dataurl = 'test3.json';
Ext.onReady(GridShow.init,GridShow,true);
});
}
}
Ext.onReady(AnotherShow.init,AnotherShow,true);
var OutShow={
//初期化
init : function(){
//OKボタンを押した時の処理
Ext.get('outButton').on('click', function(){
//件数表示
Ext.get('outdata').dom.innerHTML = '<br />' + GridS...
//データの中身を書き換える
for (i=0;i<GridShow.gridobj.getDataSource().getCoun...
Ext.get('outdata').dom.innerHTML = Ext.get('outdat...
GridShow.gridobj.getDataSource().getAt(i).set("nam...
//コミットしないと、グリッドに修正マークが表示され...
GridShow.gridobj.getDataSource().getAt(i).commit();
}
//レコード追加
var addRecord = new Ext.data.Record({id:10,name:'...
GridShow.gridobj.getDataSource().add(addRecord);
});
}
}
Ext.onReady(OutShow.init,OutShow,true);
test.json これについては、javaなり、phpで編集された結果、...
{ 'results': 2,
'rows': [
{ 'id': 1, 'name': 'hoge1', occupation: 'hoge1' },
{ 'id': 2, 'name': 'ほげ', occupation: 'hoge1' }
]
}
test3.json
{ 'results': 6,
'rows': [
{ 'id': 1, 'name': 'ほげ１', occupation: 'ホゲ１' },
{ 'id': 2, 'name': 'ほげ２', occupation: 'ホゲ１' },
{ 'id': 3, 'name': 'ほげ３', occupation: 'ホゲ１' },
{ 'id': 4, 'name': 'ほげ４', occupation: 'ホゲ１' },
{ 'id': 5, 'name': 'ほげ５', occupation: 'ホゲ１' },
{ 'id': 6, 'name': 'ほげ６', occupation: 'ホゲ１' }
]
}
** TIPS
*** API
-Ext.onRead~
DOMが完全に読みこまれた後に呼び出されます。その為全てのDO...
*** FireFoxで動くが、IEで動かない。
JSONで
{ 'results': 2,
'rows': [
{ 'id': 1, 'name': 'ほげ１', occupation: 'ホゲ１' },
{ 'id': 2, 'name': 'ほげ２', occupation: 'ホゲ２' },
]
}
とかにして返していたのですが、この最後の
{ 'id': 2, 'name': 'ほげ２', occupation: 'ホゲ２' ...
にカンマがあるとIEでは動いてくれませんでした... そりゃそ...
*** クロスドメイン
上のサンプルでデータ取得するところは、Ext.data.HttpProxy...
// load using script tags for cross domain, if the data ...
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
url: 'http://www.yui-ext.com/forum2/topics-remote.php'
}),
とありますので、同一ドメインはExt.data.HttpProxyで、他の...
ソースをみてないですが、JSONPあたりでしょうか。
***BLANK_IMAGE_URL
始めに
Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gi...
を指定しておきます。でないとhttp://extjs.com/s.gifを見に...
***MessageBoxは止まらない？
Ext.MessageBox.alert("タイトル", "ああああ");
Ext.MessageBox.alert("タイトル", "いいいい");
とした場合、1行目が表示されOKを押した後、2行目が表示され...
***IEでエラー
ext 2.1の時にIE7だと
<script type="text/javascript" src="javascripts/ext/adap...
<script type="text/javascript" src="javascripts/ext/adap...
<script type="text/javascript" src="javascripts/ext/ext-...
<script type="text/javascript" src="javascripts/ext/sour...
でext-lang-ja.jsでエラーがでる。ゆるせん!IE
**TODO
***DataView 検索
[[http://extjs.com/deploy/dev/examples/form/custom.html]]
** リンク
[[Tutorial: Introduction to Ext>http://extjs.com/tutorial...
チュートリアルです。~
[[Extメモ>http://www.saturn.dti.ne.jp/~npaka/ajax/ext/ind...
http://www.vedovelli.com.br/?m=200704~
[[Apolloのサンプルで使われた、美しきJavaScriptフレームワ...
[[WEB制作者が一度は触ってみておくべきオープンソース『Ext...
[[Ext.js入門: Grid編>http://labs.unoh.net/2007/10/extjs_g...
[[ysearch-extjs(Ext サンプル)>http://code.google.com/p/ys...
2008/03のSoftwareDesignで紹介されていました。Extの記事が...
[[Ext.js入門: Grid編 >http://labs.unoh.net/2007/10/extjs_...
[[IDEs, plugins and tools for Ext JS 2.0>http://extjs.com...
Eclipseでextの開発をするときに。
[[ExtJSについて>http://www123.ddo.jp/extwiki/]]~
[[ExtJapan>http://www.ext-japan.org/]]~
[[API ドキュメント>http://www.ext-japan.org/docs/]]が日本...
[[Tutorial:Introduction to Ext 2.0 (Japanese)>http://extj...
日本語のチュートリアルです。~
[[Ext 2.0 Tutorials>http://extjs.com/learn/Tutorials]]~
役に立つチュートリアルがいっぱいあります。ただgridのサン...
[[2.0/2.1を使ってみる>http://www123.ddo.jp/extwiki/]]~
Gridのサンプル参考にさせていただきました。ありがとうござ...
** 参考書籍
** コメント
-#comment
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
