我创建了一个扩展 Ext.window.Window 的类,它基本上允许用户输入一些具有最小长度限制的文本。检查是否满足该条件,然后解锁提交按钮。单击该按钮后,将触发自定义事件。
我的代码工作正常,但我想知道它是否正确编写。正确地说,我不是指工作,而是优化并满足 Sencha 规则。
我将不胜感激所有的意见和建议。
所以这是我的代码:
Ext.define("Urlopy.Components.ReasonWindow", {
extend : 'Ext.window.Window',
modal : true,
width : 400,
height : 200,
minWidth : 400,
minHeight : 200,
layout : 'fit',
initComponent : function() {
this.addEvents('addHistoryEntry');
this.title = 'Powód odrzucenia'
var minimum = 20;//message minimum length
this.form = Ext.create('Ext.form.Panel', {
border : false,
bodyPadding : 10,
items : [{
xtype : 'textarea',
id : 'myreason',
allowBlank: false,
minLength: minimum,
hideLabel : true,
enableKeyEvents: true,
name : 'reason',
anchor : '100% 100%',
listeners: {
'keypress': {
fn: function(t){
var v = t.getValue(), cc = v.length ? v.length : 0;
if(cc>=minimum)
{
Ext.fly(charCount.getEl()).update('Można wysłać');
sendButton.enable();
} else
{
Ext.fly(charCount.getEl()).update('Pozostało znaków:'+(minimum-cc));
sendButton.disable();
}
},
buffer: 1
}
}
}]
});
this.items = this.form;
var sendButton = Ext.create("Ext.button.Button", {
text : 'Wyślij',
disabled : true,
icon : 'resources/diagona-icons/icons/16/103.png',
scope : this,
handler : function() {
this.fireEvent("addHistoryEntry",Ext.getCmp('myreason').getValue());
this.close();
}
});
var charCount = Ext.create('Ext.toolbar.TextItem', {text: 'Pozostało: ' + minimum});
this.dockedItems = [{
xtype : 'toolbar',
dock : 'bottom',
ui : 'footer',
defaults : {
minWidth : 100
},
//pack : 'start',
items : [charCount, '->', sendButton]
}];
this.callParent();
}
});
编辑
如何将参数传递给我的窗口?现在我这样做是正确的:
var j = Ext.create("Urlopy.Components.ReasonWindow");
j.rec=rec;//j.setRecord(rec); or by adding custom function
j.on("addHistoryEntry", function(reason, rec) {
console.log(reason);
console.log(rec.get('Name'));
});
j.show();
当我调用 Ext.create 时,我能以某种方式传递它吗?