Home >Web Front-end >JS Tutorial >Definition and extension examples of Extjs4 classes_extjs

Definition and extension examples of Extjs4 classes_extjs

WBOY
WBOYOriginal
2016-05-16 17:30:481062browse

General definition method, please note that methods and functions are added in different ways. (I don’t know why functions can only be added in override mode. If you know, please do it.)
Define a class and give it a method

Copy code The code is as follows:

Ext.define('Simple.Class',{
welcome:function(){
alert('Welcome to the app');
}
});

Use the Ext.override method to overload existing classes and add functions
Copy code The code is as follows:

Ext.override(Simle.Class,{
goodBye:function(){
alert(' Goodbye');
},
funAll:function(){
this.welcome();
this.goodBye();
}
});

Instantiate the class object and call the new method
Copy the code The code is as follows:

var app = new Simple.Class();
app.runAll(); //Welcome to the app Goodbye

Another way of writing overloading
Copy code The code is as follows:

Simple.Class.override({
// New members...
});

Actual example:
Copy code The code is as follows:

Ext.define('MyButton',{
extend:'Ext.Action',
initComponent: function(){
var me = this;
var initEnable = true ; //Initial permissions
}
});
Ext.override(MyButton,{
mysetenable:function(b){ //Add custom function to set button permissions
if ( this .initEnable ) {
if (b){
this.enable();
}
else{
this.disable();
}
}
else{
this.disable();
}
}
});

Example 2:
Copy code The code is as follows:

Ext.define('PO_Head_Add_Panel', {
extend: 'Ext.form.Panel',
alias: 'widget.PO_Head_Add_Panel',
//height:400,
//width:600,
frame: true,
layout: 'anchor', //양식은 두 개의 열로 나뉩니다.
bodyPadding: 5, //Offset 5px
//baseCls: "x-plain", //시스템 배경색을 사용하도록 지정
//defaults: { 앵커: "95%", msgTarget: "side" },
// 앵커: '100%',
기본값:{//양식 필드의 기본 속성을 균일하게 설정
//autoFitErrors: false,//오류 메시지를 표시할 때 필드 구성 요소 너비를 자동으로 조정할지 여부
labelSeparator:':',//Separator
labelWidth: 60,//레이블 너비
//width: 150,//필드 너비
allowBlank: false,//비워두어도 되는지 여부
//blankText: '허용되지 않음 to beempt', //비어 있지 않음으로 설정하면 비어 있을 때 프롬프트
labelAlign : 'right', // 라벨 정렬
msgTarget : 'qtip' // 플로팅 프롬프트 메시지 표시
// msgTarget : 'title' / /브라우저의 원래 부동 프롬프트 메시지 표시
//msgTarget:'under' //필드 아래에 프롬프트 메시지 표시
//msgTarget:'side' //오른쪽에 프롬프트 메시지 표시 필드
//msgTarget:'none' //프롬프트 정보를 표시하지 않음
//msgTarget:'errorMsg' //errorMsg 요소에 프롬프트 정보 표시
},
items:[{
xtype:'combobox',
이름: 'ToAddress',
labelWidth:70,
width:600,
queryMode: 'local',
store:TmpAddressStore,
displayField: 'AddrName',
valueField: 'AddrName',
editable : false,//입력 허용 여부
forceSelection: true,//옵션을 선택해야 합니다
msgTarget: 'side ',
allowBlank : false, //빈 값이 허용되는지 여부
fieldLabel: '배송 주소'
},{
xtype:'textfield',
name: 'HRemark' ,
labelWidth:70,
width:600,
msgTarget: 'side',
allowBlank: false, //공백 값 허용 여부
fieldLabel: 'Remarks'
}],
initComponent: function( ){
var me = this;
var PoType = ''; //
var TmpHeadRec = Ext.create를 사용하여 obj.PoType 속성을 정의할 수 있습니다. ('PO_HeadData');

Ext .apply(this, {
buttons: [{
text: 'Save',
handler:function(){
if (me .getForm().isValid()) { //제출된 데이터가 정규식을 준수하는지 판단
//저장 함수
}
}
}, {
text: '취소 ',
handler: function () {
me.ownerCt.hide();
}
}],
SetFormValue:function(){ //사용자 지정 메서드 obj.SetFormValue 호출 ()
me.TmpHeadRec = HeadStore.getAt( 0);
me.getForm().findField('POType').setValue(me.TmpHeadRec.get('POType'))
me .getForm().findField('PONum').setValue (me.TmpHeadRec.get('PONum'))
}
})

this.callParent(arguments); 🎜>}
})

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn