Ext オブジェクト指向開発実践 code_YUI.Ext 関連

これは Ext を学習しながら 1 つずつ書いたサンプル プログラムです。練習用であり、完全な機能はありません。今からブログに記録し、Ext を学習している友達と共有したいと思います。 🎜>

サンプル プログラムの簡単な説明:

このデモでは、GridPanel を使用してデータを表示し、ツールバー ボタンを GridPanel に追加し、データを追加するためのポップアップ フォームを提供する方法を示します。
使用される Ext コンポーネント
このデモには、Ext の GridPanel、FormPanel、Window の 3 つのコンポーネントが含まれます。
レンダリング


それではコードの説明を始めましょう。最初に GridPanel を作成するコード スニペットを見てみましょう

//データ リスト パネル クラスを定義します

PersonListGridPanel = Ext.extend(Ext.grid.GridPanel, {
insertWin: null,
updateWin: null,

constructor: function() {
//カスタム イベントを追加
this.addEvents("rowSelect");

this.insertWin = new InsertpersonInfoWindow();
this.insertWin.on("submit", this.onInsertWinSubmit, this); 🎜> this.updateWin = new UpdatePersonInfoWindow();
this.updateWin.on("submit", this.onUpdateWinSubmit, this);

PersonListGridPanel.superclass.constructor.call(this, { renderTo : Ext.getBody(),
width: 360,
height: 300,
frame:true,
sm: new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners: {
"rowselect": {
fn: function(sm, rowIndex, r) {
this.fireEvent("rowSelect", r) // カスタム イベントをトリガーします
} ,
scope: this
}
}
}),
store: new Ext.data.JsonStore({
data: [{name: "李宗胜", age: 28 、性別: "男性"}、{名前: "林伊伦"、年齢: 26、性別: "女性"}]、
フィールド: ["名前"、"性別"、"年齢"]
}) 、
ドラッグ可能: false、
enableColumnMove: false、
タイトル: "最初のグリッド"、
//iconCls:'icon-grid'、
colModel: new Ext.grid .ColumnModel( [
{header: "スタッフ名", width: 100, menuDisabled: true},
{header: "年齢", width: 100, sortable: true, dataIndex: "年齢", align: "right" 、ツールヒント: "プロンプト情報は次のとおりです"}、
{header: "Sex"、width: 100、sortable: true、dataIndex: "sex"、align: "center"}
]) ,
tbar: [{
text: "人物を追加",
handler: function() {
//****************** **** *******************************
//InsertpersonInfoWindow の Close メソッドがオーバーライドされていない場合
//呼び出す前にそのインスタンス insertWin が解放されているかどうかを確認する必要があります
//使用例:
//if (!this.insertWin) {
// this.insertWin = new InsertpersonInfoWindow();
//}
//this.insertWin.show();
//************************* ******** ******************
this.insertWin.show()
},
スコープ: this
}, "-", {
text: "Modifier",
handler: function() {
var r = this.getActiveRecord();
if (!r) return; >
//必ず Show メソッドを最初に呼び出してから、Load メソッドを呼び出す必要があります。
//それ以外の場合、データは表示されません
this.updateWin.show(); .load(r);
},
スコープ: this
}, "-", {
テキスト: "個人を削除",
ハンドラー: function() {
var r = this.getActiveRecord();
if (!r) return;
Ext.MessageBox.confirm("削除", "現在の人事情報を削除しますか? ", function(btn) {
if(btn == "yes") {
this.delRecord(r);
}
}, this);
},
scope: this
}]
});
},
getActiveRecord: function() {
var sm = this.getSelectionModel()
//選択されていない場合レコードを実行すると、例外がスローされますか?????
return (sm.getCount() === 0) ? null : sm.getSelected(); : function (r) {
this.getStore().add(r);
},
delRecord: function(r) {
this.getStore().remove(r); 🎜> },
onInsertWinSubmit: function(win, r) {
this.insert(r);
},
onUpdateWinSubmit: function(win, r) {
alert('onUpdateWinSubmit) ') ;
}
});

