Question

I’ve created a class extending Ext.window.Window that basically allows user to enter some text with minimal length restriction. Check if that condition has been met, then it unlocks submit button.
After that button is clicked custom event is fired.

My code works fine, but I was wondering if it is correctly written.
By correctly I don’t mean working but optimized and meeting Sencha rules.

I will be grateful for all comments and suggestions.

So here is my code:

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();
        }
    });

---

EDIT

How do I pass parameter to my window?
Right now I’m doing it right this:

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();

Can I somehow pass it in line when I call 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():

You can see above how to pass params in. Pretty easy.

Happy coding.