EXT関連
Ext.namespace('xxxx.common');
・・・ 以降、この名前空間のソースを記載
// 同じファイルに、異なる名前空間を設定することも可能
Ext.namespace('xxxx.function);
・・・ 以降、この名前空間のソースを記載
Ext.getDom('user_id').value = 入力した値
Ext.get('user_button_name').on('click', execEventName);
遷移先オブジェクト名.load({
params : {
'パラメータ名1' : 'パラメータ値1',
'パラメータ名2' : 'パラメータ値2'
}
});
new Ext.tree.TreeSorter(xxxx.orgTreePanel, {folderSort:true});
// TreePanel利用の流れ
// 各プロパティーの説明
xxxx.orgTreePanelLoader = new xxxx.OrgTreeLoader({
baseAttrs : { // 毎回利用する属性の設定
singleClickExpand : true
},
requestMethod : 'POST',
dataUrl : xxxxxx, // JSONデータ取得URL
baseParams: { // 毎回必ず送信するパラメータ設定
paramName1 : paramData1,
paramName2 : paramData2
},
preloadChildren : true // 初期処理時に、ノード展開処理を行うかのフラグ
// ノード展開イベントが発生するので、イベントのシーケンスに注意が必要です。
});
xxxx.orgTreePanelRoot = new Ext.tree.TreeNode({
id : '', // 空白でも可能
text : 'title',
icon : 'xxxx.png',
disabled : true,
expanded : false, // ルートノードを展開状態にするかのフラグ
draggable : false
});
xxxx.orgTreePanel = new xxxx.OrgTreePanel({
title : 'treeTitle',
id : 'orgTreePanel',
collapsed : true, // trueの場合、パネルを折りたたむレンダリングの指定がされます。(初期値：false)
ddGroup : 'orgDD', // 同一のグループIDに対してD&Dを許可
enableDD : true,
root : xxxx.orgTreePanelRoot,
loader : xxxx.orgTreePanelLoader,
rootVisible : true, // ルートノードを表示するかのフラグ
layout : 'fit', // レイアウト関連
});
xxxx.common.OrgTreePanel = function(cfg){
Ext.applyIf(this,cfg);
xxxx.common.OrgTreePanel.superclass.constructor.call(this, cfg);
};
Ext.extend(xxxx.common.OrgTreePanel, Ext.tree.TreePanel, {
initComponent: function(cfg) {
xxxx.common.OrgTreePanel.superclass.initComponent.call(this, cfg);
},
autoheight : true,
autoScroll : true,
animate : true,
containerScroll : true,
border : false,
dragOverData : null,
orgValue : false, ←クラス独自の変数を定義
orgMethod : function(nodeId) { ←拡張したいメソッドを追加
}
};
// Storeの拡張例
xxxx.OrgStore = function( cfg ){
// コンフィグ適用
Ext.applyIf(this,{
proxy : cfg.proxy,
url : cfg.url,
root : cfg.root,
reader : cfg.reader
});
// クラス定義のオーバーライド
Ext.apply(this, {
name: 'OrgStore',
listeners:{
beforeload: function(store , options){
// データ読み込み開始前に排他制御開始
},
load : function( store, record, operation ){
// データ読み込み完了時に排他制御解除
},
loadexception: function(proxytObj, store, callbackObj, ex) {
// データ読み込み失敗時に排他制御解除
}
});
// 親コンストラクタ呼び出し
xxxx.OrgStore.superclass.constructor.call(this);
};
Ext.extend(xxxx.OrgStore,Ext.data.Store, {
// 必要に応じて拡張
});
// メニューアイテムの生成
xxxx.common.OrgItem = new Ext.menu.Item({
icon : '/image/xxxx.png',
text : 'メニュー項目１',
handler: function() {
// メニュー選択時の処理を記載
}
});
// メニューの組み立て
orgMenu = new Ext.menu.Menu().add(
xxxx.common.OrgItem, // 上記で生成したメニューアイテムを追加
);
// メニューの表示
orgMenu.showAt(e.xy);
// 画面マスク処理開始
Ext.getBody().mask();
// マスク処理中の表示メッセージ
Ext.get('loading').show();
// 画面マスク処理終了
Ext.getBody().unmask();
Ext.get('loading').hide();
// テキストフィールド
xxxx.textField = new Ext.form.TextField({
applyTo: 'textField'
});
// 数値フィールド
xxxx.numberField = new Ext.form.NumberField({
applyTo: 'numberField',
allowDecimals: false,
allowNegative: false
});
// 時間指定フィールド
xxxx.timeField = new Ext.form.TimeField({
applyTo: 'timeField',
format: 'H:i',
increment: 30
});
// 日付指定フィールド
xxxx.dateField = new Ext.form.DateField({
applyTo: 'dateField',
format: 'Y/m/d',
value: new Date()
});
// コンボボックス用Store（JSON定義）
xxxx.store = new Ext.data.JsonStore({
fields: ['value', 'displayValue'],
data: [
{ 'value': '01', 'displayValue': '選択項目１' },
{ 'value': '02', 'displayValue': '選択項目２' }
]
});
// コンボボックス
xxxx.comboBox1 = new Ext.form.ComboBox({
renderTo: 'comboBox1d',
hiddenName: 'comboBox1',
store: xxxx.store,
valueField: 'value',
displayField: 'displayValue',
triggerAction: "all",
editable: false,
mode: 'local'
});
// チェックボックス
xxxx.checkbox = new Ext.form.Checkbox({
applyTo: 'checkbox'
});
// ラジオボタン
xxxx.radio = new Ext.form.Radio({
applyTo: 'radio',
id: 'radio'
});
// テキストエリア
xxxx.textArea = new Ext.form.TextArea({
applyTo: 'textArea',
autoHeight: true
});
Ext.getBody().createChild({
tag : 'div',
id : 'targetDiv',
style : 'display:none;'
}).getUpdater().formUpdate(actionFormName,'','',targetCallback);
↑ ※以下のタグを事前に、埋め込んでおく必要があります。
// formUpdate時のコールバック関数
function targetCallback(el, success, result) {
// アップデート用のタグを削除
// ※この処理がないとupdateする度に、不要ソースが溜まっていってしまう
Ext.get('targetDiv').remove();
try {
json = Ext.util.JSON.decode(result.responseText);
} catch (e){
return;
}
}
var varStore = new xxxx.OrgJsonStore({
url : '/xxxxxx.do',
root : 'data.data', // ネストデータの指定
fields : [{
name:'message',
type: 'string'
}]
});
varStore.load({callback: orgMethod});
xxxx.copyHashData = function(prmSrc, prmNew) {
var ret = {};
for( keys in prmSrc ) {
ret[keys] = prmSrc[keys];
}
for( keys in prmNew ) {
ret[keys] = prmNew[keys];
}
return ret;
}
// JSONデータをdecodeする場合には、Extで用意されている以下のクラスで簡単にdecodeできます。
json = Ext.util.JSON.decode(result.responseText);
// json.headerを取得する場合
var data = json.data;
// 配列になっている場合
var data = json[0].data;
