11/04/2013

[ExtJS] Partially Select Text in textfield Programmatically

We are trying to build a FTP client via ExtJS.
When users want to create a new folder on the ftp server, we'd like to pop a form which contains a path input text field. The default value of path field is set as {current_foder}/New_Folder. While New_Folder is the default new folder name, of course, it could be modified by user before submitting.
In this case, selecting the text "New_Folder" automatically makes user change the new folder name by just typing a new name without selecting  by themselves.
Partially Select Text in textfield 
Here is implementation for selecting a a portion of a text in textfield programmatically in ExtJS.
Ext.define('Ext.enhance.form.field.Text', {
   override: 'Ext.form.field.Text',
   selectText: function (start, end) {
      var field = this.inputEl.dom;
      if (field.createTextRange) {
         var selRange = field.createTextRange();
         selRange.collapse(true);
         selRange.moveStart('character', start);
         selRange.moveEnd('character', end);
         selRange.select();
      } else if (field.setSelectionRange) {
         field.setSelectionRange(start, end);
      } else if (field.selectionStart) {
         field.selectionStart = start;
         field.selectionEnd = end;
      }
      field.focus();
   }
});
Ext.define('TonyTuan.CreateFolderWin', {
   extend: 'Ext.window.Window',
   width: 300,
   layout: {
      type: 'fit'
   },
   title: 'Window',
   initComponent: function () {
      var me = this;
      // set focus before call selectText()
      me.defaultFocus = 'path';
      me.items = [{
         xtype: 'form',
         bodyPadding: 10,
         layout: 'anchor',
         defaultType: 'textfield',
         items: [{
            fieldLabel: 'path',
            name: 'path',
            itemId: 'path'
         }]
      }];
      me.callParent();
      me.on({
         // set default value for path
         show: function () {
            me.down('#path').setValue('folder1/New_Folder');
            me.down('#path').selectText(6, 18);
         }
      });
   }
});
Note that setting defaultFocus properly in Window makes users be able to enter text in field without clicking on the filed.

8/21/2013

[ExtJS] Remove "No file chosen" Tooltip for File Input Field

When I was implementing file uploading feature in js, I found the file field button always shows "No file chosen" in Chrome when the field is empty. I had tried many solutions described in stackoverflow. Unfortunately, none of them could override or remove the "No file chosen" Tooltip. There’s no chance for javasript developer to remove it directly.
No file chosen
"No file chosen" tooltip
<html>
    <head>
    </head>
    <body>
        <input type="file" multiple/>
    </body>
</html>

But when user upload files in gmail, it can show custom tooltip such as “Attach files”.
Gmail file uploading with custom tooltip.
So I checked the source of gmail in firebug, I found the “Attach files” button is defined as a div tag. However, a div tag is not able to open file picker for security issue. How can google make it? Actually, the div tag is just a wrapper. And the file field is hidden in the body. Whenever div tag is clicked, just click the file field programmably. Then you can listen onchange event for file field to get the file metadata. For ExtJS developer, you can refer to the following code in you project.
Custom Tooltip for File Uploading in ExtJS
Ext.define('TonyTuan.BrowseButton', {
    extend : 'Ext.button.Button',
    icon : 'css/images/arrow_up_16x16.png',
    text : 'Browse...',
    constructor : function(config) {
        var me = this;
        // Show custom tooltip instead of "No file chosen".
        config.tooltip = 'Attach Files';
        me.callParent([ config ]);
    },
    handler : function() {
        // To trigger the file field click event
        document.getElementById('upload-field').click();
    }
});

Ext.define('TonyTuan.FileGrid', {
    extend : 'Ext.grid.Panel',
    alias : 'widget.fileGrid',
    title : 'Files',
    store : 'File',
    initComponent : function() {
        var me = this;
        me.columns = [ {
            dataIndex : 'filename',
            header : 'Filename',
        } ];
        me.tbar = [ Ext.create('TonyTuan.BrowseButton', {
            itemId : 'browseButton'
        }) ];
        me.callParent(arguments);
    }
}); 

Ext.define('TonyTuan.FilePanel', {
    extend : 'Ext.panel.Panel',
    title : 'Files',
    layout : 'border',
    initComponent : function() {
        var me = this;
        me.items = [ {
            region : 'center',
            xtype : 'fileGrid',
            layout : 'fit',
            flex : 3,
            margins : '5 5 0 0'
        }, {
            hidden : true,
            region : 'north',
            xtype : 'component',
            html : '<input type="file" multiple id="upload-field"/>'
        } ];
        me.callParent(arguments);
        me.on({
            afterrender : function() {
                document.getElementById('upload-field').onchange = function() {
                    var files = document.getElementById('upload-field').files;
                    console.log('files', files); 
                    // Add files to your fileGrid store
                };
            }
        });
    }
});

5/14/2013

Fix "Requesting JavaScript AST from selection" When Editing Javascript in Eclipse

Eclipse does not work well with js/css/jsp/jspf. I often encounter error such as “An internal error occurred during: Requesting JavaScript AST from selection. java.lang.OutOfMemoryError: Java heap space” when select/edit/search these types of files. It seems Eclipse has no idea how to validate these files, so I tried to disable all validators. But it does not solve the problem. All CPU resource is still occupied until I found out this way to exclude these files for validation.

1. Right click on your project, and click “Properties”.

2. Click “Include Path” and Press “Source” tab. Then edit the excluded file list.

3. Add the folders and files which you want Eclipse to skip to validate.

4. For example, I excluded all files in web app folder.

Hopefully, Out Of Memory error will not happen again.