ExtJSで楽しくRIA業務アプリ開発 » プラグイン http://extjs.blog.sus4.co.jp 株式会社sus4 開発チーム Wed, 01 Sep 2010 02:15:15 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 [ExtJS事例紹介]ウェディングステージグレイセル http://extjs.blog.sus4.co.jp/2010/02/25/extjs%e4%ba%8b%e4%be%8b%e7%b4%b9%e4%bb%8b%e3%82%a6%e3%82%a7%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e3%82%b9%e3%83%86%e3%83%bc%e3%82%b8%e3%82%b0%e3%83%ac%e3%82%a4%e3%82%bb%e3%83%ab/ http://extjs.blog.sus4.co.jp/2010/02/25/extjs%e4%ba%8b%e4%be%8b%e7%b4%b9%e4%bb%8b%e3%82%a6%e3%82%a7%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e3%82%b9%e3%83%86%e3%83%bc%e3%82%b8%e3%82%b0%e3%83%ac%e3%82%a4%e3%82%bb%e3%83%ab/#comments Thu, 25 Feb 2010 06:51:14 +0000 佐竹 裕行 http://extjs.blog.sus4.co.jp/?p=462 今回は弊社で作成したExtJSを活用したサイトの紹介です。

Wedding Stage GRACEL（ウエディングステージ グレイセル）は、愛知県の北東部に位置する総合結婚式場です。
今回サイトをリニューアルするにあたり管理画面をExtJSのViewportアプリで構築し、トップページやギャラリーなどではExt Coreを活用しています。

サイトはこちらになります。

Wedding Stage Gracel – 瀬戸、尾張旭、長久手エリアの結婚式場ならウェディングステージ　グレイセル

株式会社sus4ニュースリリース グレイセル様Webサイトをリニューアルしました

管理画面
管理画面では、ニュースの投稿、ギャラリーへの写真の追加、お問い合わせの管理などを1画面にViewportアプリで構築しています。

管理画面のサンプル

管理画面のサンプル

各項目の管理パネルではグリッドを使用して一覧表示を行い、ソーティングやフィルタリングしてローカルアプリのような操作感でコンテンツの管理が行えるようになっています。
お客様にも基本的な操作は別途マニュアルを確認しなくても、直感的にわかって頂けたようです。
またサーバーとはJSONをやり取りするだけですので、レスポンスも早く動作も軽快です。UIをExt JSに置き換えたことで業務の効率が良くなったのを実感していただけることと思います。

Ext Coreの活用
今回のサイトリニューアルでは管理画面だけでなく、トップページなど公開されているページにも積極的にExtを使用しました。
ExtJSをフルで丸々読み込むとライブラリのJSファイルだけでかなりの容量になってしまいますが、Ext Coreの場合はライブラリだけなら25kb程度です。Ext CoreではDOM操作やアニメーションなどのための便利な機能が詰まっています。今回はトップページのアニメーション、ギャラリーのLightboxなどに使用しています。

トップページ　アニメーション

トップページ

トップページ

トップページ上部に展開されるアニメーションにExt Coreのアニメーションを使用しています。アニメーション時のDOMの操作もExt行っています。
フェードイン・フェードアウトアニメーションもスムーズでなかなかです。

ギャラリー　lightbox

Ext Lightbox

Ext Lightbox


ギャラリーページでは写真をクリックするとLigthboxで写真を開きます。
LightboxはPrototype + Scriptaculousが有名ですが、今回はExt Coreのlightboxプラグインを使っています。
見た目は本家のLightboxそっくりですが、中身はExtで動いています。

今回は管理画面だけでなく、公開ページにもExtを使ってリニューアルを図りました。管理画面の直感的な操作に対する反応はなかなかよいので、実際の業務のなかでUIの置き換えによる業務効率の実感していただければありがたいです。またExt Coreを使ったアニメーションの動作もなかなかよさそうなので、これからも積極的に使っていこうと思います。

Share/Bookmark]]> http://extjs.blog.sus4.co.jp/2010/02/25/extjs%e4%ba%8b%e4%be%8b%e7%b4%b9%e4%bb%8b%e3%82%a6%e3%82%a7%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e3%82%b9%e3%83%86%e3%83%bc%e3%82%b8%e3%82%b0%e3%83%ac%e3%82%a4%e3%82%bb%e3%83%ab/feed/ 0 ExtJSプラグイン紹介 タグ入力に最適なSuperBoxSelectプラグイン http://extjs.blog.sus4.co.jp/2009/12/10/superboxselect/ http://extjs.blog.sus4.co.jp/2009/12/10/superboxselect/#comments Thu, 10 Dec 2009 02:47:02 +0000 佐竹 裕行 http://extjs.blog.sus4.co.jp/?p=362 ExtJS　プラグイン紹介 SuperBoxSelect

SuperBoxSelectプラグインは、タグセレクトボックスのFormFieldを作るpluginです。
ComboBoxのようにタグをドロップダウン、メニューで項目セレクトして、いくつも追加できます。

