uniGUI之uniEdit(23)

主要新加屬性；

a]EmptyText在沒有文本里顯示的背景文本。

b]作為其他控件的編輯輸入控件。

c]ClearButton清空按鈕

d]左邊顯示文本

e]回車觸發事件CharEOL:=#13

f]空白內容，紅色提示

h]右邊感嘆號提示 必填

i]加個陰影顯示  其他有焦點的控件也有效

j]各種輸入類型

k]獲得焦點

---

a]EmptyText在沒有文本里顯示的背景文本。

UniEdit1.EmptyText:='背景文字';

---

 b]作為其他控件的編輯輸入控件。

  UniDBGrid1.Columns[1].Filtering.Editor := UniEdit1;   //十過濾 編輯控件 放在hidenPanel
  UniDBGrid1.Columns[1].Editor := UniEdit1;   //雙擊 編輯控件 放在hidenPanel

  UniEdit1.CharEOL:=#13;  //表示回車 確定 開始  這很重要

---

 c]ClearButton清空按鈕

 

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
UniEdit1.ClearButton:=true;
end;

---

d]左邊顯示文本

 

 uniEdit1.FieldLabel:='姓名';        //文本值
 uniEdit1.FieldLabelAlign:=laRight;  //靠右顯示
 //uniEdit1.FieldLabelSeparator:=':';//分隔符，默認為 :  可以不設置
 uniEdit1.FieldLabelWidth:=40        //文本寬度

---

 e]回車觸發事件CharEOL:=#13

  然后在OnKeyPress寫事件

procedure TMainForm.UniEdit1KeyPress(Sender: TObject; var Key: Char);
begin
  UniMemo1.Lines.Add(UniEdit1.Text);
end;

//等價於,例子D:\Program Files\FMSoft\Framework\uniGUI\Demos\Desktop\AllFeaturesDemo Form Controls/CharEOL 
procedure TMainForm.UniEdit1KeyPress(Sender: TObject; var Key: Char);
begin
  if   (Key = #13) then    begin
     UniMemo1.Lines.Add(UniEdit1.Text);
  end; 
end;

---

f]空白內容，紅色提示

var
  tmpColor: TColor;
begin
  if Trim(UniEdit1.Text) = '' then
  begin
    tmpColor := UniEdit1.Color;
    UniEdit1.Color := clRed;
    MessageDlg('【設備型號】 不能為空！', mtConfirmation, [mbOK],
      procedure(Sender: TComponent; Res: Integer)
      begin
        if Res = mrOK then
          UniEdit1.Color := tmpColor;
      end);

    Exit;
  end;
end;

---

 h]右邊感嘆號提示 必填

1】設計時uniEdit1.text必須有，就是要經歷過一個 有值  再無值的 過程 觸動。

2】在

procedure TMainForm.UniFormAfterShow(Sender: TObject);
begin
uniedit1.Text:='';//將文本清空
end;

function beforeInit(sender, config)
{  Ext.apply(sender,{allowBlank:false,vtype:'',msgTarget : 'side'});}

function beforeInit(sender, config)
{
  Ext.apply(sender,{allowBlank:false,vtype:'email',msgTarget : 'side'});
}

function beforeInit(sender, config)
{
var timeTest = /^([1-9]|1[0-9])[0-5][0-9])(\s[a|p]m)$/i; 
         Ext.apply(Ext.form.field.VTypes, {
            //  vtype validation function
            time: function(val, field) {
            return timeTest.test(val);
            },
            // vtype Text property: The error text to display when the validation function returns false
            timeText: 'Not a valid time.  Must be in the format "12:34 PM".',
            // vtype Mask property: The keystroke filter mask
            timeMask: /[\d\s:amp]/i
            });
           
  Ext.apply(sender,{
            name: 'departureTime',
            vtype: 'time',
            msgTarget : 'side'
            });           
}

function beforeInit(sender, config)
{
// custom Vtype for vtype:'IPAddress'
            Ext.apply(Ext.form.field.VTypes, {
            IPAddress:  function(v) {
            return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
            },
            IPAddressText: 'Must be a numeric IP address',
            IPAddressMask: /[\d\.]/i
            });
           
  Ext.apply(sender,{
            name: 'IPAddress',
            vtype: 'IPAddress',
            msgTarget : 'side'
            });           
}

function beforeInit(sender, config)
{
            // custom Vtype for vtype:'AlphaNum'
            Ext.apply(Ext.form.field.VTypes, {
            AlphaNum:  function(v) {
                 return /^[a-zA-Z0-9_]+$/i.test(v);
            },
            AlphaNumText: 'Must be an alphanumeric word',          
            // This mask filter invalid keystrokes
            AlphaNumMask: /[a-z0-9]/i                                         
            });
           
            Ext.apply(sender,{
            vtype: 'AlphaNum',
            msgTarget : 'side'
            });           
}

function beforeInit(sender, config)
{
   var url = /(((^https?)|(^ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@`~=%!]*)(\.\w{2,})?)*\/?)/i;
            // custom Vtype for vtype:'url'
            Ext.apply(Ext.form.field.VTypes, {
            url:  function(v) {
                 return url.test(v);
            },
            urlText: 'Must be a valid URL (ie. http, https or ftp)'          
            });
           
            Ext.apply(sender,{
            vtype: 'url',
            msgTarget : 'side'
            });           
}

---

function beforeInit(sender, config)
{
            Ext.apply(Ext.form.field.VTypes, {
            IPAddress:  function(v) {
            return ;
            },
            IPAddressText: '自定義文本'
            });
           
            
Ext.apply(sender,{vtype:'IPAddress',msgTarget : 'side'});        
}

 

i]加個陰影顯示 

.x-form-text-wrap-focus{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);  //8px為陰影大小
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);          //8px為陰影大小
}

 其他有焦點的控件也有效，如uniMemo,uniCombobox,

---

j]各種輸入類型

 

  

---

 

k]獲得焦點

UniSession.AddJS(UniEdit1.JSName+'.focus();');