データメンテナンスパネルコード

//データ メンテナンス パネルを定義します。これは、後で定義する新規および変更されたフォームで使用されます
PersonInfoFormPanel = Ext.extend(Ext.form.FormPanel, {
constructor: function() {
PersonInfoFormPanel.superclass.constructor.call(this, {
//title: "個人情報",
frame: true,
width: 360,
labelWidth: 40,
defaultType: "textfield",
defaults: {アンカー: "92%" },
items: [{
name: "name", //ここでは id の代わりに name 属性が使用されていることに注意してください。 2 つのフォームを追加して挿入することで使用されます。ID の使用時に競合が発生し、コンポーネントが正しく表示されません。
allowBlank: false、
emptyText: "名前を入力してください" 、
blankText: "名前を空にすることはできません"
}、{
name: "年齢"、
fieldLabel: "年齢"、
vtype: "年齢"
}, {
hiddenName: "性別",
xtype: "combo",
fieldLabel: "Sex",

store: new Ext.data.SimpleStore({
フィールド: [
{名前: '性別'}
]、
データ:[["男性"]、["女性"]]
})、
モード: ' local',
displayField:'Sex',
triggerAction: 'all',
emptyText:'性別を選択...'
}]
})
},
getValues: function() {
if (this.getForm().isValid()) {
return new Ext.data.Record(this.getForm().getValues());
} 🎜>else {
throw Error("エラー メッセージ");
}
},
setValues: function(r) {
this.getForm().loadRecord(r); 🎜>},
reset: function() {
this.getForm().reset();
}
}); >データの保守 設計の観点から見ると、追加と更新の 2 つのアクションを操作するには 2 つのフォームを記述する必要があります。用心深い友人は、新しいアクションと更新されたアクションが同じデータ テーブルに対するものであると間違いなく考えるでしょう。そのため、フォームを 1 つ作成するだけで、それを再利用できますか?答えは「はい」です。次に、最初にフォームの基本クラスを作成します。

//新規追加、フォーム基本クラスを変更
personInfoWindow = Ext.extend(Ext.Window, {
form: null,

constructor: function() {
this.addEvents("submit");

this.form = new PersonInfoFormPanel();

//Ext.apply(this.form, {baseCls: "x-plain" });
personInfoWindow.superclass.constructor.call(this, {
plain: true,
width: 360,
modal: true, //モーダルフォーム
onEsc: Ext. emptyFn 、
closeAction: "hide"、
items: [this.form]、
buttons: [{
text: "OK"、
handler: this.onSubmitClick、
スコープ: this
}, {
text: "Cancel",
handler: this.onCancelClick,
scope: this
}]
}); this.onSubmitClick);
},
close: function() {
//CLose メソッドをオーバーライドする必要があります。
//それ以外の場合は、フォームが閉じられたときにエンティティが解放されます
this .hide();
this.form.reset();
},
onSubmitClick: function() {
//alert(Ext.util.JSON.encode. getValues ().data));
try {
this.fireEvent("submit", this, this.form.getValues());
this.close(); > catch(_err) {
return;
}
},
onCancelClick: function() {
this.close()
}); >


基本クラスを作成した後、継承されたメソッドを使用して新しいフォームと更新されたフォームを作成できます。

//新しいデータ フォームを定義します
InsertPersonInfoWindow = Ext.extend(PersonInfoWindow, {
title: "Add"
}); >//============================================= = ===============================


//編集データフォームを定義する
UpdatePersonInfoWindow = Ext.extend(PersonInfoWindow, {
title: "変更",

load: function(r) {

this.form.setValues(r);
}

}) ;

新規フォームと更新されたフォームを区別するには、それぞれの実装クラスで Title 属性を指定します。さらに、更新されたフォーム クラスで編集するデータをロードするための別のメソッドを追加する必要があります。 。 負荷。

スクリプト部分が完成しました。HTML での使用方法を見てみましょう。 HTML の参照コード