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 の参照コード

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル