ExtJS
ExtJS vs jQuery
ExtJS：フレームワーク
jQuery：ライブラリ
※対象：ExtJS 3.x
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
Model：クライアントのデータ構造
Proxy：サーバと通信
Store：サーバから取得したデータを処理
★グリッド１
●グリッド定義
var grid = new Ext.grid.GridPanel({
id: 'gridID',
title: 'XXX一覧',
store : new Ext.data.Store(), 書き方１
//ds: new Ext.xxx.JsonStore(), 書き方２
enableHdMenu: true,
loadMask: true,
viewConfig:{
getRowClass: function(record, rIndex, rParams, store){
var colName = record.get('col3');
if(colName === 'XXX'){
//特定行を設定する
rParams.tstyle += "background-color:grey;";
}
}
},
tbar:[{
text: '作成',
id: 'button1',
handler:function(){
// Do Something
}
},{
text: '編集',
disabled: true,
hidden: true,
id: 'button2',
handler:function(){
// Do Something
}
}],
region :'center',
margins :'0 5 0 5',
columns: [{
header: 'カラム１',
width: 100, sortable: true, dataIndex: 'col1'
},{
header: 'カラム２',
width: 200, sortable: true, dataIndex: 'col2'
},{
header: 'カラム３',
width: 150, sortable: true, dataIndex: 'col3'
}],
stripeRows: true //行ごとに背景色を変える
});
//行選択イベント
grid.on(
'click',
function(e){
// Do Something
}
);
grid.on(
'keypress',
function(e){
// Do Something
}
);
//ダブルクリックイベント
grid.on(
'rowdblclick',
function(e){
// Do Something
}
);
// グリッドで既定値はセル単位の選択となる
var grid = new Ext.grid.EditorGridPanel({
selModel:new Ext.grid.RowSelectionModel, // 行単位の選択
...
});
※Ctrlを押したまま、複数行が選択可能
★Ext.grid.CheckboxSelectionModel
var sm = grid.getSelectionModel();
sm.selectAll();
sm.selectFirstRow();
sm.selectLastRow([flag]); // flag:trueの場合にチェック済みを保持
sm.selectNext();
sm.selectPrevious();
sm.selectRange(tartRow,ndRow, [Boolean keepExisting]);
sm.selectRow(row);
sm.selectRows(rows); // [1,3,5]
sm.clearSelections();
sm.deselectRange(startRow, endRow);
sm.deselectRow(row);
var data = sm.getSelections();
★コンポボックス
var combo = new Ext.form.ComboBox(...);
//先頭の値を設定
combo.setValue(combo.getStore().getAt(0).get('xxx'));
●リスナー
書き方１
var combo = new Ext.form.ComboBox({
id: 'comboID',
store: new Ext.data.ArrayStore({
fields: [
'ID','NAME'
],
data: [
['0', 'AAA'],['1', 'BBB']
]
}),
valueField: 'ID',
displayField: 'NAME',
autoWidth: true,
listeners: {
select : function( combo, record, index ) {
...
}
}
});
書き方２
var listener = function(){
...
};
combo.on('select', listener);
★サーバと通信
・Ext.Ajax.request JSON/HTML
・Ext.tree.TreeLoader JSON
・Ext.data.Store/XXXStore JSON/XML
・Ext.Element.update HTML
サンプル
Ext.Ajax.request({
url: '/xxx/yyy',
params: { id: 101, name: 'Andy' },
jsonData: { data1: xxx, data2: xxx },
method: 'POST',
timeout: 3000,
async: false,
headers: { "Content-Type": 'application/json; charset=utf-8' },
success: function (response, options) {
var result = Ext.decode(response.responseText);
if (result) {
// do something
}else {
Ext.MessageBox.alert('Error', result.msg);
}
},
failure: function (response, options) {
Ext.MessageBox.alert('Error', response.msg);
}
});
「Ext.data.JsonStore」＝「Ext.data.Store」＋「Ext.data.HttpProxy」＋「Ext.data.JsonReader」
var store = new Ext.data.JsonStore({
url: './xxx/data.json',
root: 'row',
totalProperty: 'totalCount',
fields: [
{ name:'name' },
{ name:'gender' },
{ name:'tel' },
{ name:'mail' },
{ name:'info' }
]
});
store.load();
「Ext.data.XmlStore」＝「Ext.data.Store」＋「Ext.data.HttpProxy」＋「Ext.data.XmlReader」
var store = new Ext.data.XmlStore({
url: './xxx/data.xml',
record: 'row',
totalRecords: 'totalCount',
fields: [
{ name:'name' },
{ name:'gender' },
{ name:'tel' },
{ name:'mail' },
{ name:'info' }
]
});
store.load();
★グリッド２
●データ作成
var store = new Ext.data.JsonStore({
autoDestroy: true,
root: 'row',
fields: [
{name: 'col1'},
{name: 'col2'},
{name: 'col3'}
],
url: '/commons/getJson'
});
//サーバへ引数
var params = {
ID: "101",
Name: "Tester"
};
//データストアにデータ読込
store.load({
params: params,
callback: function(records, options, success) {
if(success){
var record = records[0];
if(record) {
var info = record.store.reader.jsonData['info'];
// Do Something
store.getCount(); // OK
store.getTotalCount(); // OK
// 再ロード
store.reload();
}
}
}
});
store.getCount(); // NG 非同期処理なので、取得できない
store.getTotalCount(); // NG
//グリッドにデータセット
var grid = Ext.getCmp('gridID');
grid.reconfigure(store, grid.colModel);
//クリア
var store = new Ext.data.ArrayStore();
grid.reconfigure(store, grid.colModel);
●フィルターを設定
var filter = function(record) {
var combbox = Ext.getCmp('combboxID');
var value = combbox.getValue();
return record.get('ID') === value;
};
var grid = Ext.getCmp('gridID');
var store = grid.getStore();
//方法１
store.filter({
fn: filter,
scope: this
});
//リロード後でもフィルターも有効になる
var onStoreLoad = function(store, records, options){
//方法２
store.filterBy(filter);
};
store.on("load", onStoreLoad);
store.reload();
●データセットを取得する方法
方法１
var store = new Ext.data.JsonStore({
...
});
var grid = new Ext.grid.GridPanel({
store : new Ext.data.Store(),
...
});
grid.reconfigure(store, grid.colModel);
方法２
var store = new Ext.data.JsonStore({
...
});
store.load();
var grid = new Ext.grid.GridPanel({
store : store,
...
});
JSONデータ
({
"totalCount":"2",
"info":"dummy",
"row":
[{
"COL_1":"a",
"COL_2":"b",
"COL_3":"c"
},{
"COL_1":"d",
"COL_2":"e",
"COL_3":"f"
}]
})
★メッセージ
Ext.Msg.show({
title: 'サンプル',
msg: '失敗しました。',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
Ext.Msg.show({
title: 'サンプル',
msg: 'よろしいでしょうか？',
buttons: Ext.Msg.OKCANCEL,
icon: Ext.MessageBox.INFO,
fn : function(btn, text) {
if ( btn == 'ok' ) {
// do something
}
}
});
★ダイアログ
var grid = new Ext.grid.GridPanel({
// do something
});
var panel = new Ext.Panel({
// do something
});
var win = new Ext.Window({
title: 'Sample',
width: 200,
height: 400,
layout : 'border',
modal: true,
items: [grid, panel],
listeners: {
afterlayout: function(){ //show後
// do something
}
},
buttons: [{
text: '確定',
handler: function(){
// do something
}
},{
text: 'キャンセル',
handler: function(){
win.close();
}
}]
});
win.show();
★Ext.getとExt.fly
・Ext.get Cacheにより再利用
・Ext.fly 一回だけ メモリ消費小
var el1 = Ext.get('id'); // ID
var el2 = Ext.get(el1); // Ext.Element
var el3 = Ext.get(el1.dom); // HTMLElement
※flyも同様
Ext.fly('id').removeClass('error');
Ext.fly('id').hide();
★Arrayに関連するAPI
var idx = [1, 2, 3, 4, 5].indexOf(3); //2
var arr = [1, 2, 3, 4];
arr.remove(2);
var len = arr.length; //3
Ext.each([1, 2, 3, 4, 5], function(num){
console.log(num);
});
★Stringに関連するAPI
var str = String.format('{0}:{1}', '名前', 'Andy');
var str = String.leftPad('123', 5, '0'); //00123
var params = {
name: 'Andy',
age: 23
};
var str = Ext.encode(params); // {"name":"Andy","age":23}
var str = Ext.urlEncode(params); // name=Andy&age=23
var str = '{"name":"Andy","age":23}';
var obj = Ext.decode(str);
console.log(obj.name); // Andy
var str = 'name=Andy&age=23';
var obj = Ext.urlDecode(str);
console.log(obj.age); // 23