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");
//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: "変更",
this.form.setValues(r);
}
新規フォームと更新されたフォームを区別するには、それぞれの実装クラスで Title 属性を指定します。さらに、更新されたフォーム クラスで編集するデータをロードするための別のメソッドを追加する必要があります。 。 負荷。
スクリプト部分が完成しました。HTML での使用方法を見てみましょう。 HTML の参照コード
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7621
15
1389
52
89
11
31
136
Go言語を使用してオブジェクト指向のイベント駆動型プログラミングを実装する方法
Jul 20, 2023 pm 10:36 PM
Go 言語を使用してオブジェクト指向イベント駆動プログラミングを実装する方法 はじめに: オブジェクト指向プログラミング パラダイムはソフトウェア開発で広く使用されており、イベント駆動プログラミングは、トリガーと処理を通じてプログラム フローを実現する一般的なプログラミング モデルです。イベント、コントロール。この記事では、Go 言語を使用してオブジェクト指向のイベント駆動型プログラミングを実装する方法とコード例を紹介します。 1. イベント駆動型プログラミングの概念 イベント駆動型プログラミングは、プログラムのフロー制御をイベントのトリガーと処理に移す、イベントとメッセージに基づくプログラミング モデルです。イベント駆動型で
Linux ext2 ファイル システムの物理ストレージ構造についての詳細な説明
Mar 14, 2024 pm 09:06 PM
Linuxext2 ファイル システムは、ほとんどの Linux オペレーティング システムで使用されるファイル システムであり、効率的なディスク ストレージ構造を使用してファイルとディレクトリのストレージを管理します。 Linuxext2 ファイル システムの物理ストレージ構造を詳しく調べる前に、まずいくつかの基本概念を理解する必要があります。 ext2 ファイル システムでは、データはファイル システム内で割り当て可能な最小単位であるデータ ブロック (ブロック) に格納されます。各データ ブロックのサイズは固定で、通常は 1KB、2KB、または 4KB です。
Java で Jackson を使用する @JsonIdentityInfo アノテーションの重要性は何ですか?
Sep 23, 2023 am 09:37 AM
@JsonIdentityInfo アノテーションは、Jackson ライブラリ内でオブジェクトに親子関係がある場合に使用されます。 @JsonIdentityInfo アノテーションは、シリアル化および逆シリアル化中にオブジェクトの ID を示すために使用されます。 ObjectIdGenerators.PropertyGenerator は、使用されるオブジェクト識別子が POJO プロパティから取得される状況を表すために使用される抽象プレースホルダー クラスです。構文@Target(value={ANNOTATION_TYPE,TYPE,FIELD,METHOD,PARAMETER})@Retention(value=RUNTIME)public
Go でオブジェクト指向プログラミングを探索する
Apr 04, 2024 am 10:39 AM
Go 言語は、型定義とメソッドの関連付けを通じてオブジェクト指向プログラミングをサポートします。従来の継承はサポートされていませんが、合成を通じて実装されます。インターフェイスは型間の一貫性を提供し、抽象メソッドを定義できるようにします。実際の事例では、顧客操作の作成、取得、更新、削除など、OOP を使用して顧客情報を管理する方法を示します。
PHP オブジェクト指向プログラミングにおけるフライウェイト パターンの分析
Aug 14, 2023 pm 05:25 PM
PHP オブジェクト指向プログラミングにおけるフライウェイト パターンの分析 オブジェクト指向プログラミングでは、デザイン パターンは一般的に使用されるソフトウェア設計手法であり、コードの可読性、保守性、スケーラビリティを向上させることができます。フライウェイト パターンは、オブジェクトを共有することでメモリのオーバーヘッドを削減する設計パターンの 1 つです。この記事では、PHP でフライウェイト モードを使用してプログラムのパフォーマンスを向上させる方法を説明します。フライ級モードとは何ですか？フライウェイト パターンは、異なるオブジェクト間で同じオブジェクトを共有することを目的とした構造設計パターンです。
PHP の高度な機能: オブジェクト指向プログラミングのベスト プラクティス
Jun 05, 2024 pm 09:39 PM
PHP における OOP のベスト プラクティスには、命名規則、インターフェイスと抽象クラス、継承とポリモーフィズム、依存関係の注入が含まれます。実際のケースには、ウェアハウス モードを使用してデータを管理する場合や、ストラテジー モードを使用して並べ替えを実装する場合などがあります。
Go言語のオブジェクト指向機能の分析
Apr 04, 2024 am 11:18 AM
Go 言語は、オブジェクト指向プログラミング、構造体によるオブジェクトの定義、ポインター レシーバーを使用したメソッドの定義、インターフェイスによるポリモーフィズムの実装をサポートしています。オブジェクト指向の機能は、Go 言語でのコードの再利用、保守性、カプセル化を提供しますが、クラスや継承、メソッド シグネチャ キャストといった従来の概念が欠如しているなどの制限もあります。
Golang にはクラスのようなオブジェクト指向機能はありますか?
Mar 19, 2024 pm 02:51 PM
Golang (Go 言語) には伝統的な意味でのクラスの概念はありませんが、構造体と呼ばれるデータ型が提供され、これによってクラスと同様のオブジェクト指向機能を実現できます。この記事では、構造体を使用してオブジェクト指向機能を実装する方法を説明し、具体的なコード例を示します。構造体の定義と使用法 まず、構造体の定義と使用法を見てみましょう。 Golang では、type キーワードを通じて構造を定義し、必要に応じて使用できます。構造には属性を含めることができます
