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: "수정",
this.form.setValues(r);
}
}) ;
새 양식과 업데이트된 양식을 구별하려면 해당 구현 클래스에 제목 속성을 지정해야 합니다. 또한 업데이트된 양식 클래스에서 편집할 데이터를 로드하는 또 다른 방법을 추가해야 합니다. . 짐.
스크립트 부분이 완성되었습니다. HTML에서 어떻게 사용하는지 살펴보겠습니다. HTML의 참조 코드