2008年5月30日金曜日

ExtJs-15 パネルと本実装

久々のコーディング。

趣味としてのプログラミングは楽だ。
なんせ何もしがらみもなく自由だから。

Javascriptについてまったくのわからんちんな私は
こちらに
http://csharper.blog57.fc2.com/blog-date-20061114.html
お世話になりました。ありがとうございました。
と、オライリーのサイ本。すごく面白いです。


今日はポートレットに載せる基本グリッドクラスを
と、基本ポートレットクラスを。
特化したポートレットがない限りとりあえず表があれば事足りるだろう。。ということで。

//==================================================
/// <summary>
/// 基本ポートレット用グリッド
/// </summary>
/// argdata
/// categoryCode: DB取得時のカテゴリID
/// elementId: レンダリング対象エレメントID
/// height: 高さ
/// width: 幅
///------------------------------------------------
/// 2008/05/18 [20080530] 新規作成
//==================================================
function PortletGrid_Basic( argData )
{
//==================================================
//パブリックメンバ(this.XXX)
//==================================================
// var dsCategory; // カテゴリ情報
this._dsContents; // コンテンツ情報
this._grid; // グリッド
this._columnModel; // グリッド列形成情報
this._categoryCode = argData.categoryCode;
this._elementId = argData.elementId;
this._height = argData.height;
this._width = argData.width;
// this._categoryCode = "0000000000000001";
// this._elementId = "test";
//
// //var gridForm; // フォーム情報(aspx側でのフォームとシンクロ)
//==================================================
//プライベートメンバ(var XXX)
//※まだ、知識が浅いため、オライリー本のみに則る。【未使用】
//==================================================

//==================================================
//プライベートメソッド(var XXX = )
//注意:thisキーワードはwindowオブジェクトを指します
// メンバは直接名前を指定すること。
//※まだ、知識が浅いため、オライリー本のみに則る。【未使用】
//==================================================

//==================================================
//プレビレッジメソッド(this.XXX = )
//外部アクセス可(プライベートフィールド参照可)
//※まだ、知識が浅いため、オライリー本のみに則る。【未使用】
//==================================================

//==================================================
//パブリックメソッド((Class).prototype.XXX = )
//prototype継承
//プライベートフィールド参照不可
//==================================================
//--------------------------------------------------
/// <summary>
/// データソースセットアップ
/// </summary>
//--------------------------------------------------
PortletGrid_Basic.prototype.setupDataSource = function()
{
this._dsContents = new Ext.data.Store(
{
proxy: new Ext.data.HttpProxy({url:'../PortalManagement/readPortletBaseContents.aspx'}),
reader: new Ext.data.JsonReader(
{ root: 'rows', totalProperty: 'rowsCount', id: 'id' },
[
{name: 'id'},
{name: 'URL'},
{name: 'コンテンツ見出し'},
{name: 'コンテンツ概要'},
{name: 'コンテンツ管轄'},
{name: '表示開始日'}
]
)
}
);

//dsCategory.load({params:{start:0, limit:25}});
//_dsContents.load({params:{start:0, limit:25}});

//dsCategory.load({params:{start:0, limit:25}});
this._dsContents.load({params:{categoryCode:this._categoryCode}});
return this._dsContents;
}

//--------------------------------------------------
/// <summary>
/// グリッド列情報取得
/// </summary>
//--------------------------------------------------
PortletGrid_Basic.prototype.setupColumnModel = function()
{
this._columnModel = new Ext.grid.ColumnModel(
[
{
header: 'NEW',
width: 250,
sortable: true,
dataIndex: '表示開始日'
//renderer: change【拡張:未使用】
},
{
header: '項目名',
width:100,
sortable: true,
dataIndex: 'コンテンツ見出し'
//renderer: change【拡張:未使用】
},
{
header: '管轄',
width:100,
sortable:true,
dataIndex: 'コンテンツ管轄'
//renderer: change【拡張:未使用】
}
]
);
return this._columnModel;
}

//--------------------------------------------------
/// <summary>
/// グリッドの生成
/// グリッドパネルの継承とするため、やめた。→
/// </summary>
//--------------------------------------------------
// PortletGrid_Basic.prototype.buildGrid = function()
// {
// this._grid = new Ext.grid.GridPanel(
// {
// el: this._elementId,
// ds: this._dsContents,
// cm: this._columnModel,
// autoSizeColumns: true,
// selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
// height:this._height,
// width:this._width
// }
// );
// this._grid.render();
// }
// PortletGrid_Basic.prototype.create = function()
// {
// this.setupDataSource();
// this.buildGrid();
// }

PortletGrid_Basic.superclass.constructor.call(
this,
{
//renderTo : this._elementId,←これを呼ぶとportaladd時にChild作成時によろしくないよくわかってない。
ds: this.setupDataSource(),
cm: this.setupColumnModel(),
autoSizeColumns: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
height: this._height,
width: this._width
});

//--------------------------------------------------
/// <summary>
/// グリッドレンダリング時のメソッド //【拡張:未使用】
/// </summary>
//--------------------------------------------------
// function change(val){
// if(val > 0){
// return '<span style="color:green;">' + val + '</span>';
// }else if(val < 0){
// return '<span style="color:red;">' + val + '</span>';
// }
// return val;
// }

}
//Ext.grid.GridPanel継承
Ext.extend(PortletGrid_Basic, Ext.grid.GridPanel);





0 件のコメント: