Question

我创建了一个扩展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时，我可以以某种方式将它传递到行吗？

Answer 1

var j = Ext.create("Urlopy.Components.ReasonWindow", {
    rec : rec,
    param2 : param2Value
});

j.on("addHistoryEntry", function(reason, rec) {
    console.log(reason);
    console.log(rec.get('Name'));
});

j.show():

您可以在上面看到如何传递params。非常简单。

快乐的编码。

ExtJS扩展窗口优化 - 正确的方法

1 个答案: