-1

I am working on an extjs 4 project of my own and I am planning to add a method that, when we hover a mouse over the container or the element, the text area gets selected automatically and then we can edit it.

Mat
  • 202,337
  • 40
  • 393
  • 406
Saransh Sharma
  • 121
  • 1
  • 9

1 Answers1

1

Try this:

Ext.onReady(function(){
    Ext.Loader.setConfig({enabled:true});
    Ext.create('Ext.form.TextArea', {
        renderTo: 'container',
        value: '<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">\n<script type="text/javascript" src="ext-all.js"></script>',
        width: 800,
        height: 600,
        listeners: {
            render: function() {
                this.getEl().on('mouseenter', function(){
                    // 500 - is the select timeout
                    this.timeout = setTimeout(this.timeoutHandler.bind(this), 500);
                }, this);
                this.getEl().on('mouseleave', function(){
                    clearTimeout(this.timeout);
                }, this);
            }
        },
        timeoutHandler: function() {
            this.selectText();
            this.focus();
        }
    });
});
Krzysztof
  • 15,900
  • 2
  • 46
  • 76
  • please tell me that where to use these because i am new in extjs i mean like using it as a controller or in apps file please help – Saransh Sharma Dec 17 '11 at 20:45
  • This is example usage of component. `Ext.create('Ext.form.TextArea')` creates TextArea Ext component, and renders it to the html element with id `container`. This is standard usage so far. On line 9 begins `render` event handler code. Inside is binding to the `mouseenter` and `mouseleave` events. This events are HTML ones and that's why there are binded to the this.getEl(). Futher there is basic `setTimeout` call. In timeoutHandler there are 2 functions calls: `selectText` and `focus`. I think their names are self-explaining. – Krzysztof Dec 18 '11 at 09:06