mond-tech ExtJS 忍者ブログ
焼肉屋さんが大好きです。いや、そうでも無い。 たぷたぷになってきてピンチです。
08
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

何処そこに既にあるし、今更感否めないけれど、まとまって良い感じに見れるのが無かったので作って家のサーバに置いた。

http://jn.orz.hm/jquery/ui_effect.html

まぁすこぶる大した事は無いんだけれどもね。

CheatSheet的に使おうと思って。

こう言うのをこれからポロポロと作ろ。

脳の記憶素子を余計な事に使いたく無い。
PR
PanelやWindowで、コンストラクタのパラメーターとしてタイトルとボディーを渡すのではなく、HTMLで定義したいなぁ、と言う場合の方法。

大半のケースがこっちだと思うんだけれども。

テンプレートエンジン系で、HTMLとして吐き出して、それをExtJSで装飾。
その方がスマートじゃない？非同期で取って来るパターンも多いけど。

* Script側

elでElementのidを指定する。
後はrenderするだけ。


<script type="text/javascript">
$(function(){
    var pan1 = new Ext.Panel({
        el: "pan-1",
        width: 320,
        height: 120,
        collapsible: true,
        titleCollapse: true,
        collapsible: true,
        autoShow: true,
    });

    var pan2 = new Ext.Panel({
        el: "pan-2",
        width: 320,
        height: 120,
        collapsed: true,
        collapsible: true,
        titleCollapse: true,
        hideCollapseTool: true,
        autoShow: true
    });
    pan1.render();
    pan2.render();
});
</script>


* HTML側

x-panel-header、x-panel-bodyを指定。
x-hiddenは、必須だからね。visibleをtrueにするまで隠すために。
これを入れないと、画面表示時に、定義部分がそのまま見えちゃう。
scriptのautoShowが、このhiddenを自動的に解除するフラグ。


<div id="pan-1" class="x-hidden">
    <div class="x-panel-header">タイトル</div>
    <div class="x-panel-body">
        メッセージ<br/>メッセージ
    </div>
</div>

<div id="pan-2" class="x-hidden">
    <div class="x-panel-header">タイトル2</div>
    <div class="x-panel-body">
        メッセージ2<br/>メッセージ2
    </div>
</div>


Ext.Panelに渡している値の説明をちょっとだけ。

collapsibleは、パネルを閉じるトグルボタンが表示され、パネルの開閉が可能になる。
titleCollapseは、タイトル部分を押すと、パネルの開閉が出来るようにする場合true。
hideCollapseToolは、トグルボタンを隠す。
titleCollapseをtrueにした場合、hideCollapseToolはfalseにしろ、
ってAPIドキュメントにはあるけれど、パッと見畳めるように見えなくなってしまうので、
表示しっぱなしの方が良いと思う。
jQueryを使ってWindowを開いたり閉じたりする。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2");</script>
<script type="text/javascript" src="../../js/ext-base.js"></script>
<script type="text/javascript" src="../../js/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/ext-all.css"/>

<script type="text/javascript">
$(function(){
    var win = new Ext.Window({
        title: 'タイトル',
        html: 'メッセージ<br/>メッセージメッセージメッセージメッセージ',
        autoWidth: true,
        height: 300,
        closeAction: "hide",
        layout:'fit'
    });

    $('#btnOpenWindow').toggle(
        function() {
            win.isVisible() ? win.hide(this) : win.show(this);
        },
        function() {
            win.isVisible() ? win.hide(this) : win.show(this);
        }
    );
});
</script>

<title></title>
</head>
<body>

<input type="button" id="btnOpenWindow" value="テスト"/>

</body>
</html>

closeActionは、デフォルトだとcloseに指定されていて、window objectがdestroyされる。
一度生成された物を使いまわしたければ、表示を切り替えるだけにしておけば良い。

win.isVisible() ? win.hide(this) : win.show(this);


の部分はアニメーションさせなくても良いなら

win.setVisible(!win.isVisible());


で事足りる。
商用で使うと開発時にお金が掛かる。開発者が一人ならば34,800円。
サーバにどれ程入れようと関係が無いらしい。太っ腹と言うか何と言うか・・・

サポート受けようと思うと、ライセンス費用が2倍近く掛かる。結構凶悪なライセンスｗ。ま、俺みたいに1人で開発して、サポートなんぞいらん、自分でどうにかする、って人間ならばお得感がある、と良い方向に解釈してみる。

でも、こんなライセンスじゃ流行りはせんよなぁ。
未だに売り物レベルでは無いと思うし。相当はまるんだよなぁ、こいつｗｗｗ。

http://extjs.co.jp/products/license.php


"Quid Pro Quo" principle (共存共栄の原理) に基づき、もしオープンソースライセンスの下でアプリケーションをリリースせずに利益を得ようとするなら、適正な数の商用ライセンスをExt Japanから購入しなくてはなりません。商用ライセンスを購入することにより、ソースコードを開示する義務はなくなります。


http://extjs.co.jp/store/extjs/

1人の開発者がExt JSをインストールして利用できます。開発するワークステーション数、Ext JSを配置するサーバー数、ドメイン数の制限はありません。

商用ライセンス (すべてのソースコードを含む) 34,800円
商用ライセンス + シルバーサポート (15%オフ) 65,800円


開発時にインストール(ローカルにコピー)せず、直接ExtのサイトからDEMOで呼んでるスクリプトを呼んでしまえば、ライセンスは買わなくて良いのか、とか思うけど。
インストールって言葉の解釈が、ブラウザのキャッシュにまで及んだとしても、ブラウザのキャッシュを一切残さない設定にしちゃったら回避出来るし。

って、そんな事しちゃダメだし、考えてもダメだよ！
YUI-Extから独立してとことこ歩き出したとってもCoolなJavaScriptフレームワークExt。
ちょっと使ってみたいなぁと思ったのでメモ開始。

どんなものか知らない人は、以下を見てみると良いよ。そのかっこ良さにしびれるはず。

http://extjs.com/deploy/dev/examples/samples.html

「Ext導入」

http://extjs.com/products/extjs/download.php

ここから落として来た。ファイルの数が多いので必要最低限だけ持ってった。

adapter/ext/ext-base.jsとext-all.jsを以下のように配置。

js/ext-all.js
js/ext-base.js


resourceの中からcss/ext-all.cssとimages/defaultをそのまま配置。

css/ext-all.css
images/default/


jQueryはGoogle AJAX APIで呼ぶと良い感じ。勝手に1.2系の最新版を呼んでくれる。これでメンテフリー。ハッピー。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2");</script>
Copyright c mond-tech All Rights Reserved
忍者ブログ / [PR]
にほんブログ村 ＩＴ技術ブログ Webサイト構築へ