Ext 객체지향 개발실습 code_YUI.Ext 관련

이것은 Ext를 배우면서 하나씩 작성한 샘플 프로그램입니다. 단지 연습용일 뿐 완전한 기능은 없습니다. 지금 블로그에 기록하고 Ext를 배우는 친구들과 공유하고 싶습니다. 🎜>

샘플 프로그램에 대한 간략한 설명:

이 데모는 GridPanel을 사용하여 데이터를 표시하는 방법, GridPanel에 도구 모음 버튼을 추가하는 방법, 데이터를 추가하는 팝업 양식을 제공하는 방법을 보여줍니다.
사용된 Ext 구성 요소
이 데모에는 Ext의 GridPanel, FormPanel 및 Window의 세 가지 구성 요소가 포함됩니다.
렌더링


이제 코드 설명을 시작하겠습니다. 먼저 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(),
너비: 360,
높이: 300,
프레임:true,
sm: new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners: {
"rowselect": {
fn: function(sm, rowIndex, r) {
this.fireEvent("rowSelect", r) //사용자 정의 이벤트 트리거
} ,
범위: 이
}
}
}),
store: new Ext.data.JsonStore({
data: [{name: "lee宗胜", age: 28 , 성별: "남성"}, {이름: "림伊伦", 나이: 26, 성별: "여성"}],
필드: ["이름", "성별", "나이"]
}) ,
draggable: false,
enableColumnMove: false,
title: "첫 번째 그리드",
//iconCls:'icon-grid',
colModel: new Ext.grid .ColumnModel( [
{header: "직원 이름", width: 100, menuDisabled: true},
{header: "Age", width: 100, sortable: true, dataIndex: "age", align: "right" , tooltip: "여기에 프롬프트 정보가 있습니다."},
{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()
},
범위: 이
}, "-", {
text: "Modifier",
handler: function() {
var r = this.getActiveRecord()
if (!r) return; >
//확실히 Show 메소드를 먼저 호출한 다음 Load 메소드를 호출해야 합니다.
//그렇지 않으면 데이터가 표시되지 않습니다.
this.updateWin.show()
this.updateWin; .load(r);
},
범위: 이
}, "-", {
텍스트: "사람 삭제",
처리기: function() {
var r = this.getActiveRecord();
if (!r) return;
Ext.MessageBox.confirm("Delete", "현재 인사 정보를 삭제하시겠습니까? ", function(btn) {
if(btn == "yes") {
this.delRecord(r);
}
}, this);
},
범위: this
}]
});
},
getActiveRecord: function() {
var sm = this.getSelectionModel()
//선택한 항목이 없는 경우 기록하면 예외가 발생합니까?????
return (sm.getCount() === 0) ? null : sm.getSelected()
insert : 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: "Person Info",
frame: true,
width: 360,
labelWidth: 40,
defaultType: "textfield",
defaults: { 앵커: "92%" },
items: [{
name: "name", //여기에서는 PersonInfoFormPanel이 id 대신 name 속성이 사용된다는 점에 유의하세요. 두 개의 양식을 추가하고 삽입하여 사용됩니다. ID 사용 시 충돌이 발생하여 구성요소가 올바르게 표시되지 않습니다.
fieldLabel: "Name",
allowBlank: false,
emptyText: "이름을 입력하세요." ,
blankText: "이름은 비워둘 수 없습니다."
}, {
name: "age",
fieldLabel: "Age",
vtype: "age"
}, {
hiddenName: "sex",
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();
}
})

데이터 유지 관리 디자인 관점에서 추가 및 업데이트라는 두 가지 작업을 수행하려면 두 가지 양식을 작성해야 합니다. 신중한 친구들은 새로운 작업과 업데이트된 작업이 동일한 데이터 테이블에 대한 것이라고 확실히 생각할 것입니다. 그러면 양식 하나만 작성하고 다시 사용할 수 있습니까? 대답은 '예'입니다. 다음으로 먼저 양식 기본 클래스를 작성하겠습니다.

//새로 추가, 폼 기본 클래스 수정

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",
항목: [this.form],
버튼: [{
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(this.form. 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);
}
}) ;

새 양식과 업데이트된 양식을 구별하려면 해당 구현 클래스에 제목 속성을 지정해야 합니다. 또한 업데이트된 양식 클래스에서 편집할 데이터를 로드하는 또 다른 방법을 추가해야 합니다. . 짐.

스크립트 부분이 완성되었습니다. HTML에서 어떻게 사용하는지 살펴보겠습니다. HTML의 참조 코드

Ext.BLANK_IMAGE_URL = "http://localhost:8080/ext-2.2/resources/images/default/s.gif";

