[ExtJS5學習筆記]第二十二節 Extjs5中使用beforeLabelTpl配置給標籤增加必填選項星號標誌

[ExtJS5學習筆記]第二十二節 Extjs5中使用beforeLabelTpl配置給標籤增加必填選項星號標誌

 

在註冊頁面擷取填寫資訊的介面，我們都能看到必填選項的標誌* 這個東西。在Ext中，我們可以通過fieldLabel來建立一個標籤，但是沒有選項明確指出有必填選項的配置，剛才看了下官方的examples/kitchensink/#form-contact例子，發現有個beforeLabelTpl配置可以用來設定必填選項的*標誌。

看一下效果先：

在標籤的左邊就增加了*必填標誌。

實現方法：

 

items:[{xtype: 'textfield',name: 'username',labelWidth: 50,    fieldLabel: '使用者名稱',beforeLabelTextTpl: ['*'],//allowBlank: false,emptyText: '使用者名稱或郵箱地址'  },{xtype: 'textfield',name: 'password',labelWidth: 50,inputType: 'password',     fieldLabel: '密  碼',beforeLabelTextTpl: ['*'],//allowBlank: false,emptyText: '請輸入您的密碼'  }]

通過設定beforeLabelTextTpl配置，我們可以避免了每一次都在標籤前面自己寫個星號，再寫標籤名稱那樣粗魯的方法了，可以這樣自訂方式實現選項的標籤配置。

 

2.labelAlign標籤對齊

還有，標籤的顯示，我想把‘使用者名稱’和‘密碼’這兩個對其，就是想在密碼中間加個空格，但是我嘗試之後發現不可行，不知道是不是ext的bug還是故意這麼做的。後來發現可以設定label的對齊，設定為靠右對齊，那麼密碼的碼字就和使用者名稱的名字對齊了。但是前面字型還是不對齊，相比之下，又好看了一點啊。

 

fieldDefaults: {labelAlign: 'right',labelWidth: 115,msgTarget: 'side'},

 

3.錯誤提示資訊msgTarget：

一共可以設定qtip、title、under、side、none五種樣式，我喜歡under的就是在下面出現錯誤資訊的，需要定製客戶化的資訊使用的是blankText。

 

msgTarget: 'under'

blankText:使用者名稱不允許為空白

顯示效果：

 

關於其他方式，可以自己試下效果，看名字也可以猜到效果的，看起來還不錯呢。