タグ ‘業務ウェブアプリケーションTips’ 一覧
ExtJS入門 DomHelperの使い方3 位置指定の追加と削除
DomHelperで要素を追加するの追加項目です。
DomHelperで要素の追加を行うときappendでは対象の要素の子の要素として要素を追加しましたが、insertBefore,insertAfterでは対象の要素の前後に要素を追加します。
今回はあえてパネルを使わずにやってみます。
DomHelperについてはこちらにサンプルがあります。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS入門18 グリッド レンダラーを使ってデザインを変える
グリッドのデザインを変更するための機能として、レンダラー機能があります。
レンダラーを使うと、グリッドに設定する値を調整したり、デザインを変更することができます。
レンダラーはカラムごとに設定します。そのためカラムモデルで各カラム設定に追加します。
前回のグリッドのサンプルを使って、レンダラーを使ってデザインを変更してみます。
Read the rest of this entry »
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS入門16 ListViewの使い方
DataViewと同じストアを簡易に表示させるクラスに、Ext.ListViewがあります。DataViewでは項目に対してHTMLのテンプレートを用意してストアの内容を表示させていましたが、ListViewでは簡易のグリッドのようにリスト項目を並べてくれます。
Ext.ListView
ExtJS -3.0 日本語APIドキュメント – Ext.ListView
http://extdocs.xenophy.com/?class=Ext.ListView
Ext.DataViewの使い方はこちらから
ExtJS入門15 DataViewの使い方
・PHP
<?php
$row = array();
for ($i = 0; $i < 10; $i++){
$row[$i] = array(
'title' => 'データ' . $i,
'datetime' => date('Y/m/d H:i:s')
);
}
$arr = array(
'total' => $i,
'row' => $row,
'success' => true
);
header("Content-Type: text/javascript; charset=utf-8");
echo json_encode($arr);
die();
?>
今回はJsonStoreへのデータは動的にPHPから提供するようにします。ここでは単純にtitleと時刻を生成してJSONで出力しています。
・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名古屋勉強会 ListViewの使い方</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>
<script type="text/javascript" src="listview.js"></script>
</head>
<body>
<div class="body">
</div>
</body>
</html>
HTMLは基本的にいつもと同じですね。
・JS
Ext.onReady(function(){
//ストアを用意する
var store = new Ext.data.JsonStore({
url:'listview.php',
totleProperty:'total',
root:'row',
autoLoad:true,
fields:['title','datetime']
});
new Ext.Panel({
renderTo:Ext.getBody(),
id:'myPanel',
title:'ListViewでStoreの内容を表示する',
items:{
xtype:'listview',
store: store,
autoHeight:true,
emptyText: 'No images to display',
reserveScrollOffset: true,
columns: [{
header: '項目',
width: .5,
dataIndex: 'title'
},{
header: '日付',
width: .5,
dataIndex: 'datetime',
}]
},
//ボタン設定
buttonAlign:'center',
buttons:[
{
text:'更新',
handler:function(){
store.reload();
}
}
]
});
});
・実行結果
ListViewサンプル
Ext.ListViewのxtypeはlistviewです。戻り値はBoxComponentですので親にパネルを設定して、そのitemsにListViewを設定します。
基本はDataViewとよく似ています。違いはtplコンフィグが無くcolumnsを指定します。columnsの書き方はグリッドのcolumModelとよく似ています。グリッドについてはまた詳しく解説します。
columnにはオブジェクトを配列で表示設定を指定します。
- headerは項目の見出しテキストを設定します
- dataIndexがストアに保持されているデータのプロパティ名を指定します。JsonStoreで指定したfieldsの項目の一つになります。/li>
- widthは各列の幅のパーセンテージを指定します。0.5とすると画面の50%ということになります。
実行すると、綺麗なグリッドが自動的に作られています。見出しをクリックするとソートの方向も変更できます。
APIドキュメントでは以下のような特徴を上げています。
Ext.ListViewは、Gridの様な高速で軽いリストビュー機能を提供します。 主な機能は、次の通りです。
・カラムのリサイズ
・カラム選択
・カラム幅は、初期状態でコンテナの比率に自動的に調整されます。
・あらゆる形式に対応するためレンダーとしてテンプレートが使用できます。
・水平スクロールはサポートされません。
・カラム編集はサポートされません。
より多機能はグリッドはExt.grid.GridPanelクラスを使うべきですが、お手軽にストアの内容をグリッド表示させてたい場合は有効です。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS入門15 DataViewの使い方
テンプレートの関連のクラスとしてもう一つ、Ext.DataViewクラスがあります。
DataViewはStoreに保持しているデータをページに表示できる形式でアウトプットしてくれるクラスです。
Ext.DataViewでは、BoxComponentが帰ってきます。
Ext.ListView
ExtJS -3.0 日本語APIドキュメント – Ext.DataView
http://extdocs.xenophy.com/?class=Ext.DataView
DataViewではストアに登録されているデータをシンプルに表示させるのに使います。
以下がサンプルコードです。
・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名古屋勉強会 DataViewの使い方</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>
<script type="text/javascript" src="dataview-paul.js"></script>
</head>
<body>
<div class="body">
</div>
</body>
</html>
今回はJS側でテンプレートを生成するんので、ほとんど何もありません。
・JS
Ext.onReady(function(){
var calcData = function() {
var data = [];
var item = {}
for (var i =0; i < 50; i++) {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
item = {
id:i,
rgb:String.format('rgb({0},{1},{2})', r, g, b)
};
data[i] = item;
}
return data;
};
var initData = calcData();
var store = new Ext.data.JsonStore({
autoLoad:true,
data:initData,
fields:['id','rgb']
});
//XTemplate.fromだとstyleに値を設定できない(Firefox)
var dataViewTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="paul">',
'<div>',
'<div style="background:{rgb};width:100%;height:15px;color:#EEE; font-size:small;">',
'<div>',
'</div>',
'</div>',
'</tpl>'
);
new Ext.Panel({
renderTo:Ext.getBody(),
id:'myPanel',
title:'DataViewでカラーバーを表示',
bodyStyle:{
'text-align':'center'
},
items:{
xtype:'dataview',
tpl:dataViewTpl,
store: store,
autoHeight:true,
itemSelector:'div.paul'
},
buttonAlign:'center',
buttons:[{
scale:'large',
text:'New Color!',
handler:function(){
var newData = calcData();
store.loadData(newData);
}
}]
});
});
まずストアを用意して、データを設定します。今回はJava Scriptでデータを生成していますが、urlでJSONを取得することもできます。
今回はランダムな色を生成してJsonStoreに保持します。アップデートボタンをつけてJsonStoreの値を変更するため関数を作っておきます。
dataViewはそのままではBoxComponentですので、パネルのアイテムとして設定します。これで階層が少し深くなりますが、パネルの機能が使えるようになります。
・実行結果
DataViewサンプル
ランダムに生成された色の値をdivに設定して表示します。ボタンをクリックして内容を更新することができます。なんちゃって横ポールスミスみたいな画面です。
XTemplateなどでは、毎回overwriteメソッドのように上書きを自分で指定していましたが、DataViewの場合はStoreの内容が更新されると自動的に再描画されます。
ストアの内容をさっと表示したい場所では便利です。また外部にAPIを持っていて、頻繁に更新するような場合もDataViewの方が簡単に表示を更新できます。
さらにストアの内容を簡易のグリッドとして表示するExt.ListViewクラスもあります。
ExtJS入門16 ListViewの使い方
http://extjs.blog.sus4.co.jp/2010/01/27/extjs-tutorial16/
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS入門14 DomHelperの使い方2
DOMヘルパーを使って、DOMのテンプレートを作ることができます。
イメージとしてはDomHelperでXTemplateを作る感じですね。
Ext.XTemplateについてはこちらを
- ExtJSで楽しくRIA業務アプリ開発 ExtJS入門10 Ext.XTemplateを使う
- ExtJSで楽しくRIA業務アプリ開発 ExtJS入門11 Ext.XtemplateでJS内のテンプレートを使う
- ExtJSで楽しくRIA業務アプリ開発 ExtJS入門12 Ext.XTemplateでfor,ifを使う
サンプルコード2 テンプレート化して使う。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS入門13 Ext.DomHelperの使い方
ExtJSでDOMを操作するときはExt.DomHelperを使うと便利です。
Ext.DomHelper – Ext 3.0 – API Documentation 日本語版
http://extdocs.xenophy.com/?class=Ext.DomHelper
詳しい解説はAPIドキュメントを見ていただくとして、ここでは使い方に重点をまとめてみます。
注意点としてはExt.DomHelperクラスはシングルトンであることです。
そのため直接インスタンスを生成してはいけません。newせずに直接メソッドを呼んであげます。
では実際の使い方です。
使い方
DomHelperクラスを起動して、メソッドを指定します。
構築するDOMのオブジェクトを渡す。
サンプルコード１
・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名古屋勉強会 DomHelperのサンプル1</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>
<script type="text/javascript" src="domhelper-sample1.js"></script>
</head>
<body>
<div class="body">
</div>
</body>
</html>
・javascript
Ext.onReady(function(){
var appendDom = function() {
console.debug('dom');
Ext.DomHelper.append('my-div',{
id:'url-list',
tag:'ul',
cn:[
{
tag:'li',
cn:[{
tag:'a',
html:'google',
href:'http://www.google.com'
}]
},{
//targetが追加されているa要素
tag:'li',
cn:[{
tag:'a',
html:'yahoo',
href:'http://www.yahoo.com',
target:'_blank'
}]
}
]
});
}
new Ext.Panel({
renderTo:Ext.getBody(),
id:'myPanel',
title:'DOMHelperで要素を追加する',
//パネルの内容
bodyStyle:{
padding:'15px',
'text-align':'center'
},
html: '<div id="my-div">',//このdivをターゲットにする。
//ボタン設定
buttonAlign:'center',
buttons:[
{
text:'要素を追加',
handler:function(){
appendDom();
}
}
]
});
});
・実行結果
DomHelperのサンプル
パネルのhtmlに設定されているdivが構築されると、listenersに設定されているappendDom関数でDOMHelperによるDOMの追加が行われています。Ext.DomHelperはシングルトンなのでnewせずに、そのままメソッドを呼びます。
appendメソッドはターゲットとなる要素にDOMを追加します。ターゲットとなる要素は要素のidで指定します。ここでは’my-div’という名前のdivが指定しています。
追加する要素はオブジェクトで設定します。
DomHelperに渡すオブジェクトの形式は以下用になっています
DomHelperエレメントオブジェクトの仕様
DomHelperエレメントオブジェクトは、エレメントを作成するときに使用します。 このオブジェクトは、次の4つの属性から成り立ちます。
tag :
タグ名
children : または cn
配列形式で、好きなだけ作成するエレメントを指定できます。 また、入れ子にすることで多階層のエレメントを構築することもできます。
cls :
class属性を指定します。
html :
エレメントに追加するinnerHTML形式の文字列を指定します。
APIドキュメントより
基本的には属性:設定値という指定方法です。html属性がinnerHTMLにあたります。
childrenまたはcnとして、その要素の子要素を設定します。
aタグのhref属性など、タグ別の属性値は href:url のように設定します。ここでは’yahoo’の方にだけtarget属性を設定しています。
tagの設定を省略するとdivとして生成されます。
サンプルのオブジェクトは以下のようになっています。
{
id:'url-list',
tag:'ul',
cn:[
{
tag:'li',
cn:[{
tag:'a',
html:'google',
href:'http://www.google.com'
}]
},{
//targetが追加されているa要素
tag:'li',
cn:[{
tag:'a',
html:'yahoo',
href:'http://www.yahoo.com',
target:'_blank'
}]
}
]
}
XTemplateはパネルの内容を一気に変更するのに向いており、DomHelperはパネル内の一部の要素を書き換えるのに向いています。
この二つのクラスをうまく使い分けることで、効率良くエレメントの操作が行えます。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS tips Htmleditorフィールドを必須項目にする
ExtJSのフォームフィールドにHtmleditorが有ります。このHtmleditorフィールドは文字通りTEXTの編集ができるリッチエディタのフィールド作ります。
このフィールドはExt.form.HtmlEditorクラスで定義されています。このクラスはExt.form.Fieldクラスを継承しています、同じサブクラスのExt.form.TextFieldにはallowBlankのコンフィグオプションがありますが、HtmlEditorクラスにはallowblankがないため必須項目にできません。
なんとなく頑張れば出来そうな気もしますが、他の人もきっとつまづいていそうなポイントだと思いフォーラムで解決方法を探してみると、簡単にみつかりました。
やり方はいくつかあるようですが、一番簡単そうなExt.form.HtmlEditorクラスをオーバーライドするを使ってみました。
Ext.form.HtmlEditorクラスをオーバーライドして必須にする
allowBlank:false, on html editor not working ? – Ext JS Forums
http://www.extjs.com/forum/showthread.php?t=37285より
コードはフォーラムのものそのままでは、エラーメッセージが英語なので、
日本語に変更しておきます。以下のコードでオーバーライドします。
Ext.override(Ext.form.HtmlEditor, {
markInvalid: function(msg){
if(!this.rendered || this.preventMark){
return;
}
msg = msg || this.invalidText;
switch(this.msgTarget){
case 'qtip':
this.iframe.qtip = msg;
this.iframe.qclass = 'x-form-invalid-tip';
Ext.get(this.iframe).addClass(this.invalidClass);
break;
}
return Ext.form.TextArea.superclass.markInvalid.call(this, [msg]);
},
clearInvalid: function(){
if(!this.rendered || this.preventMark){
return;
}
switch(this.msgTarget){
case 'qtip':
this.iframe.qtip = '';
Ext.get(this.iframe).removeClass(this.invalidClass);
break;
}
return Ext.form.TextArea.superclass.clearInvalid.call(this);
},
validateValue:function(){
if(this.allowBlank==false){
var value =this.getRawValue();
value = value.replace(/&amp;amp;nbsp;/gi,"");
value = value.replace(/<br>/gi,"");
value = value.trim();
if(value != ''){
this.clearInvalid();
return true;
}
else{
this.markInvalid("この項目は必須項目です。")
return false;
}
}else{
this.clearInvalid();
return true;
}
}
});
このコードをHtmlFieldを使うところに設定しておいてあげれば、allowBlank有効になります。
オーバーライドしたことによりHtmlEditorフィールドの妥当性チェックが有効になったので、送信ボタンをvalidationの状態と連動されることもできるようになります。
今回のフォームのようなよくありそうなつまづきポイントは、フォーラムに既に議論された解決方法が載っている場合がよくあります。本家のフォーラムは英語ではかなりの議論が行われているので、頑張って探してみると意外と良いものが転がっていたりします。
Ext本家のフォーラム(英語)
http://www.extjs.com/forum/
佐竹 裕行
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とモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
フォーカスが当たっていないExt.grid.GridPanelをキー操作で選択させる方法
業務アプリケーションには欠かせないキー操作ですが、focus()メソッドではどうにもならない場合があるので、掲載しておきます。
Ext.KeyNavを使うと、tabとかのオーバーライドができます。
で、その中でもfocus()メソッドでは次のフォーカスが当たらないPanelもありますので、いか参考にしてください。
1. To focus the grid.
After rendering the grid
grid.getSelectionModel().selectFirstRow();
grid.getView().focusEl.focus();
情報元はこちら：
Hasten Technologies Pvt Ltd
世の中何でも載っているもんだなぁ。
野村 亮之
2004年 名古屋市立大学芸術工学部在学中に株式会社sus4を設立・取締役に就任（現職）。2005年同大学を卒業。
デザイン視点でのウェブサービスの在り方をアプローチの基本として、さまざまなウェブサービス構築に従事。
2006年8月日本初のオンライン動画編集サービスClipCast(http://clipcast.jp/)を開始。2009年7月OTSベース動画解析サービスVideoAnalytics(http://video-analytics.jp/)を開始。
2009年8月Ext Japan LLCにてSenior Software Architectに就任。