入手先はExt本家のフォーラムからどうぞ、ExtJS2.xも現状のExtJS3.ｘでも動くようです。
3.0.1では問題なく動作しました。

使い方

・HTML


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ExtJSプラグイン　superselectboxのサンプル</title>

    <!--Ext JS CSS-->
    <link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
    <!--Ext JS-->
    <script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../js/ext/ext-all.js"></script>
    <!--Ext JS Plugins-->
    <script type="text/javascript" src="../js/plugin/superboxselect/SuperBoxSelect.js"></script>
    <link rel="stylesheet" href="../js/plugin/superboxselect/superboxselect.css" type="text/css" />
    <!--my App JS-->
    <script type="text/javascript" src="superboxselect_sample.js"></script>
</head>
<body>
	<h1 style="background-color:#BDD3EF;">SuperBoxSelectのサンプル</h1>
	<div id="tag-form"></div>
</body>
</html>

・Javascript


Ext.onReady(function(){

    //ダミーのデータ
    var tagData = {
        tag:[
            {tag_name:'お知らせ',tag_id:1},
            {tag_name:'サンプル',tag_id:2},
            {tag_name:'チュートリアル',tag_id:3},
            {tag_name:'トレーニング',tag_id:4},
            {tag_name:'ビジネスExtJS',tag_id:5},
            {tag_name:'プラグイン',tag_id:6},
            {tag_name:'勉強会',tag_id:7},
            {tag_name:'営業向け',tag_id:8},
            {tag_name:'業務ウェブアプリケーションTips',tag_id:9},
            {tag_name:'業務システム',tag_id:10},
            {tag_name:'ExtJS',tag_id:11},
            {tag_name:'ExtJSアプリの紹介',tag_id:12},
            {tag_name:'ExtJS情報',tag_id:13},
            {tag_name:'JavaScript',tag_id:14},
            {tag_name:'JSON',tag_id:15},
            {tag_name:'Tips',tag_id:16},
            {tag_name:'XML',tag_id:17}
        ]
    };

    //ダミーのストア
    var tagStore = new Ext.data.JsonStore({
        data:tagData,
        root:'tag',
        fields:[
            {name:'tag_name'},
            {name:'tag_id'}

        ]
    });

    var tagForm = new Ext.form.FormPanel({
        id:'f2Form',
        renderTo: 'tag-form',
        title:'SuperBoxSelectを使ったタグフォームのサンプル',
        autoHeight: true,
        bodyStyle: 'padding:50px;',
        width: 700,
        items: [{
            //SuperBoxSelectのフォームを生成,xtypeはsuperboxselect
            xtype:'superboxselect',
            id:'superbox_form',
            allowAddNewData: true,
            fieldLabel: 'Tags',
            emptyText: 'タグを入力して[ENTER]もしくはリストから選択',
            resizable: true,
            name: 'tags',
            anchor:'100%',
            store: tagStore,
            mode: 'local',
            displayField: 'tag_name',
            valueField: 'tag_id',
            listeners: {
                beforeadditem: function(bs,v){
                    //beforeadditemイベントでfalseを返すとタグの追加をキャンセルできます。
                    //return false;
                },
                additem: function(bs,v){
                    //console.log('additem:', v);
                },
                beforeremoveitem: function(bs,v){
                    //beforeremoveイベントでfalseを返すとタグの削除をキャンセルできます。
                    //return false;
                },
                removeitem: function(bs,v){
                    //console.log('removeitem:', v);
                },
                newitem: function(bs,v){
                    v = v.slice(0,1).toUpperCase() + v.slice(1).toLowerCase();
                    var newObj = {
                        tag_id: v,
                        tag_name: v
                    };
                    bs.addItem(newObj);
                }
            }
        }]
    });
});

・実行結果

SuperBoxSelectのサンプル

SuperBoxSelectのサンプル

日本語でも動く動いているようです。
新規のテキストを入力するときは、そのまま入力してENTERで登録されます。
キー入力してサジェッション項目をフィルタリングすることもできます。既に追加済みの項目は表示しないようになっています。

使い方はプラグインを読み込めばxtypeをsuperboxselectと指定するだけです。CSSファイルと画像ファイルも読み込まないと表示がうまく行かないので注意が必要です。
データソースは通常のコンボボックスのようにstoreが使えるので、コンボボックスを作るの同じように設定します(displayFieldなど)。
開発者のサンプルサイトを見れば使い方は一目瞭然です。細かいメソッド等については、作者のサイトを御覧下さい。
イベントも用意されていて、additem,beforeadditem,beforeremoveitem,removeitemがあります。beforeのつくイベントではreturn にfalseを返すと追加・削除がキャンセルできます。

値のセットの仕方も、カンマ区切りの文字列でもオブジェクトでも指定可能でよく出来ています。
ただしそのままの状態ではカンマを入力して自動的に分割はしてくれずカンマも含めた文字列として登録されます。
beforeadditemでカンマを検出して、別途addItemすればなんとかなりそうです。

