Extjs4の定義と拡張例classes_extjs

一般的な定義方法。メソッドと関数の追加方法が異なることに注意してください。 (なぜオーバーライドモードでしか関数を追加できないのかはわかりません。知っている方はやってみてください。)
クラスを定義してメソッドを与えます

コードをコピー コードは次のとおりです:

Ext.define('Simple.Class',{
welcome:function(){
alert('アプリへようこそ');


Ext.override メソッドを使用して既存のクラスをオーバーロードし、関数を追加します

コードをコピーします コードは次のとおりです:

Ext.override(Simle.Class,{

goodBye:function() {
alert('Goodbye');
},
funAll:function(){
this.goodBye();
});


クラス オブジェクトをインスタンス化し、新しいメソッドを呼び出します

コードをコピーします

var app = new Simple.Class(); app.runAll(); // アプリへようこそ

別の方法オーバーロードの作成

コードをコピー

コードは次のとおりです。 Simple.Class.override( { // 新しいメンバー...

});

実際の例:

コードをコピー

コードは次のとおりです。 Ext.define('MyButton',{ extend:'Ext.Action',

initComponent: function(){

var me = this;
var initEnable = true ; //初期権限
}
});
Ext.override(MyButton,{
mysetenable:function(b){ / /ボタンの権限を設定するカスタム関数を追加します
if ( this .initEnable ) {
if (b){
this.enable();
}
else{
this.disable ();
}
}
else{
this.disable();
}
}); :




コードをコピー

コードは次のとおりです:

Ext.define('PO_Head_Add_Panel', {
extend: 'Ext.form.Panel',
alias: 'widget.PO_Head_Add_Panel',
//height:400,
//width:600,
frame: true,
layout: 'anchor', //The form is divided into two columns
bodyPadding: 5, //Offset 5px
//baseCls: "x-plain", //Specify to use the system background color
//defaults: { anchor: "95%", msgTarget: "side" },
// anchor: '100%',
defaults:{//Uniformly set the default attributes of form fields
//autoFitErrors: false,//Whether to automatically adjust the field component width when displaying error messages
labelSeparator:':',//Separator
labelWidth: 60,//Label width
//width: 150,//Field width
allowBlank: false,//Whether it is allowed to be empty
//blankText: 'Not allowed to be empty', //If set Not empty, prompt when empty
labelAlign : 'right', // Label alignment
msgTarget : 'qtip' // Display a floating prompt message
// msgTarget : 'title' / /Display a browser's original floating prompt message
//msgTarget:'under' //Display a prompt message below the field
//msgTarget:'side' //Display a prompt message to the right of the field
//msgTarget:'none' //Do not display prompt information
//msgTarget:'errorMsg' //Display prompt information in errorMsg element
},
items:[{
xtype :'combobox',
name: 'ToAddress',
labelWidth:70,
width:600,
queryMode: 'local',
store:TmpAddressStore,
displayField: ' AddrName',
valueField: 'AddrName',
editable : false,//Whether input is allowed
forceSelection: true,//An option must be selected
msgTarget: 'side',
allowBlank : false, //Whether empty values ​​are allowed
fieldLabel: 'Shipping address'
},{
xtype:'textfield',
name: 'HRemark',
labelWidth:70,
width:600,
msgTarget: 'side',
allowBlank: false, //Whether blank values ​​are allowed
fieldLabel: 'Remarks'
}],
initComponent: function( ){
var me = this;
var PoType = ''; //You can define the attribute obj.PoType using
var TmpHeadRec = Ext.create('PO_HeadData');

Ext .apply(this, {
buttons: [{
text: 'Save',
handler:function(){
if (me.getForm().isValid()) { //Judge Whether the submitted data conforms to the regular expression
//Save function
}
}
}, {
text: 'Cancel',
handler: function () {
me.ownerCt.hide();
}
}],
SetFormValue:function(){ //Call the custom method 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);
}
});