Ext JS numberfield textfield用法

時間 2019-12-04

標籤 ext numberfield textfield 用法欄目 JavaScript 简体版

原文原文鏈接

textfield的用法示例ide

var formCmp = Ext.create("Ext.form.Panel", {
    title: "NumberField用法示例",
    x: 30,
    y: 30,
    width: 500,
    height: 300,
    bodyPadding: 5,
    frame: true,
    defaultType: "textfield",
    fieldDefaults: { labelAlign: "right", labelWidth: 60, msgTarget: "qtip" },
    defaults: { anchor: "100%" },
    items: [
        {
            //控件類型爲numberfield
            xtype: "numberfield",
            //字段名稱，綁定和獲取數據的時候用到
            name: "month",
            //顯示的標籤
            fieldLabel: "月份",
            //控件的值
            value: 1,
            //可否爲空，true爲必填項，false爲能夠爲空
            allowBlank: false,
            //最大值
            maxValue: 12,
            //最小值
            minValue: 1,
            //得到焦點時選中輸入的內容
            selectOnFocus: true,
            //是否只讀，true爲只讀，false爲可編輯
            readOnly: false,
            //是否可用，true爲不可用，false爲可用
            disabled: false,
            //是否隱藏上下調節按鈕
            hideTrigger: false,
            //鍵盤導航是否可用，啓用後能夠經過鍵盤的上下箭頭調整數值
            keyNavEnabled: true,
            //鼠標滾輪是否可用，啓用後能夠經過滾動鼠標滾輪調整數值
            mouseWheelEnabled: true,
            //經過調節按鈕、鍵盤、鼠標滾輪調節數值時的大小
            step: 2
        }
    ],
    listeners: {
        change: function (me, newValue, oldValue, eOpts) {
            Ext.MessageBox.alert("提示", newValue);
        }
    },
    renderTo: "container"
});

NumberField事例
在Form中使用NumberField字段，做爲form的一個item，若是form的defaultType不是numberfield，那麼須要首先將xtype設置爲numberfield。