日本語もそれなりに上手く動きます。日本語でのリストの絞込みも可能です。ただし変換前の入力文字が後ろに回り込んでしまったりします。

見た目も動作感も良いので、タグを入力させるフォームを作るときにおすすめのプラグインです。

Share/Bookmark]]> http://extjs.blog.sus4.co.jp/2009/12/10/superboxselect/feed/ 0 ExtJSプラグイン紹介 垂直方向のタブパネル http://extjs.blog.sus4.co.jp/2009/11/18/extjs%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e7%b4%b9%e4%bb%8b-%e5%9e%82%e7%9b%b4%e6%96%b9%e5%90%91%e3%81%ae%e3%82%bf%e3%83%96%e3%83%91%e3%83%8d%e3%83%ab/ http://extjs.blog.sus4.co.jp/2009/11/18/extjs%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e7%b4%b9%e4%bb%8b-%e5%9e%82%e7%9b%b4%e6%96%b9%e5%90%91%e3%81%ae%e3%82%bf%e3%83%96%e3%83%91%e3%83%8d%e3%83%ab/#comments Wed, 18 Nov 2009 03:34:12 +0000 佐竹 裕行 http://extjs.blog.sus4.co.jp/?p=105 垂直方向のタブパネルを作るプラグイン

https://www.yui-ext.com/forum/showthread.php?t=26257（注.証明書が切れているので警告がでます。)

ExtJS基本機能では水平方向のタブパネルしか、作れませんがプラグインで垂直方向にもタブを設置できます。

使い方
使い方は簡単です。作者のページもしくはフォーラムからプラグインのJSファイルをダウンロードして設置します。
今回はこのポストで修正されているものを使いました。
https://www.yui-ext.com/forum/showthread.php?p=408789#post408789
単純に純正のExt.TabPanelの代わりに、Ext.ux.TabPanelを使うだけです。純正のExt.TabPanleのコンフィグと同じtabPositionのコンフィグにleftもしくはrightを設定するだけです。
ExtJS純正のExt.TabPanelクラスではタブの位置をパネルの上部（top）か下部(bottom)にしか指定できませんでしたが、このプラグインで左右にもタブを配置することができます。

水平タブパネルプラグイン　Ext.ux.TabPanel

水平タブパネルプラグイン　Ext.ux.TabPanel

垂直方向のタブパネルのサンプル

・html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ExtJSプラグイン　垂直パネルのコンフィグ　サンプル</title>

    <!--Ext JS CSS-->
    <link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
    <!--Ext JS-->
    <script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../js/ext/ext-all.js"></script>
    <!--垂直タブプラグイン-->
    <link rel="stylesheet" type="text/css" href="Ext.ux.TabPanel.css" />
    <script type="text/javascript" src="Ext.ux.TabPanel.js"></script>

    <script type="text/javascript" src="verticaltab-sample.js"></script>
</head>
<body>
    <div id="tabs"></div>
</body>
</html>

ExtJSのライブラリを読み込んだ後で、プラグインのファイルを追加します。今回はCSSファイルもあるのでそのファイルも追加します。

・Java Script


Ext.onReady(function(){
    var tabItems = [{
                title:'トップ--------',
                html:'トップのパネル'
            },{
                title:'1パネル',
                html:'1のパネル'
            },{
                title:'2パネル',
                html:'2のパネル'
            },{
                title:'3パネル',
                html:'3のパネル'
            },{
                title:'4パネル',
                html:'4のパネル'
            },{
                title:'5パネル',
                html:'5のパネル'
            },{
                title:'6パネル',
                html:'6のパネル'
            },{
                title:'7パネル',
                html:'7のパネル'
            },{
                title:'8パネル',
                html:'8のパネル'
            },{
                title:'9パネル',
                html:'9のパネル'
            },{
                title:'ボトム',
                html:'ボトムのパネル'
            }];
    new Ext.Viewport({
        layout:'fit',
        items:[
            new Ext.ux.TabPanel({
                activeTab:0,
                tabPosition:'left',
                height:200,
                textAlign:'right',
                defaults:{autoScroll: true},
                //enableTabScroll: true,
                items:[tabItems]
            })
        ]
    });
});

今回使ったバージョンではバグがあるらしく、enableTabScrollを設定した場合タブ幅がおかしくなる場合があります。(renderToを使うとダメのようです。)
Ext.ux.TabPanel.jsの中身は簡単で、単純にExt.TabPanelクラスを継承してタブのスタイルを書き換えるようにしているだけのようです。ちょっと時間があれば直せそうな気もします。

Share/Bookmark]]> http://extjs.blog.sus4.co.jp/2009/11/18/extjs%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e7%b4%b9%e4%bb%8b-%e5%9e%82%e7%9b%b4%e6%96%b9%e5%90%91%e3%81%ae%e3%82%bf%e3%83%96%e3%83%91%e3%83%8d%e3%83%ab/feed/ 0