Ext.apply(Ext.form.VTypes, {
"age": function(_v) {
if (/^d $/.test(_v)) {
var _age =parseInt(_v)
if ((_age > 0) && (_age }
return false;
},
"ageText": "나이는 0에서 200 사이여야 합니다.",
"ageMask": / [0-9]/i
});

Ext.onReady(function() {
new PersonListGridPanel();
});

코드가 매우 간결하고 명확합니다. PersonListGridPanel에는 신규 및 수정된 양식 개체가 포함되어 있고 신규 및 수정된 양식은 데이터 편집을 담당하는 PersonInfoFormPanel을 사용하므로 생성하기만 하면 됩니다.
VType은 데이터 검증을 위해 PersonInfoFormPanel에서 사용됩니다.
새로운 양식과 수정된 양식은 사용자가 PersonInfoFormPanel에 입력한 데이터를 저장하기 위해 ListGrid로 다시 전송하거나 사용자가 편집할 수 있도록 표시하기 위해 ListGrid의 데이터를 PersonInfoFormPanel로 전송하는 인터페이스일 뿐입니다.

전체 HTML 코드와 JavaScript 코드 파일을 첨부하세요.
Grid.html

PersonListGridPanel.js

//데이터 목록 패널 클래스 정의
PersonListGridPanel = Ext.extend(Ext.grid.GridPanel, {
insertWin: null,
updateWin: null,

생성자: 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); .superclass.constructor.call(this, {
renderTo: Ext.getBody(),
width: 360,
height: 300,
frame:true,
sm: new Ext. Grid.RowSelectionModel({
singleSelect:true,
리스너: {
"rowselect": {
fn: function(sm, rowIndex, r) {
this.fireEvent("rowSelect" , r); //사용자 정의 이벤트 트리거
},
scope: this
}
}
}),
store: new Ext.data.JsonStore({
데이터: [{이름: "lee宗胜", 연령: 28, 성별: "남성"}, {이름: "림伊伦", 연령: 26, 성별: "여성"}],
필드: ["이름 " , "sex", "age"]
}),
draggable: false,
enableColumnMove: false,
title: "첫 번째 그리드",
//iconCls:'icon- Grid ',
colModel: new Ext.grid.ColumnModel([
{header: "직원 이름", width: 100, menuDisabled: true},
{header: "Age", width: 100, sortable : true, dataIndex: "age", align: "right", tooltip: "프롬프트 정보는 다음과 같습니다."},
{header: "Sex", width: 100, sortable: true, dataIndex: "sex" , align: "center"}
]),
tbar: [{
name: "btnFirst",
//text: "First",
iconCls: "x-tbar- 페이지 우선",
핸들러: 함수() {
this.getSelectionModel().selectFirstRow();
},
범위: 이
}, {
이름: " btnPrev" ,
//text: "Prev",
iconCls: "x-tbar-page-prev",
handler: function () {
this.getSelectionModel().selectPrevious() ;
},
범위: 이
}, {
이름: "btnNext",
//text: "다음",
iconCls: "x-tbar-page- next" ,
handler: function () {
this.getSelectionModel().selectNext();
},
scope: this
}, {
name: "btnLast" ,
//text: "마지막",
iconCls: "x-tbar-page-last",
handler: function () {
this.getSelectionModel().selectLastRow()
},
범위: 이
}, "-", {
텍스트: "추가",
처리기: function() {
//******* * ******************************************
//있는 경우 InsertPersonInfoWindow의 Close 메소드를 작성하세요
//호출하기 전에 해당 인스턴스 insertWin이 해제되었는지 확인해야 합니다
//사용 예:
//if (!this.insertWin) {
// this.insertWin = new InsertPersonInfoWindow()
//}
//this.insertWin.show()
//************* ******* *****************************
this.insertWin.show()
},
범위: this
}, "-", {
text: "수정",
handler: function() {
var r = this.getActiveRecord()
if (!r ) return


//양식에 데이터를 채우는 방법은 무엇인가요?
this.updateWin.show()
this.updateWin.load(r);
} ,
범위: this
}, "-", {
text: "Delete",
handler: function() {
var r = this.getActiveRecord() ;
if (!r) return
Ext.MessageBox.confirm("삭제", "현재 인사 정보를 삭제하시겠습니까? ", function(btn) {
if(btn == "yes") {
this.delRecord(r);
}
}, this);
},
범위: this
}]
});
},
getActiveRecord: function() {
var sm = this.getSelectionModel()
//선택한 항목이 없는 경우 기록하면 예외가 발생합니까?????
return (sm.getCount() === 0) ? null : sm.getSelected()
insert : 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: "Person Info",
frame: true,
width: 360,
labelWidth: 40,
defaultType: "textfield",
기본값: { 앵커: "92%" },
항목: [{
name: "name", //여기에서는 id 대신 name 속성이 사용됩니다. PersonInfoFormPanel은 두 개의 양식을 추가하고 삽입하여 사용되기 때문입니다. id를 사용하면 충돌이 발생하여 구성 요소가 올바르게 표시되지 않습니다.
fieldLabel: "이름",
allowBlank: false,
emptyText: "이름을 입력하세요",
blankText: "이름은 비워둘 수 없습니다."
}, {
name: "age",
fieldLabel: "Age",
vtype: "age"
}, {
hiddenName: "sex",
xtype: "combo",
fieldLabel: "Sex",

store: new Ext.data.SimpleStore({
fields: [
{name: 'Sex'}
],
data:[["male"], [ "female"] ]
}),
mode: '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 ) {
//alert(Ext.util.JSON.encode(r.data))
this.getForm().loadRecord(r)
},
reset: function() {
this.getForm().reset();
}
})

//=============== ==== ============================================= ==== =======

//폼 기본 클래스 추가 및 수정
PersonInfoWindow = Ext.extend(Ext.Window, {
form: null,

생성자: 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,
scope: this
}, {
text: "Cancel",
handler: this.onCancelClick,
scope: this
}]
}) ;
//alert(this.onSubmitClick);
},
close: function() {
//CLose 메소드를 재정의해야 합니다.
//그렇지 않으면 양식이 종료됨 실현이 해제되었습니다
this.hide();
this.form.reset()
},
onSubmitClick: function() {
//alert(Ext.util) .JSON.encode(this.form.getValues().data));
try {
this.fireEvent("submit", this, this.form.getValues()); ();
}
catch(_err) {
return;
}
},
onCancelClick: function() {
this.close(); }
})

//=============================== ===== ========================================

//새 추가 데이터 양식 정의
InsertPersonInfoWindow = Ext.extend(PersonInfoWindow, {
title: "Add"
})

//======== ==== ============================================= ==== ================

//데이터 편집 양식 정의
UpdatePersonInfoWindow = Ext.extend(PersonInfoWindow, {
title: "수정",
로드: function(r) {
this.form.setValues(r)
}
});