2013/11/04

[ExtJS] 選取textfield部分文字

如果你想要用程式的方式去選取textfield裡特定的文字,各瀏覽器有自己的實作方法,我們使用ExtJS包裝起來,方便開發者使用。

使用案例:
我們使用ExtJS做一個FTP client,在實作"建立新資料夾"的功能時,將會跳出一個Window,裡面包含了一個path field。
參考Filezliia的做法,假設原本的資料夾叫foder1,它會在其後加上/New_Folder當作是新的資料夾名稱,並且會將New_Folder反白起來。因此,使用者可以直接使用這個資料夾名稱。或者直接輸入自定的資料夾名稱,原本預設的資料夾名稱則會被取代。


實作程式碼:
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; 
           me.defaultFocus = 'path'; // set focus before call selectText() 
           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);         
                }
           });
     }
});

PS: 即使沒有要用selectText,養成設定defaultFocus的習慣,可讓使用者開啟視窗的時候直接輸入,不用再用滑鼠點擊field。

沒有留言:

4種PDF轉Word的免費方法(pdf to word, pdf to doc, pdf2word, pdf2doc)

本文將介紹4種 將PDF轉Word檔 的方法,分別分析其效能、方便性、精確性等指標。 1. nitropdf提供的線上 Convert PDF to Word (DOC) 這是一個 線上免費PDF轉Word檔 的服務,網址: http://www.pdftoword.com...