タグ ‘プラグイン’ 一覧
[ExtJS事例紹介]ウェディングステージグレイセル
![はてなブックマーク - [ExtJS事例紹介]ウェディングステージグレイセル](http://b.hatena.ne.jp/entry/image/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/ "はてなブックマーク - [ExtJS事例紹介]ウェディングステージグレイセル")
![Livedoorクリップ - [ExtJS事例紹介]ウェディングステージグレイセル](http://image.clip.livedoor.com/counter/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/ "Livedoorクリップ - [ExtJS事例紹介]ウェディングステージグレイセル")
今回は弊社で作成したExtJSを活用したサイトの紹介です。
Wedding Stage GRACEL（ウエディングステージ グレイセル）は、愛知県の北東部に位置する総合結婚式場です。
今回サイトをリニューアルするにあたり管理画面をExtJSのViewportアプリで構築し、トップページやギャラリーなどではExt Coreを活用しています。
サイトはこちらになります。
Wedding Stage Gracel – 瀬戸、尾張旭、長久手エリアの結婚式場ならウェディングステージ グレイセル
株式会社sus4ニュースリリース グレイセル様Webサイトをリニューアルしました
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJSプラグイン紹介 タグ入力に最適なSuperBoxSelectプラグイン
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のサンプル
日本語でも動く動いているようです。
新規のテキストを入力するときは、そのまま入力してENTERで登録されます。
キー入力してサジェッション項目をフィルタリングすることもできます。既に追加済みの項目は表示しないようになっています。
使い方はプラグインを読み込めばxtypeをsuperboxselectと指定するだけです。CSSファイルと画像ファイルも読み込まないと表示がうまく行かないので注意が必要です。
データソースは通常のコンボボックスのようにstoreが使えるので、コンボボックスを作るの同じように設定します(displayFieldなど)。
開発者のサンプルサイトを見れば使い方は一目瞭然です。細かいメソッド等については、作者のサイトを御覧下さい。
イベントも用意されていて、additem,beforeadditem,beforeremoveitem,removeitemがあります。beforeのつくイベントではreturn にfalseを返すと追加・削除がキャンセルできます。
値のセットの仕方も、カンマ区切りの文字列でもオブジェクトでも指定可能でよく出来ています。
ただしそのままの状態ではカンマを入力して自動的に分割はしてくれずカンマも含めた文字列として登録されます。
beforeadditemでカンマを検出して、別途addItemすればなんとかなりそうです。
日本語もそれなりに上手く動きます。日本語でのリストの絞込みも可能です。ただし変換前の入力文字が後ろに回り込んでしまったりします。
見た目も動作感も良いので、タグを入力させるフォームを作るときにおすすめのプラグインです。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJSプラグイン紹介 垂直方向のタブパネル
垂直方向のタブパネルを作るプラグイン
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
垂直方向のタブパネルのサンプル
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
